動畫原則
決定物體應如何移動，使其感覺自然——不受製作工具的限制。此技能提供時間、緩動、間距、重量和節奏的具體方案。它不選擇技術棧；而是產出具體數值（時長、三次貝茲曲線、間隔偏移、彈性設定），可直接套用於任何實作。
使用時機
- 動畫感覺僵硬、漂浮、機械、機器人或廉價，且需要診斷。
- 選擇剪輯或轉場的時長、緩動曲線和間隔偏移。
- 審查動畫是否尊重物理直覺（重量、跟隨動作、弧線）。
- 將關鍵影格同步至音樂節拍或剪輯重音。
三大支柱——選定任何數值前的基礎
每一段動畫在選擇時長或曲線之前，都應先回答三個問題。跳過它們，你只會得到技術正確但毫無感覺的動畫。這些是整個技巧集共用的詞彙。
| 支柱 | 問題 | 影響範圍 |
|---|---|---|
| 情感意圖 | 觀眾應該 感受 到什麼？（喜悅、平靜、急迫、信任、優雅） | 緩動、時長、振幅/過衝 |
| 視覺敘事 | 微故事是什麼？起始 → 動作 → 結局 | 順序、分鏡、元素進場時機 |
| 動畫工藝 | 如何讓它令人信服？ | 物理、次級動作、弧線、跟隨動作 |
三層動畫——深度，而非平面
平面動畫 = 只有主要物體在動。令人信服的動畫同時運作三層次：
- 主要 (Primary) — 眼睛跟隨的主要動作（主角移動）。
- 次要 (Secondary) — 回應主要動作的輔助豐富效果（陰影移動、圖示輕推、標籤延遲穩定）。
- 環境 (Ambient) — 從不搶眼、提供背景生命的動態（緩慢漸層漂移、低對比脈衝）。
判斷層次 (
motion-art-direction) 稱之為主角 (Hero) / 支援 (Support) / 紋理 (Texture) —— 同樣三層，但依據「誰值得動畫」排序。主要≈主角，次要≈支援，環境≈紋理。
核心原則
緩動是最大的槓桿
線性運動看起來像機器人。僅在連續循環（旋轉器、跑馬燈、無限捲動）中使用 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)。 - 俏皮 / 品牌化 -> 輕微過衝。
cubic-bezier(0.34, 1.56, 0.64, 1)（其中的1.56推過 1.0，產生過衝後穩定的效果，解讀為「重量」）。
經驗法則：眼睛對緩慢開始的容忍度遠低於緩慢結束。有疑問時，選擇減速至靜止。
手動調整緩動 (After Effects)。 若手動設定關鍵影格而非提供曲線，相同原則可套用至圖表編輯器：調整速度圖表，使兩端趨近於零，並將減速影響力推至 80–90%，以獲得乾脆的啟動和平順的穩定。F9（輕鬆緩動）僅是 33% 的對稱起點——讓它不對稱。請參閱 references/easing-graph-editor.md 了解圖表編輯器解讀、手柄/影響力技巧，以及過衝、預期動作和彈跳的逐步配方（包括衰減彈跳表達式）。
時間傳達重量與重要性
| 元素 | 時長 |
|---|---|
| 微互動（懸停、切換、點擊反饋） | 100-200ms |
| UI 轉場（面板、模態框、頁面區域） | 200-400ms |
| 主角 / 大型元素 / 全螢幕 | 400-800ms |
| 電影運鏡 | 800-2000ms |
距離和大小會影響時長。移動 20px 的小圖示與移動 800px 的全出血面板不該使用相同的時長——面板需要更多時間，否則看起來像無重量。一個實用的縮放：保持感知速度大致恆定，當距離或面積大約加倍時，增加約 30-50% 的時長。重物開始緩慢且過衝較少；輕物則反應迅速且可能彈跳。
間隔與節奏創造韻律
永遠不要讓列表、網格或群組同時全部顯示——它會被解讀為單一平淡事件。交錯每個子元素的開始時間。
- 列表 / 連續項目：40-80ms 間隔。
- 密集網格：20-40ms（項目越多，每項延遲越短，否則結尾會拖太久）。
- 群組總顯示時間上限約為 600-800ms；若
數量 * 間隔超過此值，則縮小間隔，或改用基於距離的間隔（距離原點越遠的元素越晚開始）。 - 間隔方向應跟隨視線：由上至下，或從焦點向外發散。
1/3 法則（兩種形式，皆通用）：
- 距離 — 沒有元素應在沒有中間關鍵影格或縮放/透明度變化的情況下，移動超過畫面的約 1/3。長距離不間斷滑動會被解讀為「範本動了」，而非「某事發生了」。
- 同時性 — 若有 3 個以上元素，同時處於活躍運動中的元素不應超過約 1/3。其餘元素應保持靜止或作為環境動畫。全部一起動 = 沒有焦點的雜訊。
預期動作與跟隨動作營造物理動作
- 預期動作 (Anticipation)：主要動作前的微小反向移動（按鈕在彈出前先
縮放 0.95，角色在跳躍前先蹲下）。60-120ms 就足夠。 - 跟隨動作 (Follow-through) / 重疊動作 (Overlapping action)：附屬部分在主體停止後仍繼續移動（主角卡片落地後，其陰影和標籤再延遲 40-80ms 穩定）。交錯附屬元素的穩定時間，而非讓所有東西在同一影格停止。
- 弧線 (Arcs)：自然運動軌跡；有機物體的純直線平移看起來機械。在 x/y 軸上加入輕微弧線，或沿路徑動畫化。
節拍同步與節奏
當動畫搭配音訊時，將撞擊關鍵影格（打擊、剪輯、揭示）落在節拍上，而非拍之間。在 120 BPM 時，一拍為 500ms；八分音符網格為 250ms。將關鍵時刻量化至此網格。對於無音樂的剪輯，建立一個視覺脈衝（例如每約 500-800ms 一個主要事件），使片段呼吸一致。
彈性 vs. 時長型動畫
彈性（質量 / 剛性 / 阻尼）會自行決定時長，對於互動式、可中斷的動畫（拖放釋放、手勢）感覺更物理。時長+緩動更適合編排好的、時間軸鎖定的序列（影片、捲動觸發揭示），這類情況需要精確同步。一個乾脆的預設彈性設定：剛性 300, 阻尼 30, 質量 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— 具名三次貝茲曲線庫，包含精確數值、彈性設定 (Framer/react-spring/iOS)，以及各元素類型的時長指南。references/easing-graph-editor.md— After Effects 圖表編輯器技巧：速度圖 vs 數值圖、緩動手柄與影響力/速度數值，以及乾脆、過衝、預期動作和彈跳的逐步配方。references/twelve-principles.md— 全部 12 個迪士尼原則，每個都以具體的數值動畫圖形範例說明。