UI 設計師必會動效，AE 是最高性價比工具。本文提煉動效底層邏輯：所有複雜動效皆由位移、擦除、旋轉、縮放四大基礎狀態組合變化而成。掌握四大狀態關鍵幀操作，再輔以緩動曲線、彈性表達式、父子綁定、預合成，即可構建任意高級動效。

AE 界面關鍵區域速認

標註：Project（項目）、Composition（合成/時間軸）、Timeline（圖層屬性）、Tools（工具欄）、Preview（預覽）。

PSD 導入 AE 規範

1. PS 中動效圖層必須單獨分層，不可合併。
2. 動效圖層轉為「智能對象」或保持形狀圖層，保證縮放不失真。
3. 按動效類型命名：`pos_`、`rot_`、`scl_`、`wipe_` 前綴，導入後一眼識別。

PSD 導入設置

File → Import → File → 選擇 PSD → Import As: Composition - Retain Layer Styles（合成 - 保留圖層樣式）。

雙擊 Project 面板中類型為「Composition」的項目，打開時間軸開始動效製作。

錨點歸位：動效前的必修課

選中圖層 → 選擇 Pan Behind Tool (Y) → 將錨點拖至圖層幾何中心（或按 Ctrl+Alt+Home 自動居中）。所有變換均以錨點為基準，錨點偏移會導致旋轉/縮放偏心。

四大基礎動效實操演示

旋轉動效

1. 展開圖層 → Transform → Rotation。
2. 0s 點擊秒表建立關鍵幀，2s 移動時間指針，Rotation 設 360°（或加圈數 `2x+360`）。
3. Easy Ease (F9) 平滑曲線。

位移/縮放/擦除 同理

分別對 Position/Scale/Mask Path 打關鍵幀，配合 Easy Ease 與 Graph Editor 速度曲線微調。組合四大狀態即可構建：彈性進場、卡片翻轉、列表展開、模態彈出、頁面轉場等所有 UI 動效模式。