Slow In / Slow Out Mastery 是一份讲解动画缓动原理的技能资料，核心主题是“慢入慢出”（Slow In / Slow Out，也称 ease in / ease out）。
用途 该资料用于指导设计缓动曲线、控制运动节奏、创建自然的加速与减速，以及让运动在物理上显得扎实可信。它面向需要处理动画节奏的 UI/动效设计、角色动画、动态图形和游戏手感等场景。
核心理论 资料指出，现实世界中的物体不会匀速运动，而是从静止加速、再减速停止。慢入慢出正是对这一基本事实的捕捉：没有它，动画看起来机械；有了它，运动才显得有生命。
- 慢出（Ease Out）：运动起始处聚集更多画面，物体从起始位置逐渐加速离开。
- 慢入（Ease In）：运动结束处聚集更多画面，物体逐渐减速进入最终位置。
- 线性运动：各位置间距相等。自然界罕见，适用于机械元素或作为风格化选择。
间距原理 传统动画师通过绘制间距控制缓动：间距紧表示运动慢（画面彼此靠近），间距宽表示运动快（画面彼此远离）。数字动画师则通过缓动曲线控制——即描述数值随时间变化的数学函数。
常见缓动函数
- Ease Out：快起慢停（约 70% 的 UI 动画使用）。
- Ease In：慢起快停（用于退出、离开）。
- Ease In Out：起止皆慢（优雅、从容）。
- Linear：恒定速率（机械、循环）。
- 自定义贝塞尔曲线：针对特定手感进行精确控制。
与其他原则的交互
- 时间受缓动影响：相同时长下，不同缓动感受不同；相同时长时，ease out 感觉比 ease in 更快。
- 预备动作常使用 ease in：蓄力在快速动作前加速。
- 跟随动作使用 ease out：收尾运动减速至静止。
- 挤压/拉伸强度跟随缓动：快速阶段形变更大，慢速阶段形变更小。
各领域应用 UI/动效设计：
- 页面转场：进入用 ease out（快速出现、稳定落定），退出用 ease in。
- 模态框：ease out 放大出现，友好、不突兀。
- 按钮：按下反馈用 ease out（即时响应、平滑落定）。
- 加载：进度条用线性（可预期），加载旋转器用缓动（有机感）。
- 悬停状态：快速 ease out 启动，ease in out 获得平滑手感。
角色动画：
- 跳跃：从地面慢出（加速），到顶点慢入（减速），中间快。
- 转头：从静止慢出，进入新方向慢入。
- 眨眼：向下快（近乎线性），向上慢出（眼睑拖拽）。
- 重心转移：沉重的缓动反映质量。
动态图形：
- 文字揭示：错开的 ease out 形成层叠到达。
- Logo 动画：精心设计的曲线定义品牌个性。
- 数据可视化：增长用 ease out，下降用 ease in。
游戏手感：
- 镜头运动：ease in out 营造电影感，快速 ease out 带来响应性。
- 角色控制：缓动曲线定义移动感觉“紧”还是“飘”。
- 冲击效果：锐利的 ease in 制造打击感。
常见错误
- 全部使用线性：运动显得机械、生硬。
- 缓动过度：过于柔软的运动显得迟缓、缺乏响应。
- 缓动方向错误：进入用 ease in 显得不情愿；退出用 ease out 显得元素不想离开。
- 忽略语境：活泼的 UI 需要更有弹性的曲线；专业的 UI 需要更微妙的缓动。
弹跳与弹性扩展 在基础缓动之外：
- Bounce：过冲并逐渐衰减的振荡（活泼、有能量）。
- Elastic：过冲并摇摆（有弹性、卡通感）。
- Back：运动前轻微回拉（增加预备感）。
80/20 法则 对大多数 UI 工作：80% 的动画使用 ease out（元素响应用户操作）。Ease out 传达响应性——“我听到了，我正在移动”。Ease in 保留给离开和弱化强调的场景。
实现启发式 元素出现和响应默认使用 ease out（快起慢停）；退出使用 ease in；自主动画（非用户触发）使用 ease in out。根据品牌个性调整曲线强度——动态品牌用激进曲线，平静品牌用微妙曲线。