flutter-animation について
flutter-animationは、Flutterの画面に動きを実装する開発者向けスキルです。アニメーション方式の選択、タイミングや中断の管理、視覚効果を抑える設定への対応、状態の検証を支援します。
主な機能
- 01暗黙的・明示的アニメーションの選択
- 02タイミングと中断の管理
- 03画面間で要素を保つHeroの利用
- 04視覚効果を抑える設定への対応
- 05アニメーション状態とtickerのライフサイクル検証
活用シーン
- 01UIの状態変化に適した方式の選択
- 02画面間のトランジションの実装
- 03アクセシビリティ設定に応じた動きの調整
- 04中断・逆再生時のアニメーション確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/flutter-animationを入力して読み込まれたか確認します。
同梱ファイルevals/cases.jsonreferences/motion-patterns-and-reduced-motion.md
詳細
Flutter アニメーション
動きを使って、状態の変化、階層、連続性を伝えます。中断可能で、アクセシブルな状態を保ちます。
タイミング、補間、シーケンス、安定した識別、割り込みを管理します。ぼかし、ガラス、屈折、シェーダーのユニフォーム、光学的なレイヤー構成は flutter-visual-effects に任せます。両方に該当する場合は、エフェクトを駆動するのはアニメーションの状態とし、レンダラー内でコントローラーの所有権を重複させないようにします。
仕組みを選ぶ
- 状態によって制御される少数のプロパティ変更には、暗黙的アニメーションを使用します。
- タイミング、シーケンス、反復、割り込み、または複数の値を明示的に管理する必要がある場合は、
AnimationControllerを使用します。 - 同じ概念上の要素がルートをまたいで維持され、タグが一意である場合に限り、
Heroを使用します。 - ウィジェットの組み合わせでは効率よく表現できない場合に限り、カスタムペインターや低レベルのアニメーションを使用します。
- アニメーションコントローラーは、それを所有する状態のライフサイクル内で維持し、適切に破棄します。
プロファイリングせずに、大きなサブツリーに対してレイアウト負荷の高いプロパティをアニメーションさせないでください。タイミングの把握が難しくなるような、無関係な暗黙的アニメーションの重ねがけは避けます。
モーションの低減
プロジェクトに適した Flutter API を通じて、プラットフォームのアクセシビリティ設定を読み取ります。意味やタスクの完了を損なわないようにしながら、必須ではない動きを即時または動きの少ないトランジションに置き換えます。
検証
該当する場合は、初期、進行中、完了、逆再生、中断、モーション低減の各状態をテストします。ティッカーのリークを確認し、代表的なデバイスでプロファイルモードを使用して複雑な動きをプロファイリングします。
モーションパターンまたはモーションの低減が対象となる場合は、モーションパターンとモーション低減のリファレンスに従います。