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):物件從這個關鍵幀「離開」時加速
這兩者的搭配使用,能讓你對動畫的節奏感有更細膩的掌控。
實作練習:製作你的第一個關鍵幀動畫
理論說夠了,讓我們直接動手做。以下是一個簡單但完整的練習,幫你建立關鍵幀操作的肌肉記憶:
- 建立新合成:開啟 After Effects,新增一個 1920×1080、30fps 的合成,長度設定為 3 秒。
- 建立形狀圖層:使用矩形工具畫一個正方形(按住 Shift 拖曳),大小約 100×100 像素,放在畫面左側。
- 展開 Transform 屬性:按下圖層旁的小三角形,或直接按
P鍵展開 Position 屬性。 - 設定第一個關鍵幀:將時間指標移到第 0 秒,點擊 Position 屬性旁的碼表圖示(Stopwatch),這會在當前時間建立第一個關鍵幀。
- 設定第二個關鍵幀:將時間指標移到第 1 秒,把正方形拖曳到畫面右側。After Effects 會自動在第 1 秒建立新的關鍵幀。
- 加入緩動效果:框選兩個關鍵幀,按下
F9套用 Easy Ease。按空白鍵預覽,你會發現動畫變得更加流暢了。
恭喜!你剛剛完成了第一個關鍵幀動畫。接下來,試著對同一個物件的 Scale(按 S)和 Rotation(按 R)也加上關鍵幀,讓正方形在移動的同時縮放和旋轉。多個屬性同時變化,才是動態設計的精髓。
Graph Editor:讓動畫從「能看」變成「好看」
如果你只學一個進階功能,那一定要學 Graph Editor(曲線編輯器)。按下時間軸面板上的曲線圖示就能開啟它,這裡才是真正控制動畫節奏的地方。
Graph Editor 用一條曲線來表示屬性值隨時間的變化。曲線越陡,變化越快;曲線越平,變化越慢。你可以透過拖曳關鍵幀的控制手柄(Bezier Handle)來調整曲線形狀。
我最常用的技巧是:
- 出場動畫:把起始關鍵幀的右手柄拉長,讓物件一開始快速彈出,然後慢慢減速到定位
- 入場動畫:把結束關鍵幀的左手柄拉長,讓物件慢慢啟動,最後快速到達目的地
- 彈跳效果:在曲線上製造超過目標值再回彈的波形,模擬物理彈性
如果你想做出更進階的動態效果,可以參考 After Effects 表達式教學,用程式碼來自動化一些重複性的動畫工作。
進階練習:文字動畫與圖層排程
掌握了基本的關鍵幀操作後,來挑戰一個更有趣的練習——文字逐字出現的動畫效果:
- 輸入文字:建立一個文字圖層,輸入任何你喜歡的句子。
- 開啟 Animator:展開文字圖層,找到 Animate 選單,加入 Opacity 屬性。
- 設定 Range Selector:在 Range Selector 的 Start 屬性上設定關鍵幀:第 0 秒設為 0%,第 2 秒設為 100%。
- 調整 Opacity:將 Animator 下的 Opacity 值設為 0%。
- 套用緩動:同樣選取關鍵幀按 F9,再到 Graph Editor 微調曲線。
這就是一個基礎的文字動畫,也是 After Effects 文字動畫教學 中常見的起步技巧。當你熟悉之後,可以嘗試加入位移、縮放等更多屬性,打造出獨特的動態文字風格。
讓動畫更流暢的六個實用技巧
做了幾年動態設計,以下是我整理出來最實用的心得:
- 永遠不要用線性關鍵幀:除非你刻意想要機械感,否則所有動畫都應該至少套用 Easy Ease。這是最基本但最容易被忽略的原則。
- 遵循「12 原則」:迪士尼的動畫 12 原則(特別是 Ease In/Out、Anticipation、Follow Through)在 Motion Graphics 中同樣適用。
- 控制動畫時長:大部分 UI 動畫應該控制在 0.2 到 0.5 秒之間。太慢會讓使用者覺得遲鈍,太快則看不清楚變化。
- 善用 Null Object:當你需要同時控制多個圖層的動畫時,把它們都設為 Null Object 的子圖層,只需要對 Null 設定關鍵幀就好。
- 錯開時間(Offset):不要讓所有元素同時開始動畫。每個元素錯開 2-4 幀,能產生很棒的「波浪感」,讓畫面更有層次。
- 預覽時注意速度:按
0(數字鍵盤)進行 RAM Preview,確保動畫在真實速度下看起來也是流暢的,不要只靠手動拖曳時間軸來判斷。
從 After Effects 到實際應用
學會了關鍵幀動畫之後,你可能會想把作品應用到實際的專案中。如果你的目標是網頁動畫,強烈推薦了解 Lottie 動畫教學,它能讓你把 After Effects 的動畫直接匯出成輕量的網頁動畫格式。若你對互動式動畫有興趣,Rive 動畫教學 也是值得一看的方向。
關鍵幀是所有動態設計的基石。不管你未來想走哪個方向——品牌動畫、UI 動效、MV 特效——扎實的關鍵幀基礎都會讓你的學習路徑更加順暢。現在就打開 After Effects,從一個簡單的方塊移動開始練習吧。記住,每一個厲害的動態設計師,都是從第一個關鍵幀開始的。
繼續閱讀
Cavalry 程式驅動動畫入門教學:用節點系統打造生成式動態設計
相關文章
你可能也喜歡
探索其他領域的精選好文