軟體動畫原理：為什麼曲線編輯
這也是為什麼所有專業動畫軟體都把「曲線編輯器」放在顯眼位置：After Effects 的 Graph Editor、Blender 的 F-Curve、Cinema 4D 的 F-Curve Manager、甚至 CSS 的 cubic-bezier()。它們處理的是同一個問題：用數學描述運動的節奏。
二、曲線的數學本質：貝茲曲線如何描述時間
大部分動畫軟體的曲線編輯器，背後用的都是「三次貝茲曲線」（Cubic Bézier Curve）。這個名字聽起來很嚇人，但概念其實非常直覺：它是一條由四個控制點決定的平滑曲線，兩個端點固定，兩個中間點負責「拉」出曲線的形狀。
三次貝茲曲線與控制點：從幾何到時間
三次貝茲曲線的參數式長這樣：
B(t) = (1−t)³·P₀ + 3(1−t)²t·P₁ + 3(1−t)t²·P₂ + t³·P₃
其中 t 從 0 走到 1，P₀ 與 P₃ 是起點與終點，P₁ 與 P₂ 是控制點。在動畫軟體的圖表編輯器裡，橫軸是時間、縱軸是屬性值（或速度），而使用者拖曳的那兩個「把手」（Handles），就是 P₁ 與 P₂。
這裡有個關鍵理解：你把把手往外拉，曲線在該端的斜率就越平。斜率平代表什麼？代表該瞬間的變化率很小，也就是「慢」。反之，把手往內收或拉長，曲線在該端就會變陡，代表「快」。所以你在曲線編輯器裡做的每一件事，都是在調整「什麼時候快、什麼時候慢」。
這也解釋了為什麼曲線編輯器通常有兩種模式：
很多新手只看數值圖，覺得「曲線已經很平滑了啊」，但切到速度圖才發現速度曲線是鋸齒狀的——數值平滑不等於速度平滑，這是曲線編輯最容易踩的坑之一。
緩動函數的種類與心理學：Ease In、Ease Out 與它们的變體
在軟體與網頁領域，這些曲線常被包裝成「緩動函數」（Easing Functions），常見的有：
Linear：等速，前面講過了，除非刻意要機械感，否則少用。
這些函數不只是技術選項，它們各自對應一種心理感受。Ease Out 讓人覺得「東西被穩穩放下」，Ease In 讓人覺得「東西被吸走」，Overshoot 讓人覺得「東西很有活力」。專業的動態設計師會根據角色性格、品牌調性來選曲線，而不是無腦套用預設值。
值得一提的是，CSS 的 cubic-bezier(x1, y1, x2, y2) 就是直接把這四個控制點交給開發者，y 座標可以超過 1 或低於 0，這正是為什麼網頁上可以做出 Overshoot 效果。理解這個對照關係之後，你會發現動畫軟體與前端 CSS 其實在講同一件事，只是一個用滑鼠拖、一個用數字寫。
三、主流軟體曲線編輯器橫向評測
接下來進到本文的評測核心。不同軟體的曲線編輯器設計哲學差異很大，有的偏向「所見即所得」的圖形化操作，有的偏向「精確數值控制」，有的則把曲線當成節點系統的一部分。以下依照使用場景與功能完整度來分析。
After Effects 的圖形編輯器：業界標竿，但門檻不低
After Effects 的 Graph Editor 是動態設計領域的事實標準。它的優點非常明確：
linear()、ease()、easeInOut() 等函數直接以程式碼定義曲線，適合做程序化動畫。缺點也很明顯：學習曲線陡峭。初學者常常在圖表編輯器裡迷失方向，不知道自己在拖數值還是拖時間；把手過長會造成曲線抖動，卻不容易察覺；多個屬性同時編輯時，圖表縮放容易失控。整體而言，AE 的曲線編輯器功能最完整，但需要扎實的觀念才用得順。
Blender 的 F-Curve 與 Dope Sheet：開源界的深度控制
Blender 的動畫系統以「F-Curve」（Function Curve）為核心，每一條屬性曲線都是獨立的資料塊，可以在 Graph Editor 裡直接編輯控制點，也可以在 Dope Sheet 裡以影格為單位管理關鍵影格。它的特色是：
完全免費且跨平台，對預算有限的獨立創作者極具吸引力。
Blender 的曲線編輯器在「精確度」與「可程式化」上甚至不輸商業軟體，但它的 UI 資訊密度高，對純 2D 動態設計師來說上手成本偏高，且與向量繪圖、UI 動效的整合度不如 AE。
DaVinci Resolve Fusion 與 CSS：從節點到瀏覽器
DaVinci Resolve 的 Fusion 頁面採用節點式架構，曲線編輯藏在 Keyframes 與 Spline 面板裡，優點是能與合成節點無縫結合，適合做特效動畫；缺點是對單純的動態圖形設計來說，操作路徑偏長，圖表編輯器的互動手感也不如 AE 直覺。
至於前端領域的 CSS，雖然沒有視覺化的曲線編輯器，但 transition-timing-function 與 cubic-bezier() 讓開發者能直接以四個數字定義曲線，搭配 animation-timing-function 的 steps() 還能做出逐格動畫。實務上常搭配線上貝茲曲線工具（如 cubic-bezier.com）視覺化調整，再貼回程式碼，這其實就是一種輕量級的曲線編輯流程。
Unity 與 Unreal：遊戲引擎的動畫曲線
遊戲引擎的曲線編輯需求與影視不同：它更強調「狀態混合」與「執行期效能」。Unity 的 Animator 與 Timeline 提供 Animation Curve 編輯，可搭配 AnimationCurve API 在程式碼中產生曲線；Unreal 的 Sequencer 與 Curve Editor 則支援豐富的曲線操作與貝茲把手。
遊戲引擎的曲線通常還要處理「曲線取樣」與「烘焙」問題——因為即時運算不能像離線渲染那樣每格都套用高階曲線，所以常需要把曲線預先取樣成關鍵影格陣列。這也提醒我們：曲線編輯不只是視覺問題，還牽涉到效能與資料結構。
四、為什麼曲線編輯是專業與業餘的分水嶺
講完工具，回到更本質的問題：為什麼懂曲線的人，作品看起來就是比較「高級」？我認為可以從兩個層面來看：物理感與節奏感。
物理感與重量感：曲線如何說服觀眾
動畫的說服力來自於「觀眾相信這個東西有品質、有慣性、有重力」。而這些感受，幾乎全部由加速度曲線決定。
舉例來說，一顆球從高處落下：
反彈上升時應該減速（Ease Out），因為動能被重力抵銷。
每次反彈的高度應該越來越低，且時間間隔越來越短，這對應到曲線上振幅衰減的震盪。
如果你只用線性插值，球會像在無重力環境裡等速飄移，觀眾立刻出戲。反過來說，只要把曲線調對，即使是一顆簡單的圓形，也能讓人感覺它很重、很有彈性。這就是曲線的魔力：它用數學欺騙了視覺系統。
再舉一個 UI 動效的例子。一個按鈕被點擊後放大再縮回，如果使用 Ease Out 進場、Ease In 退場，會讓人覺得「按鈕被手指壓下去又彈回來」；如果加上一點 Overshoot，會讓人覺得「這個按鈕很有回饋感」。同樣的幾何變化，不同的曲線會產生完全不同的產品氣質。
節奏與次要動態：曲線編輯的進階思維
當你熟悉單一物件的曲線之後，下一個層次是「節奏編排」：多個物件、多條曲線之間的時間差與速度差。
專業動畫師常用「錯開」（Offset）技巧：主體開始移動後，附屬物件（如頭髮、衣角、拖尾）晚幾格才開始動，且曲線更軟、更慢。這種「次要動態」如果沒有曲線編輯幾乎做不出來，因為你需要對附屬物件設定不同的緩入緩出，讓它們看起來像被主體「帶動」。
另一個進階技巧是「曲線分層」：主運動用較陡的曲線（節奏明快），背景或次要元素用較緩的曲線（節奏沉穩），藉此建立視覺層次。這在 Motion Graphics 的片頭動畫裡非常常見，也是為什麼同樣的素材，有人做出來像廣告、有人做出來像學生作業。
五、實戰：建立自己的曲線工作流程
理解原理之後，最重要的是把它變成可重複的工作流程。以下分享幾個實務上有效的做法。
曲線庫與預設管理：不要每次從零開始
專業動態設計師幾乎都有自己的曲線預設庫。做法包括：
cubic-bezier() 定義成 CSS 自訂屬性（如 --ease-out-expo），維持整站動效一致性。建立曲線庫的好處不只是省時間，更重要的是維持風格一致性。一個品牌或一支影片如果曲線語言統一，整體質感會明顯提升。
常見錯誤與除錯：曲線編輯的五個陷阱
即使觀念正確，實作時仍然很容易踩坑。以下是最常見的五個問題：
結語：曲線是動畫的語氣，而不只是參數
回到文章開頭的那個問題：為什麼曲線編輯？因為它決定了動畫的「語氣」。同樣一句台詞，用不同的語調說出來，感受完全不同；同樣一組關鍵影格，用不同的曲線補間，傳達的質感也天差地遠。
軟體只是工具，After Effects、Blender、Resolve、Unity 各有擅場，但它們的曲線編輯器背後都是同一套數學：用貝茲曲線描述加速度，用加速度說服觀眾的眼睛。當你開始把曲線當成「表演」而不是「參數」來看待，你的動畫就會從「會動的圖」升級成「有生命的動態」。
所以，下次打開圖表編輯器時，別急著把曲線拉平。花五分鐘檢查速度圖、調整把手長度、試著讓進場與離場用不同的緩動——你會發現，那幾條彎彎曲曲的線，才是整個動畫真正的靈魂所在。
```