動作原理
決定物體如何移動，使其感覺正確——不受建構工具的限制。此技能回答關於時間、緩動、間距、重量與節奏的問題。它不選擇技術棧；而是產出具體數值（持續時間、cubic-bezier 曲線、交錯偏移量、彈簧配置），可直接提供給任何實作使用。
使用時機
- 動作感覺僵硬、漂浮、機械化、像機器人或廉價，需要診斷。
- 選擇片段或轉場的持續時間、緩動曲線與交錯偏移量。
- 檢視動作是否尊重物理直覺（重量、跟隨動作、弧線）。
- 將關鍵影格同步至音樂節拍或剪輯重音。
三大支柱——在決定任何數值前先解決
每個動作在選擇持續時間或曲線前，都應回答三個問題。跳過它們，你就會得到技術正確但感覺空洞的動作。這些是集合中其餘部分所參考的共同詞彙。
| 支柱 | 問題 | 驅動什麼 |
|---|---|---|
| 情感意圖 | 觀眾應該感受到什麼？（喜悅、平靜、急迫、信任、優雅） | 緩動、持續時間、振幅/overshoot |
| 視覺敘事 | 微故事是什麼？鋪陳 → 動作 → 解決 | 排序、舞台呈現、何者何時進入 |
| 動作工藝 | 如何讓它可信？ | 物理、次要動作、弧線、跟隨動作 |
三個動作層次——深度，而非扁平
扁平動作 = 只有主要物體在動。可信的動作需要同時運行三層：
- 主要 — 眼睛跟隨的主要動作（英雄動作）。
- 次要 — 對主要動作反應的輔助豐富性（陰影移動、圖示輕推、標籤延遲穩定）。
- 氛圍 — 從不要求注意的背景生命力（緩慢的漸層漂移、低對比的脈衝）。
判斷層（
motion-art-direction）將這些稱為 英雄 / 支援 / 紋理——同樣的三層，根據 什麼值得動作 進行排序。主要≈英雄，次要≈支援，氛圍≈紋理。
核心原則
緩動是最重要的槓桿
線性動作看起來像機器人。僅將 linear 保留給連續循環（旋轉器、跑馬燈、無限滾動）。眼睛感知為離散事件的每個事物都需要加速度。
將曲線與動作匹配：
- 進入 / 出現 -> ease-out（快速開始，平穩穩定）。物體帶著能量到達並減速就位。
cubic-bezier(0.16, 1, 0.3, 1)。 - 退出 / 消失 -> ease-in（平穩開始，快速結束）。物體加速離開。
cubic-bezier(0.7, 0, 0.84, 0)。 - 移動 / 重新定位（停留在畫面上） -> ease-in-out（對稱）。
cubic-bezier(0.65, 0, 0.35, 1)。 - 俏皮 / 品牌化 -> 輕微 overshoot。
cubic-bezier(0.34, 1.56, 0.64, 1)（1.56超過 1.0，產生一個被解讀為「重量」的 overshoot-and-settle）。
經驗法則：眼睛對緩慢開始的容忍度遠低於對緩慢結束的容忍度。當有疑問時，減速到靜止。
手動調整緩動（After Effects）。 當手動設定關鍵影格而非提供曲線時，相同的原則映射到 Graph Editor：調整 Speed Graph 使末端趨近於零，並將減速影響推到 80–90%，以獲得俐落的啟動與平穩的穩定。F9（Easy Ease）只是一個 33% 的對稱起點——讓它變成不對稱。請參閱 references/easing-graph-editor.md 了解 Graph Editor 的讀取、手柄/影響力技巧，以及逐步的 overshoot、預期動作和 bounce 配方（包括一個衰減 bounce 表達式）。
時間傳達重量與重要性
| 元素 | 持續時間 |
|---|---|
| 微互動（懸停、切換、點擊反饋） | 100-200ms |
| UI 轉場（面板、模態框、頁面區域） | 200-400ms |
| 英雄 / 大型元素 / 全螢幕 | 400-800ms |
| 電影鏡頭移動 | 800-2000ms |
距離與大小會影響持續時間。一個移動 20px 的小圖示和一個移動 800px 的全出血面板不應共享相同的持續時間——面板需要更多時間，否則會看起來沒有重量。一個實用的縮放：當距離或面積大約加倍時，透過增加約 30-50% 的持續時間來保持感知速度大致恆定。重的物體啟動緩慢且 overshoot 較少；輕的物體啟動快速且可能彈跳。
間距與交錯創造節奏
永遠不要一次揭示所有列表、網格或群組——它看起來像一個單一的扁平事件。交錯每個子項目的開始時間。
- 列表 / 順序項目：項目之間 40-80ms。
- 密集網格：20-40ms（項目越多，每個項目的延遲越少，否則尾部會拖曳）。
- 群組的總揭示時間大約限制在 600-800ms；如果
count * offset超過這個值，請縮小偏移量，或改用基於距離的交錯（距離原點較遠的項目較晚開始）。 - 交錯方向應跟隨眼睛：從上到下，或從焦點向外輻射。
1/3 規則（兩種形式，皆通用）：
- 距離 — 沒有任何元素移動超過螢幕約 1/3 而不經過中間關鍵影格或縮放/透明度變化。長而不間斷的滑動會被解讀為「範本移動了」，而非「某事發生了」。
- 同時性 — 對於 3 個以上的元素，同時處於活躍運動中的元素不超過約 1/3。其餘保持靜止或作為氛圍移動。所有事物一起移動 = 沒有焦點的噪音。
預期動作與跟隨動作塑造物理運動
- 預期動作：主要動作之前的一個微小反向動作（按鈕在彈出前先
scale 0.95下沉，角色在跳躍前先蹲下）。60-120ms 就足夠。 - 跟隨動作 / 重疊動作：主體停止後，尾部零件繼續移動（英雄卡片落地，然後其陰影與標籤延遲 40-80ms 後穩定）。交錯附屬元素的穩定時間，而非讓所有事物在同一影格停止。
- 弧線：自然運動曲線；有機物體的純直線平移看起來機械化。為 x/y 添加輕微弧線或為路徑設定動畫。
節拍同步與節奏
當動作伴隨音訊時，將衝擊關鍵影格（打擊、剪輯、揭示）對齊在節拍上，而非節拍之間。在 120 BPM 時，一個節拍是 500ms；一個八分音符的格線是 250ms。將關鍵時刻量化到該格線。對於沒有音樂的剪輯，建立一個視覺脈衝（例如每 ~500-800ms 一個主要事件），使片段呼吸一致。
彈簧 vs. 基於持續時間的動作
彈簧（質量 / 剛度 / 阻尼）自行決定持續時間，並且對於互動式、可中斷的動作（拖放釋放、手勢）感覺更物理。持續時間+緩動更適合編排好的、時間線鎖定的序列（影片、與滾動綁定的揭示），在這些情況下需要精確同步。一個俐落的預設彈簧：stiffness 300, damping 30, mass 1。請參閱 references/easing-curves.md 了解完整的彈簧表。
診斷常見問題
- 感覺僵硬/機械化 -> 在進入時使用了
linear或對稱緩動；改用 ease-out。 - 感覺漂浮/遲緩 -> 持續時間太長或 ease-out 太溫和；將持續時間縮短 30%，銳化曲線。
- 感覺廉價/卡頓 -> 所有事物同時出現（無交錯），或所有元素使用相同持續時間而不考慮大小。
- 儘管有緩動仍感覺機械化 -> 沒有預期動作，沒有跟隨動作，直線路徑；添加弧線與重疊。
快速參考
| 需求 | 使用 |
|---|---|
| 進入 | cubic-bezier(0.16, 1, 0.3, 1)，300-500ms |
| 退出 | cubic-bezier(0.7, 0, 0.84, 0)，200-300ms |
| 移動 | cubic-bezier(0.65, 0, 0.35, 1)，300-400ms |
| 品牌彈出 | cubic-bezier(0.34, 1.56, 0.64, 1)，400-600ms |
| 列表交錯 | 每個項目 40-80ms，總計上限約 700ms |
| 僅循環 | linear |
參考檔案
references/easing-curves.md— 命名的 cubic-bezier 庫，包含確切數值、彈簧配置（Framer/react-spring/iOS）以及每種元素類型的持續時間指南。references/easing-graph-editor.md— After Effects Graph Editor 工藝：速度圖 vs 數值圖、緩動手柄與影響力/速度數值，以及逐步的俐落、overshoot、預期動作與 bounce 配方。references/twelve-principles.md— 全部 12 個迪士尼原則，每個都附有具體的數值化動態圖形範例。