After Effects 關鍵幀動畫入門教學：從零學會動態設計基礎

如果你曾經看過那些令人驚豔的動態圖形——不管是 YouTube 頻道的片頭動畫、Instagram 上的動態海報，還是網頁上流暢的 UI 過場效果——你可能會好奇：這些東西到底是怎麼做出來的？答案幾乎都指向同一個工具：Adobe After Effects，而其中最核心的概念，就是關鍵幀（Keyframe）。

我自己剛開始學動態設計的時候，光是搞懂關鍵幀就花了不少時間。但說真的，一旦你理解了關鍵幀的運作邏輯，After Effects 的大門就算是真正為你敞開了。這篇文章就是我當初希望有人能寫給我看的那種教學，從最基礎的觀念開始，一步步帶你做出流暢的動畫效果。

什麼是關鍵幀？動畫的根本原理

簡單來說，關鍵幀就是你在時間軸上標記的「狀態點」。你告訴 After Effects：「在第 0 秒的時候，這個物件在畫面左邊；在第 1 秒的時候，它要移動到畫面右邊。」After Effects 就會自動幫你計算中間每一幀的位置，產生平滑的移動效果。這個自動計算的過程叫做補間動畫（Tweening）。

你可以把關鍵幀想像成動畫的「劇本」：你只需要寫下關鍵的劇情轉折點，軟體會幫你把中間的過程填滿。不只是位置，幾乎所有屬性都可以設定關鍵幀——透明度、大小、旋轉角度、顏色，甚至是特效的參數。

After Effects 關鍵幀的基本類型

在 After Effects 裡，關鍵幀並不是只有一種。了解不同類型的關鍵幀，是做出好動畫的第一步：

線性關鍵幀（Linear Keyframe）

這是預設的關鍵幀類型，圖示是一個菱形。物件會以等速從 A 點移動到 B 點，動作非常機械、不自然。老實說，你幾乎不會想在最終作品裡使用純線性的動畫，因為現實世界中沒有東西是突然開始、突然停止的。

緩動關鍵幀（Easy Ease）

這是最常用的關鍵幀類型。選取關鍵幀後按 F9（Mac 上是 Fn + F9），就能把線性關鍵幀轉換成緩動關鍵幀，圖示會變成沙漏形狀。緩動會讓動畫在開始和結束時減速，中間加速，看起來更加自然。

Easy Ease In 與 Easy Ease Out

如果你想更精確地控制，可以單獨設定：

• Easy Ease In（Shift + F9）：物件在「到達」這個關鍵幀時減速
• Easy Ease Out（Ctrl/Cmd + Shift + F9）：物件從這個關鍵幀「離開」時加速

這兩者的搭配使用，能讓你對動畫的節奏感有更細膩的掌控。

實作練習：製作你的第一個關鍵幀動畫

理論說夠了，讓我們直接動手做。以下是一個簡單但完整的練習，幫你建立關鍵幀操作的肌肉記憶：

1. 建立新合成：開啟 After Effects，新增一個 1920×1080、30fps 的合成，長度設定為 3 秒。
2. 建立形狀圖層：使用矩形工具畫一個正方形（按住 Shift 拖曳），大小約 100×100 像素，放在畫面左側。
3. 展開 Transform 屬性：按下圖層旁的小三角形，或直接按 P 鍵展開 Position 屬性。
4. 設定第一個關鍵幀：將時間指標移到第 0 秒，點擊 Position 屬性旁的碼表圖示（Stopwatch），這會在當前時間建立第一個關鍵幀。
5. 設定第二個關鍵幀：將時間指標移到第 1 秒，把正方形拖曳到畫面右側。After Effects 會自動在第 1 秒建立新的關鍵幀。
6. 加入緩動效果：框選兩個關鍵幀，按下 F9 套用 Easy Ease。按空白鍵預覽，你會發現動畫變得更加流暢了。

恭喜！你剛剛完成了第一個關鍵幀動畫。接下來，試著對同一個物件的 Scale（按 S）和 Rotation（按 R）也加上關鍵幀，讓正方形在移動的同時縮放和旋轉。多個屬性同時變化，才是動態設計的精髓。

Graph Editor：讓動畫從「能看」變成「好看」

如果你只學一個進階功能，那一定要學 Graph Editor（曲線編輯器）。按下時間軸面板上的曲線圖示就能開啟它，這裡才是真正控制動畫節奏的地方。

Graph Editor 用一條曲線來表示屬性值隨時間的變化。曲線越陡，變化越快；曲線越平，變化越慢。你可以透過拖曳關鍵幀的控制手柄（Bezier Handle）來調整曲線形狀。

我最常用的技巧是：

• 出場動畫：把起始關鍵幀的右手柄拉長，讓物件一開始快速彈出，然後慢慢減速到定位
• 入場動畫：把結束關鍵幀的左手柄拉長，讓物件慢慢啟動，最後快速到達目的地
• 彈跳效果：在曲線上製造超過目標值再回彈的波形，模擬物理彈性

如果你想做出更進階的動態效果，可以參考 After Effects 表達式教學，用程式碼來自動化一些重複性的動畫工作。

進階練習：文字動畫與圖層排程

掌握了基本的關鍵幀操作後，來挑戰一個更有趣的練習——文字逐字出現的動畫效果：

1. 輸入文字：建立一個文字圖層，輸入任何你喜歡的句子。
2. 開啟 Animator：展開文字圖層，找到 Animate 選單，加入 Opacity 屬性。
3. 設定 Range Selector：在 Range Selector 的 Start 屬性上設定關鍵幀：第 0 秒設為 0%，第 2 秒設為 100%。
4. 調整 Opacity：將 Animator 下的 Opacity 值設為 0%。
5. 套用緩動：同樣選取關鍵幀按 F9，再到 Graph Editor 微調曲線。

這就是一個基礎的文字動畫，也是 After Effects 文字動畫教學 中常見的起步技巧。當你熟悉之後，可以嘗試加入位移、縮放等更多屬性，打造出獨特的動態文字風格。

讓動畫更流暢的六個實用技巧

做了幾年動態設計，以下是我整理出來最實用的心得：

1. 永遠不要用線性關鍵幀：除非你刻意想要機械感，否則所有動畫都應該至少套用 Easy Ease。這是最基本但最容易被忽略的原則。
2. 遵循「12 原則」：迪士尼的動畫 12 原則（特別是 Ease In/Out、Anticipation、Follow Through）在 Motion Graphics 中同樣適用。
3. 控制動畫時長：大部分 UI 動畫應該控制在 0.2 到 0.5 秒之間。太慢會讓使用者覺得遲鈍，太快則看不清楚變化。
4. 善用 Null Object：當你需要同時控制多個圖層的動畫時，把它們都設為 Null Object 的子圖層，只需要對 Null 設定關鍵幀就好。
5. 錯開時間（Offset）：不要讓所有元素同時開始動畫。每個元素錯開 2-4 幀，能產生很棒的「波浪感」，讓畫面更有層次。
6. 預覽時注意速度：按 0（數字鍵盤）進行 RAM Preview，確保動畫在真實速度下看起來也是流暢的，不要只靠手動拖曳時間軸來判斷。

從 After Effects 到實際應用

學會了關鍵幀動畫之後，你可能會想把作品應用到實際的專案中。如果你的目標是網頁動畫，強烈推薦了解 Lottie 動畫教學，它能讓你把 After Effects 的動畫直接匯出成輕量的網頁動畫格式。若你對互動式動畫有興趣，Rive 動畫教學 也是值得一看的方向。

關鍵幀是所有動態設計的基石。不管你未來想走哪個方向——品牌動畫、UI 動效、MV 特效——扎實的關鍵幀基礎都會讓你的學習路徑更加順暢。現在就打開 After Effects，從一個簡單的方塊移動開始練習吧。記住，每一個厲害的動態設計師，都是從第一個關鍵幀開始的。