css3动画animation-timing-function中的cubic-bezier(n,n,n,n)参数详解

文章2016-06-153,437 人已阅来源:网络

cubic-bezier

cubic-bezier即为贝塞尔曲线中的绘制方法。图上有四点,P0-3,其中P0、P3是默认的点,对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义,x1,x2,y1,y2的值范围在[0, 1]。

预留的几个特效:

ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)

linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)

ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)

ease-out: cubic-bezier(0, 0, 0.58, 1.0)

ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

也就是说第一个n[x1]和第二个n第四个n[y1]共同决定了p1的位置,第三个n[x2]和第二个n第四个n[y2]共同决定了p2的位置。

那么我们如何获取这些n的值呢?

用chrome浏览器审查元素,随便找到一个设置动画的样式,如下图:

1

点击那个贝塞尔曲线小图标,会弹出一个预览图:

bei

注意:贝塞尔曲线的那两个【紫色圆点】是可以拖动的,而最下面的cubic-bezier参数也在一直变化。当我们调整到需要的效果时,直接把下面的参数值copy下来即可。