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