CSS3timing-function

What the FUCK is animation-timing-function

animation-timing-function是css animation的一个属性,用来描述动画在一个keyframe周期内动画开始阶段动画结束阶段速度变化的快慢程度(速度的变化率),值由一个或几个timing-function组成。

timing-function

timing-function有两种表示方法,先说第一种,核心的cubic-bezier(x1,y1,x2,y2)贝塞尔函数

请自行百度贝塞尔函数(sorry)。。。
(x1,y1)和(x2,y2)分别对应图中的P1和P2点,P0和P3对用动画的开始点和结束点。
移动P1点(x1,y1)时,曲线上P0点的弧度会发生变化,效果类似于Photoshop中钢笔工具画图工具,同理移动P2点(x2,y2),曲线上P3点的弧度发生变化,这两点弧度的变化直接影响整个曲线的形状,请用Photoshop钢笔工具尝试或自行脑补。
曲线的弧度对应动画执行的变化程度,比如弧度大时,动画变化的就快,弧度小,动画变化的就慢(类似于高中物理加速度a的概念)。
而cubic-bezier(x1,y1,x2,y2)中正是定义了P1,P2这两个点的位置,通过这两点的位置来确定整个运动曲线的弧度,就是动画的变化的快慢。

对应图:

贝塞尔函数

比如我们想做一个小球类似左右撞击的往返动画,那么要求小球在最左和最右有一个的效果,其实就是要求在动画开始时和结束时小球的运动曲线(弧度)变大,如何变大,当然不只是多喝木瓜汤。拿开始时刻说,当P1的位置越靠近左上方,P0处弧度越大,拿结束时刻说,P2越靠近右下方,P3处弧度越大。即动画的开始和结束处小球速度变化快,有了弹的效果。

取值

由上图可知,X轴(横轴)没有赋值,且最大值为1,所以cubic-bezier()函数中的x1,x2取值区间为[0,1],而Y轴(纵轴)是没有[0,1]限制的,故y1,y2无限制。
当y1,y2超出[0,1]范围时,可产生bouncing effects.就是弹一下返回一小段然后再继续执行的效果,上码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
div {
animation-timing-function: cubic-bezier(0.1, 1.3, 1, -0.3); //看这儿的y1和y2
animation-direction: alternate;
animation-duration: 3s;
animation-fill-mode: none;
animation-iteration-count: infinite;
animation-name: anim;
animation-play-state: running;
border: 1px solid red;
height: 80px;
position: relative;
width: 80px;
border-radius: 50%;
}
@keyframes anim {
0% {
left: 0;
top: 0;
}
100% {
left: 550px;
top: 0;
}
}

第二种是关键字表示,就是指定值的cubic-bezier()函数简写:

linear == cubic-bezier(0.0, 0.0, 1.0, 1.0),匀速运动(高中物理既视感):

贝塞尔函数

其余的关键字为了不占用过多github空间,请自行MDN

某霸博客上偷了个不错的现成bezier函数,屌屌的。