モーション

状態変化に応じて選択

原因と結果を結び付ける場合だけモーションを使います。直接入力のフィードバックは即時に感じられるようにし、近くに現れるフローティングコンテンツは文脈を示すため少し長くできます。タスクの文脈が切り替わる表示には、最も長い持続時間を使えます。変化していないコンテンツは動かさないでください。

持続時間とイージング

双方向の状態変化には standard、画面に入るコンテンツには easeOut、反復周期だけに linear を使います。

ローディングは反復周期

loading は進入時間ではなく 2.4s の反復周期です。スピナーやスケルトンのように進捗が不明な場合だけ線形周期を使ってください。必要ならタスク名を示し、完了時に反復を止め、進捗率が分かる場合は確定した値を表示します。

実際の操作パターン

Flutter のタッチおよびスタイラス対象は、pointer down で pressed フィードバックを開始します。色は immediate と easeOut で入り、 fast と standard で元の状態へ戻ります。短いタップも最小表示時間を 待たず、指を離した時点で実行されます。スクロールまたはキャンセルに 変わった場合は、実行せずに以前の状態へ戻ります。

• ボタン、トグル、タブ、スイッチは局所的な状態変化に速いフィードバックを使います。
• メニュー、ツールチップ、ポップオーバー、選択リストは近くの文脈を示します。
• ダイアログとドロワーはアクティブなタスクの文脈を変えるため、少し長い表示時間を使えます。
• 進捗とスケルトンは進捗量が不明な間、ローディング周期を使います。

意味を保ちながらモーションを軽減

prefers-reduced-motion: reduce では装飾的な移動と大きな変形を除き、最終状態、ステータステキスト、フォーカス移動、意味のあるフィードバックは保ってください。

実装とリファレンス

.rack-status { transition: background-color var(--tinyrack-duration-fast) var(--tinyrack-ease-standard); }
@media (prefers-reduced-motion: reduce) { .rack-panel { transition: none; transform: none; } }