slow-in-out-mastery

缓入 / 缓出精要

物理原理

现实世界中的物体不会以恒定速度移动——它们会从静止开始加速，并在停止时减速。缓入 / 缓出（也称为渐入 / 渐出）体现了这一基本规律。没有它，动画看起来会很机械；有了它，运动才会显得鲜活。

核心理论

缓出（渐出）：在动作开始阶段安排更多帧。物体会从起始位置逐渐加速离开。

缓入（渐入）：在动作结束阶段安排更多帧。物体会逐渐减速，平稳到达最终位置。

线性运动：各位置之间的间距相等。这种运动在自然界中并不常见，但适用于机械元素或特定风格。

间距原理

传统动画师通过控制绘制间距来实现这一效果：

• 间距紧密 = 运动缓慢（绘制的帧彼此靠近）
• 间距宽阔 = 运动快速（绘制的帧彼此相距较远）

数字动画师则通过缓动曲线来控制——这种数学函数描述数值如何随时间变化。

常见缓动函数

• 缓出：开始快，结束慢（70% 的 UI 动画）
• 缓入：开始慢，结束快（退出、离场）
• 缓入缓出：开始和结束都慢（优雅、从容）
• 线性：速率恒定（机械、循环）
• 自定义贝塞尔曲线：精确控制特定的感觉

与其他原理的配合

缓动会改变时长带来的感觉：时长相同，缓动方式不同，感觉也不同。在时长相同的情况下，缓出比缓入感觉更快。

预备动作通常使用缓入：快速动作开始前，蓄力过程会逐渐加速。

跟随动作使用缓出：收尾动作会逐渐减速，直至静止。

挤压 / 拉伸的强度会随缓动变化：快速阶段形变更明显，缓慢阶段形变较轻。

应用场景

UI / 动效设计

• 页面转场：入场使用缓出（快速出现，平稳落位），退出使用缓入
• 模态框：缩放弹出时使用缓出，呈现友好且不突兀的效果
• 按钮：按下反馈使用缓出（立即响应，平滑收尾）
• 加载：进度条使用线性（可预测），旋转指示器使用缓动（更自然）
• 悬停状态：开始时快速缓出，再以缓入缓出实现平滑的感觉

角色动画

• 跳跃：离地时缓出（加速），到达最高点时缓入（减速），中段快速移动
• 转头：从静止开始缓出，转向新方向时缓入
• 眨眼：向下快速闭合（接近线性），向上缓慢张开（眼睑带动）
• 重心转移：厚重的缓动能体现质量感

动态图形

• 文字显现：错开使用缓出，营造依次呈现的效果
• Logo 动画：精心设计的曲线能够塑造品牌个性
• 数据可视化：增长时使用缓出，下降时使用缓入

游戏手感

• 镜头运动：电影感运动使用缓入缓出，响应迅速的运动使用快速缓出
• 角色控制：缓动曲线决定运动感觉是“紧凑”还是“飘浮”
• 冲击效果：急促的缓入能制造冲击感

常见错误

1. 所有动画都用线性：运动显得机械而生硬
2. 缓动过多：过于柔和的运动会显得迟缓、响应不灵敏
3. 缓动方向错误：入场使用缓入会显得迟疑；退出使用缓出会让元素看起来不愿离开
4. 忽视情境：活泼的 UI 需要更有弹性的曲线；专业的 UI 则需要更含蓄的缓动

弹跳和弹性扩展

除基础缓动外，还有：

• 弹跳：超出目标后振荡幅度逐渐减小（活泼、有活力）
• 弹性：超出目标后摇晃（有弹性、卡通化）
• 回拉：运动开始前略微后退（增加预备感）

80/20 法则

大多数 UI 工作中：80% 的动画使用缓出（用于响应用户操作的元素）。缓出能传达响应感——“我听到了，正在行动。”缓入则留给离场和弱化强调的场景。

实现启发式

元素出现和响应默认采用缓出（快速开始，缓慢结束）。退出时采用缓入。自动动画（非由用户触发）采用缓入缓出。根据品牌个性调整曲线强度：动感品牌采用更强烈的曲线，沉稳品牌采用更柔和的曲线。