モーションデザインとインターフェイスアニメーション

1）なぜプロダクトのアニメーション

• 因果関係（それが消えた場所、要素の由来）を説明します),
• 主要な行為に注意を向けます、
• 結果（フィードバック）を確認し、認知負荷を軽減します、
• トランジションは予測可能で「有形」になります。

ルール#1： 意味>スタイル。「何が起こったのか、それが私とどのように関係しているのか？」という質問に、アニメーションが答えています？».

2）基本原則

1.モーションヒエラルキー：コンテナが最初に移動し、次にコンテンツが移動し、次に部品が移動します。
2.一貫性：同じアクションの同じパターン。
3.節約：最低の特性、最低フレーム；より速く、より明確な。
4.現実的な物理学：初めの加速、終わりの減速；「ジャーク」はありません。
5.リバーシビリティ：「back」はミラーのような「forward」を感じます。
6.アクセシビリティ：アニメーション削減システムの設定を尊重します。

3）期間と曲線（推奨事項）

3.1期間（デスクトップ/モバイル）

ホバー： 120-180ms

フォーカス/プレス： 80-120ミリ

ツールチップ/トースト： 入力180-240ms、出力120-160ms

モーダル/ドルーア： 200-320ミリ秒

画面遷移： 240〜360ミリ秒

スクロール/パララックス： セグメントごとの≤ 200msは、無限ループを避けます

3.2つのカーブ

Main： 'cubic-bezier （0。2, 0.0, 0.2、1）'-自然な「材料」のペース

入力速度が速く、出力が柔らかくなる： 'cubic-bezier （0。05, 0.7, 0.1, 1)`

弾性（レア、アクセント）： '立方ベジェ（0。2, 0.8, 0.2, 1.2） 'overshoot限界と≤ 8px/8°

ルール：動きと不透明度に線形補間を同時に使用しないでください-「機械性」の感覚。

4）トランジション振付

外観：ライトスケール0。98→1.0+フェードイン、原点軸に沿って8-16 pxオフセット。
消失：逆順序、エントリよりも速い（− 20-30％）。
タブの回転/変更：一般的な「ベース」（コンテナ）は16-24 pxでシフトされます。アクティブなタブは、動きが始まる前にハイライトされます。
リスト：カスケードを緩めます（スタガー20-40 ms/element、 6-8要素以下）。

5）マイクロインタラクション（パターン）

ボタン（ホバー/プレス）：shadow+light subscreen/scale 0。98;プレスされたバウンス≤ 80ms。
焦点：ぼかしのないコントラストリング；光線の代わりに厚さ/透明度をアニメーション化します。
入力：焦点のキャリッジ/フィールド照明；エラー-振動≤ 6 px、 ≤ 140 ms、 1サイクル。
トグル/チェックボックス：最終位置にスナップし、60〜80ミリ秒以内の遅延をクリックします。
スケルトン/負荷：明るさ1200-1600ミリ秒、明るさの振幅≤ 20％、鋭い点滅なし。

6）コンテンツの状態

ロード→成功/空/エラー：移動の1つの「チャンネル」；異なった方向を混合しないで下さい。
トースト/アラート：イベントのソース側から到着します（例：ユーザーアクションの右下）。
リフレッシュするために引っ張る：弾性ばねの張力；リターン時間≤ 250ms。

7）アクセシビリティ（A11y）とセキュリティ

サポート'prefers-reduced-motion： reduce'：移動をフェード/スケール≤ 1％または静的遷移で置き換えます。
1秒あたりの点滅>3および大きい対照の点滅（感光性のてんかん）を避けて下さい。
動きの病気の歴史のユーザーで強い視差/ズームを使用しないで下さい；切断オプションを作成します。
フォーカススタイルは常にアニメーションなしで表示されます（色/動きだけではありません）。

8）性能（目標として60 FPS）

不透明度のみをアニメーション化し、変換（変換/スケール/回転）；'top/left/width/height'を避けます。
コンポジットを含める：'transform： translateZ （0）'または'will-change： transform、 opacity'。
複数の要素の大きなぼかしシャドウとフィルタをアニメーション化しないことで、再描画を最小限に抑えます。
大きなトランジションをバッチに分割する。requestAnimationFrameを使用します。
リストの場合、オフスクリーン仮想化/再レイアウト。

9）デザインシステムのモーショントークン

json
{
"motion": {
"duration": { "xs": 100, "sm": 160, "md": 220, "lg": 280, "xl": 340 },
"easing": {
"standard": "cubic-bezier(0. 2, 0. 0, 0. 2, 1)",
"emphasis": "cubic-bezier(0. 05, 0. 7, 0. 1, 1)",
"decelerate": "cubic-bezier(0. 0, 0. 0, 0. 2, 1)",
"accelerate": "cubic-bezier(0. 4, 0. 0, 1, 1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

その他：'motion。 {duration' easing 'stagger}。 {role}'-'hover'、 'focus'、 'overlayIn'、 'pageTransition'、 'listItem'。

10）実装（CSS/JS/React）

css
:root {
--motion-dur-sm: 160ms;
--motion-dur-md: 220ms;
--motion-ease: cubic-bezier(0. 2, 0, 0. 2, 1);
}
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration: 0. 01ms! important; }
}

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { duration: 0. 22 } }}
exit={{ opacity: 0, transition: { duration: 0. 16 } }}
className="fixed inset-0 bg-black/50"
>
<motion. div initial={{ y: 16, scale: 0. 98, opacity: 0 }}
animate={{ y: 0, scale: 1, opacity: 1, transition: { duration: 0. 24, ease: [0. 2,0,0. 2,1] } }}
exit={{ y: 8, scale: 0. 99, opacity: 0, transition: { duration: 0. 18 } }}
className="m-auto max-w-lg rounded-2xl bg-white p-6"
>
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

Lottie/SVG：例示的な空の状態と初期登録に使用します。重要な制御のためではありません。最適化とキャッシュ。

11）ローディングパターン

コンテンツ構造が知られているスピナーの代わりにスケルトン。
進捗：進捗がわかっている場合の決定バー；不確定-均一なペースで、「ジャーク」なし。
再構築時に「浮動小数点数」のスケルトンを避けます。

12）ページ/画面遷移

注意点（共有要素の遷移）を維持します-カードは部品に「展開」されます。
ナビゲーション「深い」進む/右/上、「戻る」-戻る；方向はプラットフォームで同じです。
背景基板はオーバーレイで40〜60％まで暗くなります。

13） iGamingの詳細

スピン/明らかにして下さい：1つの短い加速（≤ 200ms）+均一な回転+柔らかい減衰；行動なしの無限サイクルの禁止。
Win/Jackpot：光スプラッシュ≤ 500ミリ秒、ストロボなし。低音量でダブルサウンド。勝利テキストは読み取り可能です（対照的にAAA）。
トーナメント/評価：アカウントインクリメント-テーブル番号と40-60 ms/unit（バッチ）のライトステップでカウンター、「ジャンプ」レイアウトなし。
責任あるプレー：注意をそらす効果のない通知と制限；アニメーションは最小限で読みやすさを重視しています。

14）アンチパターン

応答をクリックするには、遅延>120ms。
不透明度+スケール0からの「エレベーター」。9→1.05→1.0すべての小さなことのオーバーシュート。
スクロールと競合する背景の視差。
無限の明滅/脈動。
要素セットのレイアウト/ペイントプロパティ（'height'、 'left'、' filter： blur（）'）をアニメーション化します。
同じアクションのための非定常な曲線と期間。

15）プロセスおよびQA

• タイミング/カーブを持つプロトタイプ。フレームレベルの振り付け。
• モーショントークンのカタログとコンポーネントの例。

• 単位の可視性/状態テスト（トランジションは予想どおりに終了します）。
• ビジュアルテスト（アニメーションの最後のスナップショット）。
• 最大負荷のあるシーンのパフォーマンス/タイムライン。

• 'prefers-reduced-motion'をサポート。
• Transform/opacityのみ。
• 期間と曲線はトークンに対応します。
• 点滅しない>3/secおよび強いストロボ。
• 可能な限りスピナーの代わりにスケルトン。
• 遷移は可逆的で予測可能である。

16）設計システムにおけるドキュメンテーション

モーショントークン：例を含む持続時間/イージング/スタッガー。
「遷移パターン」：モーダル、リスト、タブ、ページ。
「A11y&パフォーマンス」：モーションとコンポジットを減らすためのガイド。
「Do/Don 't」：良い/悪い例の短いクリップ。

概要

モーションデザインは、原因と効果の言語です。タイミングを短くし、カーブを一貫し、プロパティを安価にレンダリングします。可用性、ドキュメントトークン、パフォーマンスのチェックを尊重します。その後、アニメーションはUXを強化し、インターフェイスの速度と明瞭さを妨げることはありません。