动画缓动：缓入、缓出与曲线
缓动是指动画值在关键帧之间加速和减速的方式，而不是以恒定速度移动。缓动使运动平稳开始、平稳停止或两者兼有——就像有重量的物体实际移动那样——它由两个关键帧之间的插值曲线决定。
简短回答
缓动控制关键帧之间的加速度。线性运动以恒定速度移动并突然停止；缓动运动从一个关键帧加速离开，并减速进入下一个关键帧。由于工具对「ease in」的含义存在分歧，最清楚的说法是慢速开始（加速）或慢速结束（减速）。每个关键帧上的 bezier 手柄精确地塑造缓动，而拉过关键帧值的手柄会产生过冲效果。
为什么恒定速度看起来不自然
真实的物体具有质量。汽车不会在启动的瞬间达到巡航速度，门也不会在碰到门框时突然停止。以全速开始和停止的运动看起来机械、失重或像是电脑生成，即使观众说不出具体原因。
Disney 的动画师将此原理命名为「慢入慢出」——这是《The Illusion of Life》中提出的十二项动画原理之一。在运动的开始和结束时绘制更多帧，中间绘制更少帧，使其加速和减速。在 3D 软件中，相同的效果来自关键帧之间的曲线，而不是额外的绘图。
缓入和缓出的含义相反
这是最常见的混淆来源，这不是你的错。在 CSS 和 Robert Penner 广泛复制的缓动函数中，「ease-in」意味着运动缓慢开始并加速，「ease-out」意味着运动快速开始并减速停止。曲线属于两个关键帧之间的整个运动。
在 After Effects 和许多基于关键帧的工具中，缓动属于关键帧：缓入关键帧意味着运动到达时减速，缓出关键帧意味着运动离开时缓慢开始。因此，After Effects 中最后一个关键帧的「缓入」和 CSS 中整个运动的「缓出」在名称相反的情况下产生相同的减速效果。描述运动——慢速开始、慢速结束、两端都慢——可以避免歧义。
插值类型与 bezier 手柄
线性插值在关键帧之间绘制一条直线：速度恒定，并在每个关键帧处突然变化。恒定、阶梯式或保持插值会保持值直到下一个关键帧，然后跳跃，这对于阻挡、眨眼和任何需要「骤变」的效果都很有用。Bezier 或样条插值在关键帧之间绘制一条平滑曲线，缓动就存在于此。
一个 bezier 关键帧有两个手柄，一个控制曲线到达关键帧时的形状，另一个控制曲线离开关键帧时的形状。平坦的手柄意味着关键帧处的速度为零——即缓动。更长的手柄会使这种缓慢持续更长时间。对齐的手柄使曲线平滑地通过关键帧；分离的手柄会产生方向的急剧变化，例如弹跳。拉动手柄使曲线超出关键帧的值，运动就会越过其目标并回弹。
标准缓动曲线系列
Penner 的缓动方程于 21 世纪初发布，成为命名曲线的通用词汇：sine、quad、cubic、quart、quint、expo 和 circ，每种都有 in、out 和 in-out 形式，效果从几乎不明显（sine）到剧烈（expo）。Back 在回弹前会超出其目标。大多数运动工具和 CSS 库都提供这些曲线的某种版本，通常近似为 cubic bezier 曲线。
Elastic 和 bounce 是例外。它们在一次运动中会多次振荡，这是单个 cubic bezier 曲线无法实现的，因此工具要么通过多个关键帧构建它们，要么通过程序生成。
何时使用何种缓动
对于大多数有开始和停止的运动，两端都使用缓动：例如摄像机推拉、物体滑入到位、头部转动。对于到达并稳定的事物，使用慢速结束；对于启动的事物，使用慢速开始。对于旨在保持恒定的运动——例如旋转的风扇、传送带、循环周期的中间部分——以及运动应该直接通过的关键帧，保持线性。对于骤变、眨眼和阻挡，使用保持。
Mixos Studio 中的缓动
选择一个关键帧，时间轴标题会提供 Linear、Ease in、Ease out、Ease 和 Hold。它们遵循基于关键帧的约定：「Ease in」使运动到达关键帧时减速，「Ease out」使运动离开关键帧时减速，「Ease」则两者兼顾——即 After Effects 的 Easy Ease。当时间轴处于焦点时，F9 应用 Ease，⇧F9 应用 Ease in，⌘⇧F9 应用 Ease out。
「曲线…」会打开 Penner 的曲线系列，从 Sine 到 Back，可以通过感觉和名称进行搜索，以及任何你已保存的曲线。曲线模式将轨迹绘制为带有 bezier 手柄的曲线，你可以直接拖动，包括过冲效果。Elastic 和 bounce 故意不在曲线列表中；「+ Motion」下的弹簧和弹跳生成器会产生那种运动。
常见问题
ease in 和 ease out 是什么意思？
两者都描述了速度的渐变，但工具使用它们的含义却相反。在 CSS 和 Penner 函数中，ease-in 表示缓慢开始，ease-out 表示缓慢结束。而在 After Effects 和其他基于关键帧的工具中，easing into a key 意味着运动在到达关键帧时减速，easing out of a key 则意味着运动在离开关键帧时减速。
线性插值和贝塞尔插值有什么区别？
线性插值以恒定速度移动数值，并在每个关键帧处突然变化。贝塞尔插值则通过关键帧绘制一条平滑曲线，带有控制运动加速和减速的句柄，这使得缓动效果成为可能。
什么是保持关键帧？
具有恒定（阶梯式）插值的关键帧：数值保持不变，直到下一个关键帧才突然跳变。它常用于动画的粗略布局、眨眼、剪切以及任何需要瞬间切换而非平滑过渡的场景。
如何让动画产生「过冲」效果？
可以通过在目标关键帧之后添加一个关键帧，并在其后添加一个回弹关键帧来实现；或者拉动 bezier 曲线手柄，使曲线超出关键帧的值再返回。回弹式缓动曲线与预设效果相同。
为什么我的动画看起来很生硬？
通常是因为动画是线性的：速度恒定，在每个关键帧处突然开始和停止。通过缓动开始和停止，并将运动的某些部分错开几帧，使其不会同时移动，可以解决大部分问题。
设定一个动作的关键帧，然后在相同的两个关键帧上尝试 Linear、Ease 和 Back 缓动效果——其差异比描述更容易直观感受。