缓动的基础知识

了解如何缓和和加重您的动画。

Paul Lewis

自然界中没有东西是从一点呈线性地移动到另一点。现实中,物体在移动时往往会加速或减速。我们的大脑预料到这种运动,因此在制作动画时,应充分利用这一点。自然的运动会让用户对您的应用感觉更舒适,从而提升整体体验。

摘要

  • 缓动使您的动画感觉更自然。
  • 为界面元素选择缓出动画。
  • 避免缓入或缓入缓出动画,除非可以使其保持简短,否则会让最终用户感觉迟钝。

在经典动画中,缓慢开始然后加速的动作的术语是“慢进”,快速开始然后减速的动作的术语是“慢速”。在网络上,这三种操作最常用的术语分别是“缓入”和“缓出”。有时两种动画会合并,这称为“缓入缓出”。缓动实际上是降低动画的严谨性或发音的过程。

缓动关键字

CSS 过渡和动画都允许您选择要为动画使用的加/减速类型。您可以使用影响相关动画的加/减速(或有时称为 timing)的关键字。您还可以完全自定义加/减速选项,以便更自由地表达应用的个性。

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

  • linear
  • ease-in
  • ease-out
  • ease-in-out

来源:CSS 过渡,W3C

您还可以使用 steps 关键字,它允许您创建具有离散步骤的转场,但上面列出的关键字对于创建感觉自然的动画最有用。

线性动画

线性缓动动画的曲线。

没有任何缓动的动画称为线性动画。线性转换的图表如下所示:

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

无论您使用 CSS 还是 JavaScript 编写动画代码,都会发现始终有线性运动的选项。

查看线性动画

要通过 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;