理解css中的贝塞尔曲线函数：cubic-bezier
chenxiaochun opened this issue · 0 comments
我们都知道，在 css 中预定义了五种缓动函数可以实现动画的缓动效果：
linear，以相同速度开始至结束的过渡效果ease，以慢速开始，中间变快，然后慢速结束的过渡效果ease-in，以慢速开始的过渡效果ease-out，以慢速结束的过渡效果ease-in-out，以慢速开始和结束的过渡效果
其实它们背后的实现原理都是用cubic-bezier来完成的，它可以接收四个参数，每个参数的取值范围只能是 0 到 1 之间的浮点数。
cubic-bezier(x1, y1, x2, y2)
看下面的示意图，一条直线从左下角延伸到右上角。其中，左下角的坐标为(0,0)，右上角的坐标为(1,1)。(x1,y1)代表红色圆点坐标，(x2,y2)代表蓝色圆点的坐标。
linear缓动函数
只要红蓝两点与两端的白色圆点处于同一条直线上，没有任何起伏，最终表现的动画缓动效果就是线性匀速的，也就是 css 中预定义的linear缓动效果。使用cubic-bezier表示为：
cubic-bezier(0.39,0.39,0.67,0.67)
通过不断调整它的参数值你会发现一个规律，只要是 x1=y1，并且 x2=y2，红蓝两点就一定是与两端的白色圆点处于同一条直线上，表现出来的也肯定就是linear缓动效果。
ease缓动函数
现在我们把函数值改为cubic-bezier(0.25,0.07,0.25,1)，曲线的表现形式变成了下面的样子：
这就是ease缓动效果的表现形式：慢速开始，中间变快，最后慢速结束的过渡效果。
ease-in缓动函数
它的缓动效果表现为：以慢速开始，然后加速到一个较快的速度直到结尾的过渡效果。使用cubic-bezier函数表示为：
cubic-bezier(0.44,0,1,1)
ease-out缓动函数
它的缓动效果表现为：以较快的速度开始，接近结尾时以慢速结束的过渡效果。使用cubic-bezier函数表示为：
cubic-bezier(0,0,0.58,1)
ease-in-out缓动函数
它的缓动效果表现为：慢速开始、中间加速、慢速结束的过渡效果，使用cubic-bezier函数表示为：
cubic-bezier(0.42,0,0.58,1)
最后总结
看完这些缓动效果与曲线的表现形式，你有看出什么规律吗？那就是你可以把这些曲线想象成一座山坡，然后有一辆小车在沿着它往上爬。但是，这辆小车与平常的不同，它是反重力的，也就是说：
越平缓的山坡它爬的越慢，越陡峭的山坡它反而爬的越快
只要明白了这个意思，你再去观察那些缓动曲线，你就很容易明白它们最终呈现的缓动效果是什么样的了。