在短时间内制作「流（liú）畅感（gǎn）」动画
动（dòng）效（Motion）是大家非常熟（shú）悉的交互界面要素，每天浏览的大量界面中都（dōu）包含着各种（zhǒng）各（gè）样的动效设计，相信很多设计师也（yě）都接（jiē）触过或设计过各种（zhǒng）各样（yàng）的（de）动效。作者通（tōng）过这篇文章，带我们了解动效设计背后的原理，从关键（jiàn）帧、属性（xìng）和值（zhí）待基（jī）础关键（jiàn）词（cí）开始，深入浅出地讲解了插值（zhí）及其带来的各种流（liú）畅舒适的缓动效（xiào）果（guǒ），以及如何通过修改和组合不同预设来设计（jì）一个有创意（yì）的动效，并在（zài）最后为我们提（tí）供了很多有价值的素材，相信这篇文章对大家会有所启发和帮助。
01动效概述
尽管网上有大（dà）量的动效设计素材，但是我并没有看到能够清（qīng）晰地介绍 “插值（zhí）” 的相（xiàng）关资料，而这正是重（chóng）庆（qìng）动画公司（sī）实现 UI 动（dòng）效设计最（zuì）核心的（de）理（lǐ）论 。
与其在黑暗中摸索，我（wǒ）决定写一篇文（wén）章，详（xiáng）细介绍（shào）那些基于时间（jiān）轴的（de）动画程序的（de）背后逻辑，例如 After Effects、Principle、Flinto 等（děng）等。
我相信，对于如（rú）今的任何一个产品（pǐn）设（shè）计师来说，学（xué）习动效设计都是有价值的。动效使我们能（néng）够清（qīng）楚地（dì）呈现微交互，注入愉悦（yuè）感，并在设计中创造微妙的示能。
想要理解插值，我们需要理解它与传统（tǒng） “逐帧” 动画（huà）的区别。例如，过（guò）去的迪士（shì）尼（ní）动画（huà）和 2D 电子游戏（xì）精灵（Sprite）都（dōu）是典（diǎn）型的逐帧（zhēn）绘（huì）制的作品。
为小球反弹设置逐帧（zhēn）动（dòng）画的（de）示例（来源未知（zhī））
这些动画（huà）通常是手绘（huì）之（zhī）后逐帧动起来的（de），类似于重庆动画制作的（de）翻页书。资（zī）历（lì）较深的画师（shī）会先绘（huì）制出最重要的姿态，称为“关键帧”，然后由资（zī）历较浅的画师补（bǔ）充“中间帧”，以（yǐ）创造平滑动画。你肯定能够（gòu）想象到，这是一个（gè）非常枯燥的过程（chéng）。
我们（men）是幸运的。随着（zhe）现代科（kē）技的发展，我们不再需（xū）要单独绘（huì）制每一帧。你能（néng）想象这是（shì）多大的工作量吗？如（rú）今我们可以利用前面（miàn）提到的软件中的插值技（jì）术来完成这（zhè）项工作（zuò）。
插值技术使电脑可以取代动画（huà）师的工作。换句（jù）话说，可以帮助我们在关键帧之间插入中间帧。
UI动效插值（zhí）示例，源（yuán）自：Dribbble
在我们（men）理（lǐ）解（jiě）插值之前，首先需要了（le）解一些基础概念。
02关键帧（zhēn）
两点之间的间距和时序
关键帧用（yòng）于标记开始帧和结束帧的样子，以及它们何时出现在（zài）动（dòng）画过渡中。你（nǐ）至少需要设（shè）置两个关（guān）键帧。然而在更复杂的重庆动画制作中，你（nǐ）会需要（yào）添加更多关键帧。
我们（men）可（kě）以按以下方式写出（chū）关键（jiàn）帧（zhēn）：
关（guān）键帧 1: 位置 x = 0, 0ms
关键（jiàn）帧 2: 位（wèi）置（zhì） x = 500, 100ms
这意味（wèi）着如果（guǒ）我们设置了这两个关键帧，动（dòng）画呈（chéng）现的便是蓝色方块在 100毫秒 的时间内从左（x=0）移动到（dào）右（yòu）（x=500）。
一般（bān）来（lái）说，为了使用户注意到这种过渡（dù），UI 和重庆3D动画中的时间间隔应该足够（gòu）长，但是也不能长到要让用户等待。
