再谈CSS动画

今天重新翻看《CSS 揭秘》“过渡与动画”一章，并把该章代码重新敲了一遍，代码托管在我的Github，在此总结一些心得。

动画的奥秘

在网页中添加动画的目的是让用户有更加优质的用户体验，为了达到目标，我们需要让动画满足两点目标：

• 意料之外
• 情理之中

其中，意料之外是指动画要让用户感到新奇有趣，最好是产生惊喜（这归功于好的设计灵感），而情理之中是指动画要符合用户的直觉，具体来说，就是动画需要符合用户对物理世界物体运动规律的心智模型，这需要Web开发者来实现。

如何做到呢？终于进入正题了，答案是通过以下两点：

1. 回弹效果：物体运动不会突然终止，会因为惯性而继续向前运动一段距离；
2. 缓动曲线（又名贝塞尔曲线）：指定动画在整段时间中以怎样的速率推进；

代码库中的“弹跳动画”Demo说明了如何通过以上两点创建逼真的小球掉落动画。

对于回弹效果是我们在做动画时需要想到的一点，而使用缓动曲线可以让我们很好的实现回弹效果，在CSS中，设定缓动曲线的方式如下：

animation-timing-function: cubic-bezier(.87, .11, 1, .81);

这里讲解一下animation-timing-function属性，用来指定动画的运动速率，有一下几个值：ease(default)，ease-in，ease-out，ease-in-out和上面提到的自定义函数。

你一定还是不明白缓动曲线是什么，别急，看下面这张图：

这基本上是animation-timing-function: ease的贝塞尔曲线图，它的横坐标为时间，纵坐标是进程，从图中我们可以得出这样的结论：“如果动画整个持续时间为2秒，那么在动画开始1秒（一半时间）时，整个动画已经完成了80%”。

停下，闭上眼，深呼吸，想想看在这种曲线下我们的动画会经历怎样的过程，答案是它一开始会非常快，然后逐渐慢下来。

有点感觉了吗？（如果没有的话请多对照着上图图，脑子里想象小球掉落的画面。）

看到这里，我已经默认你已经明白设置缓动曲线对于做出逼真动画的意义了，那么接下来的问题便是如何做到，毕竟cubic-bezier函数看起来一点都不好设置。

放轻松，拿上我给你的这个轮子，在贝塞尔函数的海洋中兴风作浪吧：cubic-bezier。

再多说几句：贝塞尔曲线

如果你像我一样不满足上面的内容，那就跟我一起讨论一下cubic-beizer这个函数里的四个值分别是什么？我们回到刚才那张图：

注意，我为这张图添加了坐标单位，无论横轴还是纵轴，原点的值都是0，而终点的坐标值都是1，顺便一提，这个贝塞尔曲线转换为CSS属性为：

transition-timing-function: cubic-bezier(.21, .07, .41, 1)

发现了吗，前两个参数值分别是起始锚点的横，纵坐标，后两个参数分别是终止锚点的横，纵坐标。什么？你问我锚点是什么，这个就说来话长了，而且我认为没有什么说明的意义，反正你知道了还是要用我给你的工具生成这四个坐标的。

但是，注意，我可以这样设置一个贝塞尔曲线：

transition-timing-function: cubic-bezier(.76, -0.68, .68, 1.56)

这个设置对应的贝塞尔曲线图如下：

看到了吗，贝塞尔曲线的一部分突破了坐标系，我们的函数参数值也出现了负值与大于1的值，这又会发生什么？

答案是动画会在超出坐标系的范围里继续运动相应的量，如果你希望小球最终掉落至300px，那么在曲线超出纵轴的范围内，小球掉落的距离要大于300px（具体取决于偏离纵轴的程度）。

知道这个有什么用呢？答案是知道这个原理可以帮助我们节省一些回弹动画，通过这个原理，我们可以在贝塞尔曲线函数层面上实现简单的“回弹效果”，具体可以参考代码仓库中“弹性过渡”Demo。