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