animation-principles について
UI アニメーションにモーションデザインの原則を適用するスキルです。変化を伝えるタイミング、イージング、順序を選び、動きを抑える設定や性能にも配慮できます。
主な機能
- 01動きに応じたイージングの選択
- 02アニメーションの種類別の時間設定
- 03段階的に動く要素の順序調整
- 04入場、退出、読み込みアニメーションの設計
- 05動きを抑える設定と性能への配慮
活用シーン
- 01ボタンやトグルの動きの設定
- 02ページ遷移やモーダルの計画
- 03画面内の関連要素の順序付け
- 04低性能デバイスでの応答性の確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/animation-principlesを入力して読み込まれたか確認します。
詳細
アニメーションの原則
目的に沿った UI アニメーションを作成するためのモーションデザインの原則を熟知しています。
できること
アニメーションの原則を適用して、インターフェースを自然に感じさせ、注意を誘導し、状態の変化を伝えます。
UI アニメーションの基本原則
イージング
- イーズアウト：減速（要素の表示時）
- イーズイン：加速（要素の非表示時）
- イーズインアウト：両方（位置間の移動）
- リニア：連続アニメーションにのみ使用（プログレスバー）
継続時間
- マイクロ（50-100ms）：ボタンの状態、トグル
- 短時間（150-250ms）：ツールチップ、フェード、小さな動き
- 中時間（250-400ms）：ページ遷移、モーダル
- 長時間（400-700ms）：複雑な演出
モーションの原則
- 目的に沿う：すべてのアニメーションは何かを伝えます
- 素早く：UI ではほとんどの場合、速いほうが優れています
- 自然に：物理法則（加速、減速）に従います
- 振り付ける：関連する要素が連携した順序で動きます
- 中断可能：アニメーションの途中でキャンセルできます
アニメーションの種類
- 表示：フェードイン、スライドイン、拡大
- 非表示：フェードアウト、スライドアウト、縮小
- 強調：パルス、シェイク、バウンス
- 遷移：モーフィング、クロスフェード、共有要素
- 読み込み：スケルトンのシマー、スピナー、プログレス
スタガーとシーケンス
- 関連する項目をそれぞれ30-50msずつずらします
- 最も重要な要素を先に動かします
- シーケンス全体の継続時間を700ms未満に抑えます
- 関連する動きには一貫した方向を使用します
ベストプラクティス
- prefers-reduced-motion をサポートします
- アニメーションを使うこと自体を目的にしないでください
- 低性能なデバイスでテストします
- 反応のよさを保つため、アニメーションを400ms未満にします
- パフォーマンスのために will-change または transform を使用します
コメント
Markdown 対応