送彩金500的网站大白菜,注册秒送18体验彩金,送彩金200的网站大白菜

CSS transition animation的使用(内含贝赛尔曲线详解)

2019-12-10 16:15:36 IT时代网 买辣椒也用券 分享

文章主要介绍了css transition animation的使用(内含贝赛尔曲线详解),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,

区别:

transition也叫过渡动画,主要是用于让一个元素从一种状态过渡到另一种状态效果,常用于主动触发的效果。例如移动端的页面切换(很常用)、button点击效果(也很常见)。

animation才是css3正宗的动画,主要是用于实现某种持续的动画效果(当然简单的过渡动画也可以实现),常用于自动触发的效果。例如加载中的持续动画效果等等。

在学习这两种动画之前要最好是先了解一下 transition-timing-function(过渡效果时间曲线);

举个栗子

比如一辆小汽车从a点到b点的运动过程是一个动画,那么过渡效果时间曲线就是这辆小汽车到底是匀速过去呢还是一直加速冲过去,又或者说一会加速冲一会减速慢行。

这个属性有五种可供选择的属性值和一种可以自定义的属性值

自定义属性值:cubic-bezier(n,n,n,n)

在了解这个自定义属性值之前我们再来深入了解一下贝塞尔曲线。

为什么要了解贝塞尔曲线?因为这个自定义时间过渡曲线就是用贝塞尔曲线表示的。(这是一个三阶的贝塞尔曲线)

贝塞尔曲线应用场景有哪些?贝塞尔曲线不仅仅在描述速度、时间上会起作用,在ps中的色彩调节和一些建筑工程学上面都会有涉及。

那我们先来画一个二阶的贝塞尔曲线吧。

首先打开ps,在一个平面内随便画三个点a、b、c然后连接起来,如下图。

然后在a、b中找到一点d,在b、c中找到一点e,满足公式:ad/ab = be/bc

然后呢,连接d、e,在de线上找到一点f,满足公式:df/de = ad/ab = be/bc

然后就没有然后了,因为这个二阶贝塞尔曲线已经画完了,这个曲线就是所有可能的f点。

然后我用谷歌浏览器调试工具再演示一下二阶贝塞尔曲线图(本来是想用火狐演示的,但是火狐浏览器调试曲线的时候层级有点高,还很敏感,无法用gif工具录制,所以就放弃了,但实际上我更喜欢火狐的调试动画调试工具一点。)

1、上面的球代表动画执行的过程,球越快,颜色越浅,反之越深。

2、两个固定点的坐标是(0,0)和(1,1)

声明:本站部分资源来源于网络,版权归原作者或者来源机构所有,送彩金500的网站大白菜,注册秒送18体验彩金,送彩金200的网站大白菜,请通知我们,我们将第一时间删除内容。本站刊载文章出于传递更多信息之目的,所刊文章观点仅代表作者本人观点,并不意味着本站赞同作者观点或证实其描述,其原创性及对文章内容的真实性、完整性、及时性本站亦不作任何保证或承诺,请读者仅作参考。
编辑: