小猴子跌落山崖之 linear、ease、ease-in

今天通过一个小猴子跌落山崖的过程来学习一下 animation-timing-function，我做了一个 demo，效果如下：

无论做移动端还是前端的动画，都会频繁地接触 linear、ease、ease-in、ease-out、ease-in-out 这些函数，那么它们究竟有哪些区别，今天这节内容一探究竟。

先明确一点 ease != easy。

可以把动画看做是由「多张图片组成」的一个集合，以一定速度来切换这些图片，会给人产生一种图片在动的幻觉。而 linear、ease 这些关键字就是用来控制这些图片以多快的速度来切换，比如 0.1s 内「匀速」地切换 5 张图片，0.1s 内先慢后快切换 5 张图片。

linear、ease、ease-in、ease-out、ease-in-out 这些其实是一些关键字，它的本质是缓冲函数 cubic-bezier (x1, y1, x2, y2) ，比如 linear 与 cubic-bezier (0, 0, 1, 1) 等价。我把这些关键字称为以「傻瓜式」的方式来帮助你完成动画的设计。我先解释下这些关键字的作用：

1、linear => cubic-bezier(0, 0, 1, 1)

动画自始至终以同一速度再变化。

2、ease => cubic-bezier(0.25, 0.1, 0.25, 1.0)

动画缓慢开始，「突然」加速，再缓慢结束；

3、ease-in => cubic-bezier(0.42, 0.0, 1.0, 1.0)

动画缓慢开始，然后逐渐加速直到结束。

4、ease-out => cubic-bezier(0.0, 0.0, 0.58, 1.0)

动画突然开始，然后逐渐减速直到结束。也就是说它的开始速度很快。

5、ease-in-out => cubic-bezier(0.42, 0.0, 0.58, 1.0)

这个是 ease-in 和 ease-out 的结合，前半段是 ease-in 的表现，后半段是 ease-out 的表现。动画缓慢开始，加速，缓慢结束。

我们常用的就这几个方法，关于这些关键字我做个的 demo：

https://github.com/lefex/FE/tree/master/animation/animation。

大家加油！

推荐阅读：

学习前端的 7 个专题