disney-animation-rule-skill

プロシージャルアニメーションのためのディズニー・アニメーション・ルール

意図、重み、リズム、個性が伝わる動きをデザインします。物理シミュレーションや補間は入力として扱い、最終的なアニメーションとはみなしません。

12 の原則をすべてのショットに無理に当てはめないでください。知覚上の問題を解決するために必要な、最小限の原則を選びます。

ワークフロー

1. 動きを変更する前に、シーン、コード、入力、レンダラー、プロジェクトの制約を確認します。
2. 動作を 1 文で表します。対象、意図、力、到達先、求める印象を含めます。
3. 主動作を特定し、すべての副次動作に優先順位を付けて主動作の下に位置づけます。
4. イージングカーブを選ぶ前に、意味上のフェーズとイベントポーズをブロックします。
5. references/twelve-principles.md から関連する原則を選びます。
6. フレームまたは時間と明示的な入力から、決定論的な状態評価関数を 1 つ定義します。
7. 変形、オーバーラップ、アクセント、エフェクトは、主動作または意味上のイベントから導きます。
8. 代表的なフレームでタイミングとスペーシングを調整し、次に動き全体を確認します。
9. ポーズの弱さ、不明瞭なタイミング、破綻した接触、見づらいシルエットを隠すエフェクトは取り除きます。

詳しいエンジニアリングパターンについては、references/implementation-patterns.md をお読みください。ジャンプの比較を取り上げた事例については、references/clawd-jump-case-study.md をお読みください。

動作をブロックする

次のようなイベントポーズを定義します。

• 静止または準備
• 予備動作
• 動作の決定または踏み切り
• 通過ポーズ
• 頂点、ホールド、または判断点
• 接触または衝撃
• 行き過ぎ
• 収束または立て直し

動作に合わせて用語を調整します。ボタンを押す動作なら、静止、押下、接触、行き過ぎ、収束を使うことがあります。カメラの動きなら、導入、加速、見せ場の提示、減速、収束を使うことがあります。

各フェーズについて、次の項目を指定します。

• 持続時間または持続時間の比率
• 位置と軌道
• 各境界での速度
• スケール、回転、ピボット
• 接触の制約
• シルエットまたは視認性の目標
• 副次動作の遅れ
• スミア、まばたき、パーティクル、カメラシェイクなどの任意のアクセント

不透明なイージング式 1 つにまとめるのではなく、フェーズ表または明示的な定数を使います。

動きの階層を構築する

次の順序で構築します。

1. 機能上の制約、接触、境界、入力の挙動を維持します。
2. 対象を単純な形として描画した状態で、主軌道とタイミングが明確に伝わるようにします。
3. 力や接触のイベントに合わせてポーズの変化と変形を加えます。
4. 制御されたフェーズのずれを設けて、フォロースルーとオーバーラップを加えます。
5. 主動作と競合せず、それを強調する副次動作を加えます。
6. 速度、衝撃、明瞭さの点で必要な箇所にのみアクセントを加えます。

モーションブラー、パーティクル、トレイル、サウンドがなくても、主動作が成立するようにします。

決定論的に実装する

• アニメーションの状態を state = f(frameOrTime, inputs, parameters) として計算します。
• 評価結果が、以前のレンダリングやレンダリング順序に依存しないようにします。
• 補間や微分の計算では、小数フレームを保持します。
• プロシージャルな変化には安定した識別子からシードを設定し、レンダリング中にシードなしの乱数を使わないでください。
• 速度と加速度は解析的に導出するか、純粋な状態関数をサンプリングして導出します。
• 後からの変更で動作が破綻する場合は、意図的な決定イベントでインタラクティブな入力をスナップショットします。
• 意図的な滑りでない限り、スクワッシュ、ストレッチ、反動、収束の間も接触アンカーを固定します。
• 意図的な衝撃、カット、スナップで不連続にする必要がない限り、フェーズ境界をまたいでも位置と速度の連続性を保ちます。
• しきい値と振幅は、対象のサイズ、移動距離、ビューポート、またはシーンのスケールで正規化します。
• 誇張は、読みやすさ、ジオメトリ、インタラクション上の制約が損なわれない範囲に制限します。

Remotion では、フレームが並列かつ順不同でレンダリングされる場合があるため、各フレームを個別に計算できるようにします。3D で Remotion の使用が禁止されている環境でブラウザベースの 3D 作業を行う場合は、プロジェクトの Puppeteer キャプチャワークフローを使用します。

知覚に合わせて調整する

曲線だけでなく、間隔も見極めます。

• サンプル間の距離が大きいほど、速度が速く感じられます。
• 短い予備動作の後に間隔が大きく変化すると、力強さが感じられます。
• 頂点や判断点の近くでサンプル間隔を狭めると、強調されます。
• 素早く接触した後に圧縮して戻る動きは、重さを生み出します。
• 末端の動きが遅れると、柔軟さと勢いが生まれます。
• きれいなシルエットは、細部より先に明瞭さを生み出します。

意図的に非対称性を使います。上昇と下降が等しい、すべてのチャンネルでイージングが同じ、各部位が同期して動く、といった状態は機械的に感じられることがよくあります。

レビューチェックリスト

• 数枚の静止フレームから動作を正しく読み取れることを確認します。
• 予備動作の向きが、これから行う動作の方向を示していることを確認します。
• 軌道、向き、変形が速度と力に合っていることを確認します。
• 衝撃の強さが、加わる速度や力に応じていることを確認します。
• 二次動作の開始と収束が、主要な動作より遅いことを確認します。
• ホールドが意図的なものであり、すべてのチャンネルが停止していないことを確認します。
• レスポンシブレイアウトで、異なるスケールやエンドポイントでも同じ動作の論理が保たれることを確認します。
• ポーズの弱さや遷移の破綻を、エフェクトで補っていないことを確認します。
• 同じ入力に対して、レンダリングされる各フレームが決定論的であることを確認します。

避けるべきデフォルト設定

• すべてのプロパティに、単一の線形な進行値を使わないでください。
• 対称な放物線を使えば、自動的に説得力のあるジャンプになると思い込まないでください。
• 力と回転軸を特定せずに、汎用的なバウンスや弾性イージングを追加しないでください。
• スクワッシュとストレッチを連続して適用せず、加速や接触の前後に集中させてください。
• 二次動作が主要な動作に先行しないようにしてください。
• 読み取りやすさを損なってまで、物理的なリアリティを維持しないでください。
• すべてのチャンネルを同時に誇張しないでください。
• 呼び出し順が前後するレンダラーに、状態を持つフレーム間シミュレーションを導入しないでください。