flutter-motion

Flutter Motion

動きを使って、変化、因果関係、連続性、階層、フィードバックを伝えます。これらを伝えない動きは取り除きます。

仕様を定める

1. イベント、プロパティの変化、ユーザーにとっての価値、トリガー、中断時の動作、完了状態を明示します。
2. 要件を満たす最もシンプルな Flutter の仕組みを選択します。暗黙的アニメーション、AnimatedSwitcher、明示的なコントローラー、ヒーロー遷移、カスタムペインター、物理シミュレーションなどです。
3. 再生時間の範囲、イージングの特性、シーケンス、ジェスチャーとの関係、動きを抑える場合の代替手段を定義します。references/motion.md を読みます。 複数の領域にまたがる状態変化の場合は、references/connected-product-workflows.md を読み、状態が変化した領域だけをアニメーション化します。
4. 連続したタップ、ナビゲーションによる中断、再ビルド、ルートの破棄、低いフレーム予算、アクセシビリティ設定の変更時に動きがどう振る舞うかを確認します。

実装する

• 見た目が同等であれば、レイアウト負荷の高いプロパティよりも先に、変換と不透明度をアニメーション化します。
• コントローラーを破棄し、ティッカーの重複を避けます。
• 遷移中もセマンティックな状態を維持します。
• 主要な操作へのアクセスを遅らせないようにします。
• リストの段階的なアニメーションは控えめで、上限を設けます。大規模なコレクションで遅延を項目数に比例して増やさないでください。
• 動きを抑える設定が要求された場合は、即時表示またはクロスフェードの代替手段を用意します。

検証する

通常の動きと動きを抑えた設定の両方で、中断時および関連する最低性能ティアでテストします。ツールが利用できる場合は、フレームの動作を確認します。測定していない性能については、滑らかだと仮定せず、未測定であることを報告します。