animation-basics

动画的 12 条原则

1. 挤压与拉伸

在运动幅度较大的区域进行拉伸，碰撞时进行挤压。始终保持面积不变——如果拉伸一个轴，就压缩另一个轴。

2. 预备动作

在动作开始前积蓄能量，就像给弹簧蓄力。可以与挤压和拉伸结合使用。

3. 演出布局

• 避免多个元素争抢画面焦点——一次只突出一个动作。
• 使用 Camera 缩放到有趣的区域。
• 插入停顿，让观众有时间处理信息。
• 让文字在屏幕上停留足够长的时间，以便读完（最长可达朗读所需时间的 3 倍）。

4. 连续动作与关键姿势

关键姿势：定义关键状态（开始、结束，以及几个中间停顿），让补间填补空隙。这是代码驱动运动的默认方式：每个 yield* 都是一个姿势。对于粒子、液体或彩纸等有机或混乱的运动，使用连续的逐帧运动（物理模拟、程序化噪声、弹簧）。

5. 跟随动作与重叠动作

拖曳能增添真实感。主体先动，附属部分延迟跟随。这能体现质量。为先动部分和滞后部分使用不同的缓动函数。倾斜也能增强这种效果。

6. 慢入与慢出

这是实现真实感的关键。物体开始和结束运动时都应缓动。例外：碰撞时，只在向外运动时缓动，冲击瞬间不缓动。运动非常快时，可能无需中间帧——这非常适合在中点切换图标或 SVG。

7. 弧线运动

适当时沿弧线而非直线运动，尤其是在涉及重力时。

8. 次要动作

辅助动作，用于衬托主要动作。例如：前景元素变换时，背景元素同时脉动。

9. 节奏

时长和间距决定重量感与情绪。重物启动和停止都需要更长时间；轻物则动作利落。快速节奏显得有活力，慢速节奏显得平静或沉重。重要姿势应保持足够长的时间，以便观众感知。具体时长请参阅下方的节奏指南。

10. 夸张

不是让形态更加扭曲，而是让效果更可信。快速动作需要更大幅度的夸张，才能让人注意到。

11. 扎实的绘制

避免使用平行线，以营造更自然、更有动感的效果。例外：图表和数据可视化中，平行结构可能是有意为之。

12. 吸引力

保持简洁。不要添加过多细节。清晰易读胜过复杂。

---

节奏指南

根据动画的作用选择缓动方式：

作用	缓动	时长
入场（元素出现）	缓出（easeOutCubic）	0.3–0.5s
退场（元素离开）	缓入（easeInCubic）	0.2–0.3s
原位变化（移动、调整大小、颜色变化）	缓入缓出（easeInOutCubic）	0.3–0.8s
强调（脉动、弹出）	带回弹的缓出（easeOutBack）	0.2–0.3s
成组项目之间的错开	—	每个单词 40–80ms，每个元素 100–150ms

• 入场时不要只对不透明度做动画：应与变换结合使用（上升、缩放或遮罩显现）。入场动画不应超过约 0.8s。
• 快速的缓入缓出动画可以在 50% 处切换图标或 SVG——此时运动速度最快，变化最不易察觉。
• 对于应沿曲线路径运动的动作，使用基于弧线的插值，尤其是在涉及重力时。