12-principles-of-animation
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
Chinese12 Principles of Animation
12条动画原则
Review animation code for compliance with Disney's 12 principles adapted for web interfaces.
根据适配Web界面的迪士尼12条动画原则，审查动画代码是否符合规范。
How It Works
工作流程
- Read the specified files (or prompt user for files/pattern)
- Check against all rules below
- Output findings in format
file:line
- 读取指定文件（或提示用户输入文件/匹配模式）
- 对照以下所有规则进行检查
- 以格式输出检查结果
文件:行号
Rule Categories
规则分类
| Priority | Category | Prefix |
|---|---|---|
| 1 | Timing | |
| 2 | Easing | |
| 3 | Physics | |
| 4 | Staging | |
| 优先级 | 分类 | 前缀 |
|---|---|---|
| 1 | 时长控制 | |
| 2 | 缓动效果 | |
| 3 | 物理特性 | |
| 4 | 视觉呈现 | |
Rules
具体规则
Timing Rules
时长控制规则
timing-under-300ms
timing-under-300mstiming-under-300ms
timing-under-300msUser-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-consistenttiming-consistent
timing-consistentSimilar 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-menutiming-no-entrance-context-menu
timing-no-entrance-context-menuContext 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-outeasing-entrance-ease-out
easing-entrance-ease-outEntrances must use (arrive fast, settle gently).
ease-outFail:
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-ineasing-exit-ease-in
easing-exit-ease-inExits must use (build momentum before departure).
ease-inFail:
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-motioneasing-no-linear-motion
easing-no-linear-motionLinear 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-decayeasing-natural-decay
easing-natural-decayUse exponential ramps, not linear, for natural decay.
Fail:
ts
gain.gain.linearRampToValueAtTime(0, t + 0.05);Pass:
ts
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);自然衰减效果需使用指数曲线，而非线性曲线。
不通过示例：
ts
gain.gain.linearRampToValueAtTime(0, t + 0.05);通过示例：
ts
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);Physics Rules
物理特性规则
physics-active-state
physics-active-statephysics-active-state
physics-active-stateInteractive 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-deformationphysics-subtle-deformation
physics-subtle-deformationSquash/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-overshootphysics-spring-for-overshoot
physics-spring-for-overshootUse springs (not easing) when overshoot-and-settle is needed.
Fail:
tsx
<motion.div transition={{ duration: 0.3, ease: "easeOut" }} />
// When element should bounce/settlePass:
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-staggerphysics-no-excessive-stagger
physics-no-excessive-staggerStagger 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-pointstaging-one-focal-point
staging-one-focal-pointOnly 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-backgroundstaging-dim-background
staging-dim-backgroundModal/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-hierarchystaging-z-index-hierarchy
staging-z-index-hierarchyAnimated 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 |
|---|---|---|
| 2 | HIGH |
| 3 | MEDIUM |
| 1 | MEDIUM |
输出检查结果后，需提供汇总表：
| 规则 | 数量 | 严重程度 |
|---|---|---|
| 2 | HIGH |
| 3 | MEDIUM |
| 1 | MEDIUM |