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