universal-tool

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Universal Animation Principles

通用动画原则

Apply all 12 Disney animation principles regardless of your tool or framework.

无论使用何种工具或框架，均可应用迪士尼的12条动画原则。

1. Squash and Stretch

1. 挤压与拉伸（Squash and Stretch）

Concept: Objects deform when moving, maintaining volume.

Implementation:

When compressing one axis, expand the other
```
scaleX * scaleY ≈ constant
```
Apply on impact, acceleration, or deceleration

Values: Compress to 80%, expand to 120%

核心概念：物体运动时会发生形变，但保持体积不变。

实现方式：

压缩一个轴的同时，拉伸另一个轴
```
scaleX * scaleY ≈ 常数
```
在碰撞、加速或减速时应用

参考数值：压缩至80%，拉伸至120%

2. Anticipation

2. 预备动作（Anticipation）

Concept: Prepare the audience for an action.

Implementation:

Move opposite to the main action first
~20% of total duration for wind-up
Smaller anticipation for faster actions

Pattern: Wind-up → Action → Settle

核心概念：为观众预告即将发生的动作。

实现方式：

先向主动作的反方向移动
预备动作时长约占总时长的20%
动作越快，预备动作幅度越小

模式：预备 → 主动作 → 稳定

3. Staging

3. 舞台呈现（Staging）

Concept: Direct viewer attention to what matters.

Implementation:

Blur or fade background elements
Scale up the focal point
Use contrast (color, size, motion)
One clear action at a time

核心概念：引导观众注意力聚焦到关键内容上。

实现方式：

模糊或淡化背景元素
放大焦点元素
运用对比（颜色、尺寸、运动状态）
同一时间只呈现一个清晰动作

4. Straight Ahead / Pose to Pose

4. 逐帧动画/关键帧动画（Straight Ahead / Pose to Pose）

Straight Ahead: Animate frame-by-frame sequentially. Good for fluid, organic motion.

Pose to Pose: Define key poses, then fill in between. Good for precise, planned motion.

Recommendation: Use pose-to-pose for UI, straight ahead for particles/effects.

逐帧动画（Straight Ahead）：按顺序逐帧制作动画，适合流畅、自然的有机运动。

关键帧动画（Pose to Pose）：先定义关键姿态，再填充中间帧，适合精准、有规划的运动。

建议：UI动画使用关键帧动画，粒子/特效使用逐帧动画。

5. Follow Through and Overlapping Action

5. 跟随动作与重叠动作（Follow Through and Overlapping Action）

Concept: Different parts move at different rates.

Implementation:

Offset timing of child elements
Add 2-5 frame delay for secondary elements
Lighter/looser parts drag behind
Use easing with different curves per element

核心概念：物体不同部位的运动速率不同。

实现方式：

子元素的运动时间错开
次要元素延迟2-5帧
更轻/更灵活的部位滞后于主体
为不同元素设置不同的缓动曲线

6. Slow In and Slow Out

6. 慢入慢出（Slow In and Slow Out）

Concept: Natural motion accelerates and decelerates.

Implementation:

Use ease-in-out for most movements
Ease-out for entrances (arrives gently)
Ease-in for exits (leaves naturally)
Linear only for mechanical motion

Common curve:

cubic-bezier(0.42, 0, 0.58, 1)

核心概念：自然运动有加速和减速过程。

实现方式：

大多数运动使用ease-in-out缓动
入场使用ease-out（减速进入）
退场使用ease-in（加速离开）
仅机械运动使用线性缓动

常用曲线：

cubic-bezier(0.42, 0, 0.58, 1)

7. Arc

7. 弧线运动（Arc）

Concept: Natural movement follows curved paths.

Implementation:

Avoid straight-line motion for organic elements
Use motion paths or multi-point keyframes
Parabolic arcs for thrown objects
Pendulum arcs for swings

核心概念：自然运动遵循曲线路径。

实现方式：

有机元素避免直线运动
使用运动路径或多帧关键帧
投掷物体使用抛物线弧
摆动物体使用钟摆弧

8. Secondary Action

8. 次要动作（Secondary Action）

Concept: Supporting actions reinforce the main action.

Implementation:

Add subtle movements that complement primary
Examples: hair bounce, shadow movement, particle effects
Should not distract from main action
Slightly delayed from primary

核心概念：辅助动作强化主动作的表达。

实现方式：

添加与主动作互补的细微动作
示例：头发摆动、阴影移动、粒子特效
不能分散主动作的注意力
比主动作稍晚触发

9. Timing

9. 时间节奏（Timing）

Concept: Speed conveys weight, mood, and character.

Duration	Feel	Use Case
50-150ms	Snappy	Micro-interactions
150-300ms	Responsive	Button feedback
300-500ms	Smooth	Page transitions
500-800ms	Deliberate	Modal reveals
1000ms+	Dramatic	Hero animations

核心概念：速度传递重量、情绪和角色特质。

时长	感受	使用场景
50-150ms	明快	微交互
150-300ms	响应及时	按钮反馈
300-500ms	流畅	页面过渡
500-800ms	从容	模态框展示
1000ms+	富有戏剧性	核心区域动画

10. Exaggeration

10. 夸张表现（Exaggeration）

Concept: Push beyond realistic to enhance clarity.

Implementation:

Scale movements 20-50% beyond subtle
Overshoot then settle
More exaggeration = more cartoony
UI: subtle exaggeration (5-15% overshoot)

核心概念：突破写实限制，增强动作的清晰度。

实现方式：

将动作幅度在基础上放大20-50%
先过冲再回稳
夸张程度越高，风格越卡通化
UI场景：轻微夸张（5-15%的过冲）

11. Solid Drawing

11. 扎实绘制（Solid Drawing）

Concept: Maintain volume and weight in 3D space.

Implementation:

Consider all three dimensions
Maintain consistent perspective
Preserve volume during transformations
Use shadows to ground elements

核心概念：在3D空间中保持物体的体积和重量感。

实现方式：

考虑三个维度的空间关系
保持一致的透视角度
变换过程中保留体积感
使用阴影让元素更贴合场景

12. Appeal

12. 吸引力（Appeal）

Concept: Make it pleasing and engaging.

Implementation:

Smooth curves over sharp angles
Consistent timing patterns
Clear visual feedback
Satisfying interaction responses
Balance between predictable and delightful

核心概念：让动画美观且富有吸引力。

实现方式：

多用平滑曲线，少用尖锐角度
保持一致的时间节奏模式
提供清晰的视觉反馈
交互反馈要令人愉悦
在可预测性与惊喜感之间取得平衡

Universal Timing Reference

通用时间参考

Micro-interaction: 100-200ms
Standard feedback: 200-300ms
Content transition: 300-400ms
Page transition: 400-600ms

Micro-interaction: 100-200ms
Standard feedback: 200-300ms
Content transition: 300-400ms
Page transition: 400-600ms

Universal Easing Reference

通用缓动参考

Enter screen: ease-out (decelerate)
Leave screen: ease-in (accelerate)
On-screen movement: ease-in-out
Bounce/overshoot: spring physics or elastic

Enter screen: ease-out (decelerate)
Leave screen: ease-in (accelerate)
On-screen movement: ease-in-out
Bounce/overshoot: spring physics or elastic

universal-tool

Original

Translation

Universal Animation Principles

通用动画原则

1. Squash and Stretch

1. 挤压与拉伸（Squash and Stretch）

2. Anticipation

2. 预备动作（Anticipation）

3. Staging

3. 舞台呈现（Staging）

4. Straight Ahead / Pose to Pose

4. 逐帧动画/关键帧动画（Straight Ahead / Pose to Pose）

5. Follow Through and Overlapping Action

5. 跟随动作与重叠动作（Follow Through and Overlapping Action）

6. Slow In and Slow Out

6. 慢入慢出（Slow In and Slow Out）

7. Arc

7. 弧线运动（Arc）

8. Secondary Action

8. 次要动作（Secondary Action）

9. Timing

9. 时间节奏（Timing）

10. Exaggeration

10. 夸张表现（Exaggeration）

11. Solid Drawing

11. 扎实绘制（Solid Drawing）

12. Appeal

12. 吸引力（Appeal）

Universal Timing Reference

通用时间参考

Universal Easing Reference

通用缓动参考

Checklist

检查清单