アニメーションエンジニアリング & モーションクラフト

アニメーションエンジニアリング & モーションクラフト は何をしますか？

このスキルは、エージェントに業界標準の実践、プロダクション対応パターン、数理物理モデルを提供し、Webおよびアプリケーションインターフェース全体で流動的でパフォーマンスの高いアニメーションを設計およびコーディングできるようにします。

---

1. モーションパフォーマンスの黄金律

1. 合成プロパティのみをアニメーション化する:
   • 常に transform（translate3d、scale、rotate）と opacity を優先します。
   • 絶対に width、height、top、left、margin、padding などのジオメトリプロパティをアニメーション化しないでください。FLIP テクニック（First、Last、Invert、Play）を使用する場合を除きます。ジオメトリのアニメーション化は、CPU 上で高コストなレイアウト再計算（リフロー）とペイントをトリガーします。
2. GPU に責任を持って昇格させる:
   • will-change: transform, opacity; はアクティブにアニメーション化されている要素にのみ使用し、メモリが制約されている場合はアニメーション完了後に削除します。
   • 必要に応じて transform: translateZ(0) または backface-visibility: hidden を使用して GPU レイヤー合成を強制します。
3. ユーザーのアクセシビリティを尊重する:
   • 常に @media (prefers-reduced-motion: reduce) をサポートします:

     @media (prefers-reduced-motion: reduce) {
       *, *::before, *::after {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
       }
     }
     

4. 自然なタイミングと持続時間:
   • マイクロインタラクション（ボタンプレス、トグル、ツールチップ）: 100ms - 200ms
   • 標準トランジション（ドロップダウン、ダイアログ、ドロワー、カード）: 200ms - 350ms
   • 複雑なシーントランジション / ページトランジション: 350ms - 500ms
   • 500ms を超えるアニメーションは、継続的なアトモスフィアのバックグラウンドループやナラティブストーリーテリングでない限り、もっさりした印象を与えます。

---

2. テクノロジー選択マトリックス

シナリオ / ニーズ	推奨ツール	理由
シンプルなホバー、フォーカス、アクティブ状態、フェード/スライド	CSS Transitions & @keyframes または Tailwind CSS	JavaScript オーバーヘッドゼロ、120 FPS のハードウェアアクセラレーション。
React / Next.js UI、モーダル、共有レイアウトトランジション	Framer Motion (motion)	宣言的 API、スプリング物理、自動 FLIP（layoutId）、AnimatePresence。
複雑なタイムライン、SVG モーフィング、スクロール駆動 UI	GSAP (GreenSock) + ScrollTrigger	類を見ない振り付け制御、正確なスクラブ、クロスブラウザの一貫性。
3D エクスペリエンス、パーティクルネットワーク、シェーダー	Three.js / React Three Fiber / Canvas 2D	数十万のパーティクルに対して直接 WebGL GPU レンダリング。
ベクターモーショングラフィックス & キャラクターイラスト	Lottie / dotLottie / Rive	小さな JSON/バイナリペイロード、スケーラブルなベクター品質、インタラクティブステートマシン。

---

3. モーションカーブ（イージングトークン）

一定速度のコンベヤーベルトや無限回転ローダーをシミュレートする場合を除き、UI の動きに linear を使用しないでください。自然な動きは加速と減速を行います:

• スナッピーなエントランス（標準 UI ポップ/オープン）: cubic-bezier(0.16, 1, 0.3, 1)（Expo Out - 高速な初期バースト、スムーズな減速）
• スムーズな終了（却下/クローズ）: cubic-bezier(0.7, 0, 0.84, 0)（Expo In - 画面外に加速）
• 自然な動的 / 強調: cubic-bezier(0.34, 1.56, 0.64, 1)（微妙なオーバーシュートバウンス）
• スプリング物理（タッチ & ドラッグに推奨）:
  • 剛性: 300 - 400
  • ダンピング: 25 - 35
  • 質量: 0.8 - 1.0

---

4. 詳細ガイド & リファレンス

包括的なコードパターンと詳細なウォークスルーについては、リファレンスを参照してください:

• CSS & Tailwind Animations Reference
• Framer Motion & Motion One Patterns
• GSAP & ScrollTrigger Mastery
• Three.js & Canvas Motion
• UI Motion Principles & Accessibility

---

5. 検証チェックリスト

アニメーションコンポーネントを構築する際:

• アニメーションは、スタッターやフレームドロップなしでスムーズ（60-120 FPS）ですか？
• アニメーション中にレイアウトシフト（CLS）は回避されていますか？
• 終了アニメーションは、要素のアンマウント前に適切に待機されていますか？
• UI は、グリッチなしで素早いクリック/タップを処理できますか（中断可能なアニメーション）？
• prefers-reduced-motion は実装されていますか？