12-principles-of-animation

アニメーションの12原則

アニメーションコードをレビューし、Web インターフェース向けに適用した Disney の12原則への準拠を確認します。

動作

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

一度に目立つようにアニメーションさせる要素は、1つだけにします。

不合格：

// 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