animation-principles について
目的のあるUIアニメーションを設計するためのモーションデザインスキルです。デザイナーや開発者に、時間、イージング、構成、アクセシビリティの指針を提供します。
主な機能
- 01イージングと時間の指針
- 02目的に沿ったモーション原則
- 03入場、退場、トランジションのパターン
- 04スタガーとシーケンスの推奨事項
- 05動きの軽減とパフォーマンスへの配慮
活用シーン
- 01画面遷移の時間設定
- 02関連要素の動きの調整
- 03動きの軽減設定への対応確認
インストール
コマンドをコピーしてターミナルで実行します。
$
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 対応