12-principles-of-animation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

12 Principles of Animation

动画的12条原则

Review animation code for compliance with Disney's 12 principles adapted for web interfaces.

对照适配网页界面的迪士尼12条动画原则，审核动画代码的合规性。

How It Works

工作原理

Read the specified files (or prompt user for files/pattern)
Check against all rules below
Output findings in
```
file:line
```
format

读取指定文件（或提示用户输入文件/匹配模式）
对照以下所有规则进行检查
以
```
file:line
```
格式输出检查结果

Rule Categories

规则分类

Priority	Category	Prefix
1	Timing	`timing-`
2	Easing	`easing-`
3	Physics	`physics-`
4	Staging	`staging-`

优先级	分类	前缀
1	时长控制	`timing-`
2	缓动效果	`easing-`
3	物理动效	`physics-`
4	视觉呈现	`staging-`

Rules

规则详情

Timing Rules

时长控制规则

timing-under-300ms

timing-under-300ms

User-initiated animations must complete within 300ms.

Fail:

css

.button { transition: transform 400ms; }

Pass:

css

.button { transition: transform 200ms; }

用户触发的动画必须在300ms内完成。

不通过示例：

css

.button { transition: transform 400ms; }

通过示例：

css

.button { transition: transform 200ms; }

timing-consistent

timing-consistent

Similar elements must use identical timing values.

Fail:

css

.button-primary { transition: 200ms; }
.button-secondary { transition: 150ms; }

Pass:

css

.button-primary { transition: 200ms; }
.button-secondary { transition: 200ms; }

同类元素必须使用完全一致的时长数值。

不通过示例：

css

.button-primary { transition: 200ms; }
.button-secondary { transition: 150ms; }

通过示例：

css

.button-primary { transition: 200ms; }
.button-secondary { transition: 200ms; }

timing-no-entrance-context-menu

timing-no-entrance-context-menu

Context menus should not animate on entrance (exit only).

Fail:

tsx

<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />

Pass:

tsx

<motion.div exit={{ opacity: 0 }} />

上下文菜单不应设置入场动画（仅需设置退场动画）。

不通过示例：

tsx

<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />

通过示例：

tsx

<motion.div exit={{ opacity: 0 }} />

Easing Rules

缓动效果规则

easing-entrance-ease-out

easing-entrance-ease-out

Entrances must use

ease-out

(arrive fast, settle gently).

Fail:

css

.modal-enter { animation-timing-function: ease-in; }

Pass:

css

.modal-enter { animation-timing-function: ease-out; }

入场动画必须使用

ease-out

（快速进入，平缓收尾）。

不通过示例：

css

.modal-enter { animation-timing-function: ease-in; }

通过示例：

css

.modal-enter { animation-timing-function: ease-out; }

easing-exit-ease-in

easing-exit-ease-in

Exits must use

ease-in

(build momentum before departure).

Fail:

css

.modal-exit { animation-timing-function: ease-out; }

Pass:

css

.modal-exit { animation-timing-function: ease-in; }

退场动画必须使用

ease-in

（先积累动量，再离开）。

不通过示例：

css

.modal-exit { animation-timing-function: ease-out; }

通过示例：

css

.modal-exit { animation-timing-function: ease-in; }

easing-no-linear-motion

easing-no-linear-motion

Linear easing should only be used for progress indicators, not motion.

Fail:

css

.card { transition: transform 200ms linear; }

Pass:

css

.progress-bar { transition: width 100ms linear; }

线性缓动仅可用于进度指示器，不可用于常规动效。

不通过示例：

css

.card { transition: transform 200ms linear; }

通过示例：

css

.progress-bar { transition: width 100ms linear; }

easing-natural-decay

easing-natural-decay

Use exponential ramps, not linear, for natural decay.

Fail:

gain.gain.linearRampToValueAtTime(0, t + 0.05);

Pass:

gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);

模拟自然衰减效果时，应使用指数曲线而非线性曲线。

不通过示例：

gain.gain.linearRampToValueAtTime(0, t + 0.05);

通过示例：

gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);

Physics Rules

物理动效规则

physics-active-state

physics-active-state

Interactive elements must have active/pressed state with scale transform.

Fail:

css

.button:hover { background: var(--gray-3); }
/* Missing :active state */

Pass:

css

.button:active { transform: scale(0.98); }

交互元素必须包含激活/按压状态的缩放变换。

不通过示例：

css

.button:hover { background: var(--gray-3); }
/* 缺少:active状态 */

通过示例：

css

.button:active { transform: scale(0.98); }

physics-subtle-deformation

physics-subtle-deformation

Squash/stretch deformation must be subtle (0.95-1.05 range).

Fail:

tsx

<motion.div whileTap={{ scale: 0.8 }} />

Pass:

tsx

<motion.div whileTap={{ scale: 0.98 }} />

挤压/拉伸变形必须保持细微（缩放范围0.95-1.05）。

不通过示例：

tsx

<motion.div whileTap={{ scale: 0.8 }} />

通过示例：

tsx

<motion.div whileTap={{ scale: 0.98 }} />

physics-spring-for-overshoot

physics-spring-for-overshoot

Use springs (not easing) when overshoot-and-settle is needed.

Fail:

tsx

<motion.div transition={{ duration: 0.3, ease: "easeOut" }} />
// When element should bounce/settle

Pass:

tsx

<motion.div transition={{ type: "spring", stiffness: 500, damping: 30 }} />

当需要回弹-收尾效果时，应使用弹簧动效（而非缓动曲线）。

不通过示例：

tsx

<motion.div transition={{ duration: 0.3, ease: "easeOut" }} />
// 当元素需要回弹-收尾效果时

通过示例：

tsx

<motion.div transition={{ type: "spring", stiffness: 500, damping: 30 }} />

physics-no-excessive-stagger

physics-no-excessive-stagger

Stagger delays must not exceed 50ms per item.

Fail:

tsx

transition={{ staggerChildren: 0.15 }}

Pass:

tsx

transition={{ staggerChildren: 0.03 }}

序列动画的延迟间隔不得超过每元素50ms。

不通过示例：

tsx

transition={{ staggerChildren: 0.15 }}

通过示例：

tsx

transition={{ staggerChildren: 0.03 }}

Staging Rules

视觉呈现规则

staging-one-focal-point

staging-one-focal-point

Only one element should animate prominently at a time.

Fail:

tsx

// Multiple elements with competing entrance animations
<motion.div animate={{ scale: 1.1 }} />
<motion.div animate={{ scale: 1.1 }} />

同一时间仅应有一个元素突出显示动画效果。

不通过示例：

tsx

// 多个元素同时使用竞争性入场动画
<motion.div animate={{ scale: 1.1 }} />
<motion.div animate={{ scale: 1.1 }} />

staging-dim-background

staging-dim-background

Modal/dialog backgrounds should dim to direct focus.

Fail:

css

.overlay { background: transparent; }

Pass:

css

.overlay { background: var(--black-a6); }

模态框/对话框的背景应添加暗化效果以引导焦点。

不通过示例：

css

.overlay { background: transparent; }

通过示例：

css

.overlay { background: var(--black-a6); }

staging-z-index-hierarchy

staging-z-index-hierarchy

Animated elements must respect z-index layering.

Fail:

css

.tooltip { /* No z-index, may render behind other elements */ }

Pass:

css

.tooltip { z-index: 50; }

带动画的元素必须遵循z-index层级规则。

不通过示例：

css

.tooltip { /* 未设置z-index，可能被其他元素遮挡 */ }

通过示例：

css

.tooltip { z-index: 50; }

Output Format

输出格式

When reviewing files, output findings as:

file:line - [rule-id] description of issue

Example:
components/modal/index.tsx:45 - [timing-under-300ms] Exit animation 400ms exceeds 300ms limit
components/button/styles.module.css:12 - [physics-active-state] Missing :active transform

审核文件时，输出格式如下：

file:line - [规则ID] 问题描述

示例：
components/modal/index.tsx:45 - [timing-under-300ms] 退场动画400ms超出300ms限制
components/button/styles.module.css:12 - [physics-active-state] 缺少:active状态变换

Summary Table

汇总表格

After findings, output a summary:

Rule	Count	Severity
`timing-under-300ms`	2	HIGH
`physics-active-state`	3	MEDIUM
`easing-entrance-ease-out`	1	MEDIUM

输出检查结果后，需附带汇总表：

规则	数量	严重程度
`timing-under-300ms`	2	高
`physics-active-state`	3	中
`easing-entrance-ease-out`	1	中

12-principles-of-animation

Original

Translation

12 Principles of Animation

动画的12条原则

How It Works

工作原理

Rule Categories

规则分类

Rules

规则详情

Timing Rules

时长控制规则

timing-under-300ms

timing-under-300ms

timing-consistent

timing-consistent

timing-no-entrance-context-menu

timing-no-entrance-context-menu

Easing Rules

缓动效果规则

easing-entrance-ease-out

easing-entrance-ease-out

easing-exit-ease-in

easing-exit-ease-in

easing-no-linear-motion

easing-no-linear-motion

easing-natural-decay

easing-natural-decay

Physics Rules

物理动效规则

physics-active-state

physics-active-state

physics-subtle-deformation

physics-subtle-deformation

physics-spring-for-overshoot

physics-spring-for-overshoot

physics-no-excessive-stagger

physics-no-excessive-stagger

Staging Rules

视觉呈现规则

staging-one-focal-point

staging-one-focal-point

staging-dim-background

staging-dim-background

staging-z-index-hierarchy

staging-z-index-hierarchy

Output Format

输出格式

Summary Table

汇总表格

References

参考资料

`timing-under-300ms`

`timing-under-300ms`

`timing-consistent`

`timing-consistent`

`timing-no-entrance-context-menu`

`timing-no-entrance-context-menu`

`easing-entrance-ease-out`

`easing-entrance-ease-out`

`easing-exit-ease-in`

`easing-exit-ease-in`

`easing-no-linear-motion`

`easing-no-linear-motion`

`easing-natural-decay`

`easing-natural-decay`

`physics-active-state`

`physics-active-state`

`physics-subtle-deformation`

`physics-subtle-deformation`

`physics-spring-for-overshoot`

`physics-spring-for-overshoot`

`physics-no-excessive-stagger`

`physics-no-excessive-stagger`

`staging-one-focal-point`

`staging-one-focal-point`

`staging-dim-background`

`staging-dim-background`

`staging-z-index-hierarchy`

`staging-z-index-hierarchy`