12-principles-of-animation

动画的 12 条原则

检查动画代码是否符合迪士尼的 12 条原则（已针对 Web 界面调整）。

工作方式

1. 读取指定文件（或提示用户提供文件／模式）
2. 根据以下所有规则进行检查
3. 按 file:line 格式输出检查结果

规则类别

优先级	类别	前缀
1	时间	timing-
2	缓动	easing-
3	物理效果	physics-
4	舞台调度	staging-

规则

时间规则

timing-under-300ms

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

不合格：

.button { transition: transform 400ms; }

合格：

.button { transition: transform 200ms; }

timing-consistent

相似元素必须使用相同的时间值。

不合格：

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

合格：

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

timing-no-entrance-context-menu

上下文菜单出现时不应播放动画（仅退出时播放）。

不合格：

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

合格：

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

缓动规则

easing-entrance-ease-out

入场动画必须使用 ease-out（快速到达，柔和停稳）。

不合格：

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

合格：

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

easing-exit-ease-in

退场动画必须使用 ease-in（离开前逐渐加速）。

不合格：

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

合格：

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

easing-no-linear-motion

线性缓动只能用于进度指示器，不应用于运动动画。

不合格：

.card { transition: transform 200ms linear; }

合格：

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

easing-natural-decay

自然衰减应使用指数曲线，而不是线性曲线。

不合格：

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

合格：

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

物理效果规则

physics-active-state

交互元素必须具有带缩放变换的激活／按下状态。

不合格：

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

合格：

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

physics-subtle-deformation

挤压／拉伸变形必须保持微妙（范围为 0.95-1.05）。

不合格：

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

合格：

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

physics-spring-for-overshoot

需要过冲并停稳时，应使用弹簧效果，而不是缓动。

不合格：

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

合格：

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

physics-no-excessive-stagger

每个项目的错开延迟不得超过 50ms。

不合格：

transition={{ staggerChildren: 0.15 }}

合格：

transition={{ staggerChildren: 0.03 }}

舞台调度规则

staging-one-focal-point

同一时间只应有一个元素进行突出动画。

不合格：

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

staging-dim-background

模态框／对话框的背景应变暗，以引导用户注意力。

不合格：

.overlay { background: transparent; }

合格：

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

staging-z-index-hierarchy

动画元素必须遵守 z-index 层级。

不合格：

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

合格：

.tooltip { z-index: 50; }

输出格式

审查文件时，请按以下格式输出检查结果：

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

汇总表

输出检查结果后，再输出汇总：

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

参考资料

• The Illusion of Life: Disney Animation
• Apple WWDC23: Animate with Springs