我是 NODE，工作室裡負責把動畫節奏整理清楚的 AI 打工仔。
「我已經放了兩個關鍵影格，為什麼動起來還是硬硬的？」
這次我們先不翻特效清單，來看時間軸。動畫何時開始、花多久完成、中間怎麼加速、最後怎麼停下，都是這裡的工作。
本篇用簡單的單一數值動畫，帶你認識關鍵影格、F9 緩動、值圖表與速度圖表，再練習用把手和數字細調。圖中為概念圖解，非 AE 介面截圖；中文為理解譯名，操作時可對照英文。
01｜影格和關鍵影格，是不同的東西
Frame（影格）是影片的一張畫面。30 fps 表示每秒 30 個影格。
Keyframe（關鍵影格）則是在某個時間點記錄一個屬性的數值。例如 Rotation 在 0 秒是 0°，1 秒是 90°，AE 會依設定計算中間的變化。
因此，1 秒的動畫不必手動建立 30 個關鍵影格。先設定起點和終點，就能開始練習。
02｜在哪裡新增和修改關鍵影格？
選取圖層，在時間軸展開 Transform（變換）。常用的快捷鍵如下：
| 按鍵 | 英文屬性 | 中文理解 |
|---|---|---|
| P | Position | 位置 |
| S | Scale | 縮放 |
| R | Rotation | 旋轉 |
| T | Opacity | 不透明度 |
| A | Anchor Point | 錨點 |
| U | 顯示有動畫的屬性 | 方便找到已有的關鍵影格或表達式 |
先做一個 0° 到 90° 的旋轉
- 建立一個形狀或文字圖層，按 R 展開 Rotation。
- 把目前時間指標移到 0 秒，設定 Rotation 為 0°。
- 點 Rotation 左側的 Stopwatch（碼錶），建立第一個關鍵影格。
- 移到 1 秒，把 Rotation 改成 90°，建立第二個關鍵影格。
- 從開頭播放，比較起點、中間與終點的姿態。
碼錶啟用後，在其他時間改數值，就會新增或更新關鍵影格。要修改既有一格，可以先移到該關鍵影格，再改數值；雙擊關鍵影格，也能開啟對應的值設定視窗。
想補一個相同數值的關鍵影格，可用屬性旁的新增／移除關鍵影格菱形按鈕。
03｜先調時間，再調曲線
動畫快慢先受兩件事影響：數值要改變多少、用多少時間完成。相同數值變化的前提下，兩個時間點越近，平均變化越快。
| 想調整什麼 | 在時間軸怎麼做 |
|---|---|
| 動作晚一點發生 | 選取整組關鍵影格，一起向右移 |
| 同一個動作變快 | 縮短起點與終點之間的時間 |
| 同一個動作變慢 | 拉長兩個時間點的距離 |
| 旋轉幅度變大 | 改 Rotation 數值，時間可以先不動 |
| 精細移動一格時間 | 選取關鍵影格，按 Alt（Windows）／Option（Mac）＋左右方向鍵 |
選取多個關鍵影格一起拖動時，它們的相對時間距離會保留。需要等比例壓縮至少三個已選關鍵影格時，可以按住 Alt／Option，拖曳最前或最後一個。
練習把旋轉終點從 1 秒拉到 2 秒，再拉回 1 秒，先感受整體時長的差別。這一步確定後，再來調加減速，會比較容易判斷。
04｜F9 做了什麼？Easy Ease 緩動怎麼用？
選取兩個關鍵影格，按 F9，或從 Animation → Keyframe Assistant → Easy Ease 套用緩動。
對這個只有兩個時間點的旋轉練習，兩端套用 Easy Ease 後，會呈現較慢起步、中段較快、再慢慢停下的節奏。起點與終點的時間和角度仍在原處，改變的是中間的變化方式。
| 操作 | Windows | macOS | 調整哪一側 |
|---|---|---|---|
| Easy Ease｜緩動 | F9 | F9 | 所選關鍵影格的進入與離開兩側 |
| Easy Ease In｜緩入 | Shift＋F9 | Shift＋F9 | 動畫進入所選關鍵影格的那一側 |
| Easy Ease Out｜緩出 | Ctrl＋Shift＋F9 | Command＋Shift＋F9 | 動畫離開所選關鍵影格的那一側 |
In／Out 是相對於你選的關鍵影格。想讓物件慢慢抵達終點，可以選終點做 Easy Ease In；想讓它慢慢離開起點，可以選起點做 Easy Ease Out。
Mac 或筆電若把 F9 當系統功能鍵，可能需要搭配 Fn。按鍵衝突時，用選單套用也可以。
05｜關鍵影格類型很多，先認識這幾種
所謂 Interpolation（插值），就是 AE 怎麼計算兩個記錄點之間的變化。
| 英文 | 中文理解 | 主要行為與用途 |
|---|---|---|
| Linear | 線性 | 每段按固定變化率前進；適合先檢查數值和節奏 |
| Bezier | 貝茲 | 可以自行調把手，細調進出變化 |
| Continuous Bezier | 連續貝茲 | 維持較連續的過渡，可再調整 |
| Auto Bezier | 自動貝茲 | AE 依相鄰關鍵影格協助計算平滑過渡 |
| Hold | 保持 | 保留目前數值，到了下一個點才跳變 |
Easy Ease 是套用緩動的輔助操作，不是另一組與上述完全平行的獨立插值系統。一般線性關鍵影格常見菱形圖示；套用緩動或其他插值後，圖示會改變。單側設定不同，圖示也可能不同，判斷時最好同時看插值設定和圖表。
設定入口是選取關鍵影格後，到 Animation → Keyframe Interpolation。需要瞬間跳變，可用 Animation → Toggle Hold Keyframe；要回到規律的變化，可在插值視窗把 Temporal Interpolation 設為 Linear。
例如把 0 秒設為 Opacity 0%、1 秒設為 100%，起點設 Hold，就會先維持透明，到下一個時間點才突然顯示。
06｜曲線在哪裡開？找到 Graph Editor
- 在時間軸選取要調的屬性，例如 Rotation，再選取它的關鍵影格。
- 點時間軸上方工具列的 Graph Editor（圖表編輯器）按鈕；它是曲線圖示。
- 到圖表編輯器下方的 Graph Type and Options（圖表類型與選項），選 Edit Value Graph 或 Edit Speed Graph。
- 選取圖上的關鍵影格；需要時先套用 Easy Ease，讓可調整的把手顯示出來。
看不到曲線時，先檢查屬性是否選到、圖表的顯示範圍是否涵蓋這段時間，以及圖表是否只顯示目前選取的屬性。可用圖表下方的縮放／符合選取範圍控制，把曲線帶回視野。
07｜Value Graph 和 Speed Graph，讀法不一樣
兩張圖的橫軸都是時間；先看縱軸，才知道自己正在改什麼。上圖用單一數值由小到大、兩端緩動的情況作示意。
值圖表的 S 曲線，不等於速度圖表也應該畫成 S。同一段先慢、後快、再慢的動畫，在單向的數值練習中，值圖表可呈 S 形，速度圖表則像中間隆起的山丘。
圖表開啟 Auto-Select Graph Type 時，AE 可能依屬性自動選圖。因此，網路教學和你的畫面長得不同，先確認是不是看了不同圖表。
| 圖表 | 縱軸在說什麼 | 怎麼判讀 |
|---|---|---|
| Value Graph｜值圖表 | 當下屬性數值 | 旋轉可看角度；線越陡，該段數值變化越快 |
| Speed Graph｜速度圖表 | 數值每秒的變化速度 | 旋轉可看度／秒；較高代表該段變化較快 |
08｜怎麼用把手細調，而不是亂拉？
以這次 0° 到 90° 的旋轉為例，先選 Edit Speed Graph，再選起點和終點。
- 先保留原本的兩個時間點。
- 選取起點，稍微向右延伸它朝終點的把手，再播放比較。
- 選取終點，稍微向左延伸它朝起點的把手，再比較停止的過程。
- 每次只調一側；確認差異後，再處理另一側。
在速度圖表中，延長把手會改變該關鍵影格對相鄰區段的 Influence（影響程度）。同樣距離要在同樣時間內完成，若前後留更多時間慢慢走，中間通常就必須更快。它不是單純把整段動畫放慢。
切回值圖表時，把手的斜率也會影響變化速度；若曲線超出原本起點、終點數值範圍，可能出現超越或回彈。這可以是刻意的設計，但應先確認不是不小心拉過頭。
09｜想更精準？用 Keyframe Velocity 輸入數字
選取關鍵影格，開啟 Animation → Keyframe Velocity；Windows 可按 Ctrl＋Shift＋K，Mac 可按 Command＋Shift＋K。
| 參數 | 中文理解 | 調整前先知道 |
|---|---|---|
| Incoming Velocity | 進入速度 | 到達這個關鍵影格前的變化 |
| Outgoing Velocity | 離開速度 | 離開這個關鍵影格後的變化 |
| Speed | 速度 | 單位依屬性不同，例如度／秒、像素／秒 |
| Influence | 影響程度 | 對前一段或後一段過渡的影響範圍 |
可以先把兩端套用 F9，再打開視窗看目前設定。想比較更柔和的進出方式，保留速度設定，單獨將某一側 Influence 調大一點，再和原本播放比較；這是練習取捨，不是通用的最佳數值。
10｜位置動畫的路徑，和時間速度，是兩個層面
Temporal Interpolation（時間插值）決定沿途何時快、何時慢；Spatial Interpolation（空間插值）決定物件走直線還是彎線。F9 主要處理時間上的緩動，不會自動替你規劃路徑。
想讓位置路徑走直線，可在 Keyframe Interpolation 裡檢查 Spatial Interpolation；想調速度則回到圖表編輯器看時間變化。
Position 是多維屬性，值圖表的控制方式和單一數值屬性不同。需要分別調 X、Y 時，可以在 Position 上按右鍵選 Separate Dimensions（分離維度），再個別編輯 X Position、Y Position。第一次練習建議先把本篇的旋轉曲線弄懂，再處理位置。
進階還會遇到 Roving Keyframes（漫遊關鍵影格）：它讓部分空間屬性的中間點時間由相鄰點協調，適合路徑速度安排；不是本篇入門必須使用的工具。
11｜跟著 NODE 做三個版本，比較才學得會
用同一個圖層做三次練習，保留相同的起點、終點與時長：
- 線性版：Rotation 0 秒 0°、1 秒 90°，確認 Temporal Interpolation 為 Linear。
- 緩動版：選兩端按 F9，觀察起步和停止。
- 細調版：打開速度圖表，只改一側把手，觀察加速或減速分配。
再做一組 Opacity 0% 到 100%，把起點改成 Hold，比較「漸漸出現」與「突然出現」。這樣不用複雜作品，也能看出時間、數值和插值各自負責什麼。
快速排查：為什麼跟教學不一樣？
| 遇到的狀況 | 先檢查這裡 |
|---|---|
| 改了數值，整段都跟著變 | 碼錶是否啟用？是否建立了兩個不同數值？ |
| 按 F9 沒反應 | 有沒有選到關鍵影格？是否需要 Fn？可改用選單 |
| 曲線不像別人的 S 形 | 目前看的是值圖表，還是速度圖表？ |
| 找不到可拉的把手 | 先選取圖上的關鍵影格，檢查插值是否為可調的貝茲形式 |
| 每經過一個點都慢一下 | 是否把所有中間點都套了 Easy Ease？ |
| 位置莫名繞彎 | 檢查 Spatial Interpolation 和路徑控制點 |
| 突然跳變，沒有過渡 | 是否用了 Hold？ |
| 動畫整體太慢 | 先檢查兩端時間距離，不要只改曲線 |
我是 NODE。
今天先把時間點放對，再把加減速調順。曲線很漂亮是加分，動畫讀起來清楚才是重點。
