java easing_[译] 动画中缓动（easing）的基础知识

自然界中没有东西是从一个点线性地移动到另一点。 在现实中，事物在运动时可能加速或减速。 我们的大脑习惯于期待这种运动，因此在做动画时，应利用此规律。 自然的运动会让用户对你的应用感觉更舒服，从而产生更好的体验效果。

Tip:

缓动会让你的动画看起来更加自然

为UI元素选择缓出(ease-out)动画

避免缓入(ease-in)或者缓入缓出(ease-in-out)动画，除非你能让其保持简短；这种动画会让用户觉得反应迟钝

在经典的动画中，缓慢开始然后加速称为“慢入”(slow in)，开始很快然后减速称为“慢出”(slow out)，然而网上最常见的叫法是“缓入”(ease in)和“缓出”(ease out)。有时候两者结合叫做“缓入缓出”(ease in out)。缓动可以使动画不再那么生硬。

缓动的关键字

CSS transition和animation都能够让你去选择一种缓动类型来用于动画中。你可以使用影响动画缓动的关键字。你可以完全自定义你的缓动效果，这使得你能够更加自由的改善自己的应用。

下面是你能在CSS里用到的一些关键字：

linear

ease-in

ease-out

ease-in-out

你也可以使用steps关键字，它能让你创建具有步骤的变换，但上面列出的关键字都是最有用的，能够创造出自然的动画效果，这就是你所需要的。

线性动画

没有任何缓动效果的动画就是线性动画，线性变换的图如下：

随时间增长，值会等量增长。线性运动的物体看起来很像机器人不自然，这也是用户会觉得不自然的效果。总之你需要避免使用线性运动。

不管你用CSS还是JS来实现动画，你会发现总会有一个选项是linear的。如果用CSS来实现上述效果，代码如下：

transition: transform 500ms linear;

缓出(ease-out)动画

缓出导致动画开始时比线性运动要快，然后在快结束时减速

有很多种方法来实现缓出效果，最简单的就是CSS里的ease-out关键字了：

transition: transform 500ms ease-out;

缓出效果非常适合用户界面，因为在开始快速回让动画有反应快的感觉，结束时有自然的减速。

缓入(ease-in)动画

与缓出相反，缓入开始慢，结束快。

这种动画像很重的石头掉下来一样，开始很慢，然后快速撞击地面并迅速沉寂。

与缓出和线性动画类似，要想使用缓入动画，可以直接使用关键字：

transition: transform 500ms ease-in;

然而从交互的角度看，缓入会让人觉得有些不寻常，因为它在结尾很突然的沉寂。真实世界里的事物常常是减速，而不是突然停止。缓入还会让人感觉行动迟缓，让人对网站的响应速度产生不好的影响。

缓入缓出(ease-in-out)动画

缓入缓出与汽车的加速减速类似，使用恰当的时候，会比单独使用缓出有更好的效果。

需要注意的是，因为开始缓入会让动画有迟钝的感觉，所以缓入的时间不要太长，一般在300~500ms较为合适，其实很大程度上会根据项目来选择合适的数字。缓入缓出由于开始慢，中间加速，结束慢，所以会使得整个动画有非常强烈的对比，用户可能会感到比较满意。

设置缓入缓出动画可以使用ease-in-outCSS关键字：

transition: transform 500ms ease-in-out;