缓动的基础知识

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

在经典动画中，缓慢开始然后加速的动画术语是“慢入”，快速开始然后减速的动画被称为“慢出”。网络上对于这些动画最常用的术语分别是“缓入”和“缓出”。有时两种动画相组合，称为“缓入缓出”。缓动实际上是使动画不再那么尖锐或生硬的过程。

CSS transition 动画允许您选择要为动画使用的缓动类型。还可以完全自定义您的缓动，借此方式更自由地表达应用的个性。

以下是可在 CSS 中使用的一些关键字：

1、linear

2、ease-in

3、ease-out

4、ease-in-out

线性动画

没有任何缓动的动画称为线性动画。线性变换的图形看起来像这样：

随着时间推移，其值以等量增加。采用线性运动时，动画内容往往显得很僵硬，不自然，让用户觉得不协调。一般来说，应避免线性运动。

要通过 CSS 实现上述效果，代码将类似下面这样：

transition: transform 500ms linear

缓出动画

缓出使动画在开头处比线性动画更快，还会在结尾处减速。

缓出一般最适合界面，因为开头时快速使动画有反应快的感觉，同时在结尾仍允许有一点自然的减速。

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

transition: transform 500ms ease-out;

缓入动画

缓入动画开头慢结尾快，与缓出动画正好相反。

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

但是，从交互的角度来看，缓入可能让人感觉有点不寻常，因为结尾很突然；在现实中移动的物体往往是减速，而不是突然停止。缓入还有让人感觉行动迟缓的不利效果，这会对网站或应用的响应速度给人的感觉产生负面影响。

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

transition: transform 500ms ease-in;

缓入缓出动画

缓入并缓出与汽车加速和减速相似，使用得当时，可以实现比单纯缓出更生动的效果。

由于缓入开头让动画有迟钝感，因此动画持续时间不要过长。300-500 毫秒的时间范围通常比较合适，但实际的数量主要取决于项目的感觉。也就是说，由于开头慢、中间快和结尾慢，动画将有更强的对比，可能让用户感到非常满意。

要设置缓入缓出动画，可以使用 ease-in-out CSS 关键字：

transition: transform 500ms ease-in-out;

自定义缓动

有时您不想使用 CSS 随附的缓动关键字，或者要使用 Web Animations 或 JavaScript 框架。在这些情况下，一般可以定义自己的曲线（或公式），这让您能更好地控制项目动画的感觉。

1、自定义缓动使您能够给项目提供更多个性。

2、您可以创建与默认动画曲线（缓出、缓入等）相似的三次贝塞尔曲线，只是重点放在不同的地方。

3、当需要对动画时间和行为（例如弹性或弹跳动画）进行更多控制时，请使用 JavaScript。

事实上，关键字 ease、ease-in、ease-out 和 linear 可以通过贝塞尔曲线来实现。

这些贝塞尔曲线有四个值，即 2 对数字，每对数字描述三次贝塞尔曲线的控制点的 X 和 Y 坐标。贝塞尔曲线的起点坐标为 (0, 0)，终点坐标为 (1, 1)；由您设置两个控制点的 X 和 Y 值。两个控制点的 X 值必须在 0 到 1 之间，每个控制点的 Y 值可以超过 [0, 1] 限制，但此规范未说明可超过多少。

更改每个控制点的 X 和 Y 值将实现截然不同的曲线，从而使动画有截然不同的感觉。例如，如果第一个控制点在右下角，则动画在开头缓慢。如果它在左上角，动画在开头会显得很快。相反，如果第二控制点在网格的右下角，则动画在结尾处变快；而在左上角时，动画将在结尾处变慢。

为了对比，以下有两条曲线：一条典型的缓入缓出曲线和一条自定义曲线：

此自定义曲线的 CSS 为：

transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);

前两个数字是第一个控制点的 X 和 Y 坐标，后两个数字是第二个控制点的 X 和 Y 坐标。

制作自定义曲线很有趣，您可以有效控制对动画的感觉。以上述曲线为例，您可以看到曲线与经典的缓入缓出曲线相似，但缓入即“开始”部分缩短，而结尾减速部分拉长。