animation-basics
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
Chinese12 Principles of Animation
动画12原则
1. Squash and Stretch
1. 挤压与拉伸
Stretch in the area of more movement, squash on collision. Always conserve area — if you stretch one axis, compress the other.
运动幅度大的区域拉伸，碰撞时挤压。始终保持面积守恒——拉伸一个轴的同时，压缩另一个轴。
2. Anticipation
2. 预备动作
Build up energy before action, like a spring loading. Can be combined with squash and stretch.
动作前积蓄能量，就像弹簧蓄力。可与挤压和拉伸结合使用。
3. Staging
3. 舞台呈现
- Avoid competing for stage presence — one action at a time draws focus.
- Use the Camera to zoom into interesting areas.
- Insert pauses to let the viewer process information.
- Let text remain on screen long enough to read (up to 3x the time it takes to read aloud).
- 避免争夺视觉焦点——一次只展示一个动作，吸引注意力。
- 利用镜头放大到有趣的区域。
- 插入停顿，让观众消化信息。
- 文字在屏幕上停留的时间要足够阅读（最多为朗读时间的3倍）。
4. Follow Through and Overlapping Action
4. 跟随动作与重叠动作
Drag adds realism. The main body leads; appendages follow with delay. This communicates mass. Use different timing functions for leading vs trailing parts. Skew can sell the effect.
拖拽效果增加真实感。主体先行，附属部件延迟跟随。这能传达物体的质量。主体和跟随部分使用不同的时间函数。倾斜效果可增强表现力。
5. Slow In and Slow Out
5. 慢入慢出
Essential for realism. Objects ease into and out of motion. Exception: collisions — ease only on the outward motion, not at impact. When motion is very fast, no inbetween frames may be needed — perfect for swapping icons or SVGs at the midpoint.
是实现真实感的关键。物体在开始和结束运动时做缓动处理。例外情况：碰撞——仅在向外运动时缓动，碰撞瞬间不缓动。当运动速度极快时，可能不需要中间帧——非常适合在运动中点切换图标或SVG。
6. Arc
6. 弧线运动
Move in arcs instead of straight lines when appropriate, especially when gravity is involved.
在合适的情况下沿弧线运动，而非直线，尤其是涉及重力的场景。
7. Secondary Action
7. 次要动作
Supplementary actions that support the main action. Example: a background element pulsing while the foreground element transitions.
辅助主动作的补充动作。例如：前景元素过渡时，背景元素同步脉动。
8. Exaggeration
8. 夸张表现
Not more distorted — more convincing. Quick motions need bigger exaggeration to be noticed at all.
不是更扭曲，而是更具说服力。快速动作需要更大幅度的夸张才能被注意到。
9. Solid Drawing
9. 扎实造型
Avoid parallel lines for a more natural, dynamic look. Exception: graphs and data visualizations where parallel structure is intentional.
避免平行线条，以获得更自然、动态的视觉效果。例外情况：图表和数据可视化，其中平行结构是有意设计的。
10. Appeal
10. 吸引力
Keep it simple. Do not add too many details. Clarity and readability beat complexity.
保持简洁。不要添加过多细节。清晰度和可读性胜过复杂性。
Timing Guidance
时间控制指南
- Prefer ease-in-out-cubic curves for most animations — natural acceleration and deceleration.
- A quick ease-in-out animation lets you swap icons or SVGs at the 50% mark — the fastest point of movement where the change is least noticeable.
- Use arc-based interpolation for movements that should follow a curved path, especially with gravity.
- 大多数动画优先选择ease-in-out-cubic曲线——自然的加速和减速。
- 快速的ease-in-out动画可在50%进度点切换图标或SVG——这是运动速度最快的时刻，变化最不易被察觉。
- 对于应沿曲线路径运动的场景，尤其是涉及重力的情况，使用基于弧线的插值方式。