fixing-motion-performance

fixing-motion-performance

アニメーションのパフォーマンス問題を修正します。

使用方法

• /fixing-motion-performance この会話で行うすべての UI アニメーション作業に、これらの制約を適用します。

• /fixing-motion-performance <file> ファイルを以下のすべてのルールに照らして確認し、次の内容を報告します。

  • 違反箇所（該当する行またはコード片を正確に引用）
  • 重要な理由（簡潔な一文）
  • 具体的な修正方法（コードレベルの提案）

明示的に依頼されない限り、アニメーションライブラリを移行しないでください。既存の技術スタック内でルールを適用します。

適用する場面

以下の場合に、これらのガイドラインを参照してください。

• UI アニメーションを追加または変更する場合（CSS、WAAPI、Motion、rAF、GSAP）
• カクつくインタラクションやトランジションをリファクタリングする場合
• スクロール連動の動きや、スクロール時に表示するアニメーションを実装する場合
• レイアウト、フィルター、マスク、グラデーション、CSS 変数をアニメーションさせる場合
• will-change、transform、測定を使用するコンポーネントをレビューする場合

レンダリング手順の用語集

• composite：transform、opacity
• paint：color、border、gradient、mask、image、filter
• layout：size、position、flow、grid、flex

優先度別のルールカテゴリ

優先度	カテゴリ	影響度
1	禁止パターン	重大
2	仕組みの選択	重大
3	測定	高
4	スクロール	高
5	描画	中〜高
6	レイヤー	中
7	ぼかしとフィルター	中
8	ビュートランジション	低
9	ツールの境界	重大

クイックリファレンス

1. 禁止パターン（重大）

• 同じフレーム内でレイアウトの読み取りと書き込みを交互に行わない
• 大きな面や重要な面のレイアウトを連続的にアニメーションさせない
• scrollTop、scrollY、スクロールイベントを使ってアニメーションを駆動しない
• 停止条件のない requestAnimationFrame ループを作らない
• それぞれがレイアウトの測定または変更を行う複数のアニメーションシステムを混在させない

2. 仕組みの選択（重大）

• 動きには transform と opacity をデフォルトで使用する
• インタラクションで必要な場合に限り、JavaScript 駆動のアニメーションを使用する
• 描画またはレイアウトのアニメーションは、小さく独立した面でのみ許容される
• 一度だけのエフェクトは、連続的な動きよりも幅広く許容される
• 動きを完全に取り除くより、手法をより負荷の低いものに変更する

3. 測定（高）

• 一度だけ測定し、その後は transform または opacity でアニメーションさせる
• すべての DOM 読み取りを、書き込みより先にまとめて行う
• アニメーション中にレイアウトを繰り返し読み取らない
• レイアウトに似たエフェクトには、FLIP スタイルのトランジションを優先する
• 測定と書き込みをまとめて行う手法を優先する

4. スクロール（高）

• スクロール連動の動きには、利用可能な場合、Scroll Timeline または View Timeline を優先する
• 表示状態の確認と一時停止には IntersectionObserver を使用する
• アニメーションのためにスクロール位置をポーリングしない
• 画面外ではアニメーションを一時停止または停止する
• スクロール連動の動きによって、大きな面でレイアウトや描画を連続的に発生させない

5. 描画（中〜高）

• 描画を発生させるアニメーションは、小さく独立した要素でのみ許容される
• 大きなコンテナーで描画負荷の高いプロパティをアニメーションさせない
• transform、opacity、position のために CSS 変数をアニメーションさせない
• 継承される CSS 変数をアニメーションさせない
• アニメーションする CSS 変数の適用範囲を局所化し、継承を避ける

6. レイヤー（中）

• コンポジターによる動きにはレイヤーの昇格が必要です。レイヤー昇格を前提にしないでください
• will-change は一時的かつ限定的に使用する
• 昇格させるレイヤーを大量に作ったり、大きくしたりしない
• パフォーマンスが重要な場合は、ツールを使ってレイヤーの動作を検証する

7. ぼかしとフィルター（中）

• ぼかしのアニメーションは小さく保つ（<=8px）
• ぼかしは短時間の一度限りのエフェクトにのみ使用する
• ぼかしを連続的にアニメーションさせない
• 大きな面にぼかしのアニメーションを適用しない
• ぼかしよりも opacity と translate を優先する

8. ビュートランジション（低）

• ビュートランジションは、ナビゲーションレベルの変更にのみ使用します
• インタラクションの多い UI では、ビュートランジションを避けます
• 中断またはキャンセルが必要な場合は、ビュートランジションを避けます
• サイズ変更はレイアウトを発生させる可能性があるものとして扱います

9. ツールの境界（重大）

• 明示的に依頼されない限り、アニメーションライブラリを移行または書き換えないでください
• これらのルールは、既存のアニメーションシステム内で適用してください
• API を部分的に移行したり、同じコンポーネント内でスタイルを混在させたりしないでください

レビューガイドライン

• まず重大なルール（禁止パターン、ツールの境界）を徹底します
• 意図に合った、最もコストの低いレンダリング処理を選びます
• デフォルト以外の選択をする場合は、それを正当化する制約（対象範囲のサイズ、継続時間、またはインタラクション要件）を示します
• レビューでは、理論よりも実行可能な指摘と具体的な代替案を優先します