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