2D 動畫工具怎麼選？解析 AE、Cavalry、Autograph、GSAP、Rive 各自的戰場

想做 2D 動畫，該先學哪套軟體？學 AE 嗎？還是有其他選擇？

同樣叫「2D 動畫」，做出來是一支影片、動態網頁，還是 App 裡點了會反應的介面，每一個工具都有各自的戰場：

After Effects：最通用、最成熟的產業接口

要 render 成影片的需求最大宗，影視、廣告、片頭 Title Sequence，幾乎是業界預設值。

護城河是整個產業生態。外掛、腳本、教學累積了二十年，你想得到的需求幾乎都有人寫過。出去找動態設計的工作，職缺最多的也是 AE，實拍特效合成、 3D 通道合成，配合外掛也可以出網頁動態素材、VJ 投影素材，相當萬用。

AE 也是我動態設計的生產力工具。

收費：Adobe 訂閱制，入門使用成本相較高，但資源也多。

🎬 After Effects 2026 啟動畫面｜前往 After Effects 官網 →

Cavalry：依循規則生成動畫

成品一樣是影片，但做法很不一樣。給它一套規則、素材，做動態設計的邏輯完全不同，很適合做 Data-Driven、程序型的動畫內容，入門門檻較高。

它擅長的剛好是 AE 最痛那塊。你可以餵它一整個資料夾的圖、一份試算表的數字，它照規則批次生出大量變體，填補了 AE 的弱項，被視為動態設計界的新神兵利器。

收費：2026 年 4 月被 Canva 收購後，個人版（原本要錢的 Pro）整套變成完全免費，可商用。

🎬 Cavalry 官方主視覺｜前往 Cavalry 官網 →

Autograph：MG、VFX、3D 合一

主力在整合動態、合成、2D 跟 3D 全在同一個環境裡跑。AE 雖然也摸得到 3D，但真正完整的 3D 場景處理還沒那麼成熟，Autograph 一開始就是以「合成」為主軸。定位跟 AE、Cavalry 比較近，都是做完輸出成影片，做實拍合成、特效有優勢，如果有購買 AE 裡 Maxon 的外掛，那也可以一起共用喔。

收費：Maxon 在 2026 年 4 月起，個人跟工作室都完全免費，可商用。

🎬 Autograph 官方主視覺｜前往 Autograph 官網 →

GSAP：網頁前端的霸主

GSAP 讓動畫直接在瀏覽器裡跑，用途和主流軟體相差蠻多的，不是用影片做主要格式。

擅長互動網站、landing page、web 廣告。它最有名的功能是 ScrollTrigger，能把動畫綁在使用者的捲動上，網頁往下滑、畫面就跟著演，現在很多作品集網站那種「滑一下動一下」的效果就是它做的。

嚴格說它算一套寫網頁動畫的 JavaScript 工具，比較不像傳統認知的動畫軟體。但隨著 Product Design 的領域越擴張越快，前端的動畫工具也逐漸受到關注。官網的 Demo 非常舒服，有很多 Fancy 的動畫效果， AE 要逆向工程回去做可能還沒那麼容易。

收費：2024 年被 Webflow 收購後，2025 年 4 月起全部免費，連以前要付費的進階 plugin 都開放，商用也不用錢。

🎬 GSAP 官方主視覺｜前往 GSAP 官網 →

Rive：做完直接塞進 App、遊戲

更往互動走一步。Rive 的成品是一個能即時反應的元件，使用者點了、滑了，它會動，做起來比較像在設計介面，適合 UI&UX 設計師入手。

它的核心是 State Machine，你可以把一顆按鈕的「正常、滑過、按下」幾個狀態跟之間的轉場都先設計好，丟進產品裡，它就照使用者的操作自己切換，工程師不用再一格一格刻動畫。擅長 App UI、遊戲介面、產品裡會回應操作的動畫。許多 APP 裡順暢的角色動態都是透過 Rive 完成的（Duolingo 對就是情勒貓頭鷹），也是這幾年熱門的工具之一。

收費：有免費方案可以在編輯器裡學跟做，要正式輸出商用，從 Cadet 方案月費約 9 美金起（年繳）。

🎬 Rive 官方主視覺｜前往 Rive 官網 →

寫在最後

跟我剛入行那時候比，動畫軟體已經多到不一樣了。以前大家擠在同一套工具裡，對應各種不同的輸出格式傷腦筋，現在工具跟著職業分化，各自長出自己的戰場。

先了解自己的產業跟角色定位在哪，影視廣告、做品牌動態系統、寫互動網頁，還是做產品介面？想清楚你才知道該先從哪一套開始摸喔。

各工具官網，想深入可以自己去逛逛：

延伸學習：《超越技術的動態思維》（Motioner 二樓知學）。這篇講的是選工具，但工具會換，真正帶得走的是背後怎麼判斷、怎麼想動態的那套思維，那也是這堂課的主軸。

3分鐘用 AI X AE MCP 製作高難度動畫：棋盤翻轉（附 AEP）

今天試了個東西。打開 AE 開一個空專案，丟給 Claude 一段很口語的 prompt：

棋子顏色正面藍色、背面黃色，Null 移動到某個位置時，棋子 3D layer 翻成背面，有厚度可用 C4D render 做 extrude，距離強度可以用控制器，底色奶油白，網格線淡灰。

就這樣自然語言中文描述。

如果用傳統做法可能還要先翻翻教學，或是問 AI 怎麼搭。但這次的結果，BOOM，3 分鐘直接搭完。

附上完成版截圖：

用 Claude 加 AE MCP 做的 Othello 棋盤翻轉動畫，8×8 圓盤隨 controller 距離依序翻面的動態示範

8×8 個圓盤排成棋盤，拖一個 controller 在上面掃，附近的圓盤會自動翻面，從藍翻到黃，畫出一道軌跡。

你如果用手 keyframe 試試看：

  • 64 顆圓盤都要各自打進場、翻轉、出場

  • 每顆翻轉時機要按它跟 controller 的距離算

  • 每顆要有 3D 厚度、翻轉的側邊角度要對

  • controller 還要能即時調影響範圍、翻轉強度、厚度

但一條 expression 加一段腳本，從零到能動，3 分鐘搞定。

為什麼這支動畫適合 AI？

不是所有動畫都適合丟給 AI 做，但這支特別適合，原因有兩個。

1. 它本質上是「規則」，不是「表演」

我說不出第 17 顆圓盤要在第幾幀翻到幾度，但我說得出規則：「距離 controller 越近，翻越多。距離超過半徑，不翻。」

只要規則寫得出來，AI 就能把它翻譯成 expression。

我反而覺得，「能不能把動畫講成規則」是一個很實用的設計能力，我們以前都是用眼睛、用手感在做，但其實很多動畫底層是有結構的，把結構講清楚，就能交出去給機器跑。

而程式碼這種「規則翻譯」，剛好是 AI 最擅長的領域。

2. 它需要批次 + 可調

64 顆圓盤每顆都要建 parent null、雙層 disk、加 3D 屬性、套 expression。光是 layer 就要建快 200 個。

人手做這種事情會崩潰，但腳本一個 for 迴圈就跑完。

而且我做這支不是為了讓它播一次就好。我想讓它變成可以隨便調的小玩具：拖 controller、調影響範圍、調翻轉強度、調厚度。

這已經不太像「動畫」，比較像「介面」。AI 對介面邏輯熟得很。

我目前的研究方向

回到最一開始那個有點累的狀態：AI 跟設計師到底是替代還是並存？

我自己的答案是並存，但我們需要重新畫這條線。

過去十年，動態設計師的核心競爭力是「會用工具」，現在 AI 已經會用工具了。

未來十年的競爭力，我覺得是「能不能講出規則，然後交給機器跑」，加上「保留那些講不出規則、需要手感的部分」。

兩個都要練。

而且這條線會一直動。我這篇寫的是 2026 年 6 月的分界，下個月、明年呢？誰知道。所以我才想把這些實驗一個一個記下來，方便自己回頭看，也方便有興趣的同行對照。

同場加映 AEP 原始檔，分享給大家玩看看，點此下載 AEP 原始檔（zip）。

作者：陳柏尹（PoYin），動態設計師，專注於把 AI 接進日常設計與動態工作流。

延伸學習：《超越技術的動態思維》（Motioner 二樓知學）。進階動態課，從經典案例分析講到設計思維；工具能省力，但背後的判斷力才是這堂課的主軸。

一秒做出遮罩進場動畫：我用 AI 開發到上架的 AE 小工具 Auto Matte Animator

在 After Effects 裡做遮罩進場（mask reveal）動畫，雖然不難，但每次都要手動畫遮罩、設兩個關鍵格、調進場節奏，重複做就很煩。

所以有了懶人救星 Auto Matte Animator，選好圖層按一下，就生出一段遮罩進場動畫。

比起工具本身，我覺得更有意思的是：這個工具從開發、做封面、寫文案到上架 Gumroad，幾乎是我跟 AI 一條龍做完的。

Auto Matte Animator 怎麼來的

遮罩進場是動態設計裡超常見的基本款，像是文字進出場或色塊遮罩表演：

  • 手動畫一個遮罩範圍

  • 設好起點與終點兩個關鍵格

  • 再去調進場的時間與節奏

單看一次沒什麼，但一支片裡這種進場可能做幾十次，時間就這樣被磨掉了。

Auto Matte Animator 做的事：選好圖層，按一下，直接生出一段遮罩進場動畫。
還附帶我自己手工拉過的曲線，讚的，還可以決定上下左右方向，舒服。

怎麼安裝與使用？

Auto Matte Animator 是 .jsx 腳本：

  • 搭配 KBar 等工具設快捷鍵，選圖層按一下最順

  • 或上方工具列 File > Scripts > Run Script File 執行

下載連結（免費）：Auto Matte Animator on Gumroad

真正有趣的：用 Claude 從開發到上架一條龍

對我來說，這個工具最值得分享的不是功能，而是整個「做出來再賣出去」的過程，幾乎都有 AI 在旁邊幫忙。我把它拆成四段：

  1. 開發工具：把需求講給 Claude，跟它討論邏輯、生出 .jsx 腳本。出一張嘴邊測邊修，像個一直加功能的甲方，連工具的視窗介面都能一起生出來。

  2. 生封面圖、寫介紹文案：在對話裡描述風格就能生封面圖、做 resize。寫產品介紹更省，直接把 .jsx 丟給它，它讀懂功能後能寫出大約七成的中英文文案，我再潤。

  3. 操作網頁上架：開瀏覽器去 Gumroad 填表單、上傳檔案這些步驟，AI 也能直接幫忙跑，我只要修內文跟排版，按下發佈。

  4. 下一步：吃 Gumroad 的名單建立熟客、自動分享電子報，還有很多可以玩。

這裡是我的觀察：「做工具」跟「上架推廣」其實包含一大堆判斷與決策，（還有完美主義、冒牌者心理之類的），這些才是阻力最大的工作。AI 把這些工作的摩擦力降到很低，讓我這種會拖延的人真的有辦法把東西做完、推出去。

FAQ

Q：Auto Matte Animator 跟自己手動做遮罩進場差在哪？
差在把畫遮罩、設關鍵格、調進場那幾步收成一鍵，尤其是平常要拉出穩定大小色塊還蠻麻煩的。動畫的細節節奏你還是可以再調，它幫你省掉的是每次都要重來的那段重複勞動。

Q：開發這種工具一定要會寫程式嗎？
不用。我不是工程師，是把需求講給 Claude、由它生腳本，我負責測試跟提修改。會基礎概念會更順，但不是門檻。

Q：免費嗎？
免費，到上面的 Gumroad 連結就能下載。

寫在最後

對我來說，AI 最大的價值不是讓工具變得多神，而是把「做工具」跟「把它推出去」這兩段摩擦力最大的工作，變得我真的願意去做。工具會放大你已經有的能力，而 AI 降低的是你動手的阻力。

之後我會繼續分享其他用 AI 做的 AE 小工具跟工作流，有興趣歡迎收藏網站、常回來看看。

作者：陳柏尹（PoYin），動態設計師，專注於把 AI 接進日常設計與動態工作流。

延伸學習：《超越技術的動態思維》（Motioner 二樓知學）。進階動態課，從經典案例分析講到設計思維；工具能省力，背後的判斷力才是這堂課的主軸。

AE 手動加 Solid 背景好煩？ Flex-solid 一鍵搞定

在 After Effects 裡每天右鍵新增一塊 Solid 當背景，還要手動拖到圖層最底，想改顏色又得進 Solid Settings 翻半天。光這幾個動作，一天重複幾十次。我把這個煩惱丟給 AI，做了一個免費小工具 Flex-solid：

按一下生成一塊背景 Solid，自動移到最底層，還會跟著 comp 尺寸一起變動，順便內建調色。

Flex-solid 解決什麼問題？

  • 直接生成一塊 Solid，自動移到圖層最底層，不用手動拉

  • 預先套上一個 Fill 特效，之後改顏色直接在特效面板調，不用回 Solid Settings

  • 不管 comp 尺寸怎麼改，Solid 都會跟著變，不會發生「改了畫布大小卻還要再改背景」的麻煩

怎麼安裝與使用？

Flex-solid 是一個 .jsx 腳本，兩種用法：

  • 搭配 KBar 等工具設快速啟動鍵（如示範影片），按一下就生成，最推薦

  • 上方工具列 File > Scripts > Run Script File，選取 .jsx 執行

下載連結（免費）：Flex-solid on Gumroad

不是工程師，也可以用 AI「許願」做出工具

只要把「這個動作好煩」直接講給 GPT 或 Claude 聽，跟它討論邏輯、請它生出 .jsx，再像個一直加需求的甲方邊測邊改弄出來的。

工具不一定要很強、很炫，能省掉你每天重複幾十次的小動作，累積起來就是實實在在地降低工作摩擦力，「把重複動作自動化」這種等級的需求，現在真的很好下手。

FAQ

Q：做這種工具一定要會寫程式嗎？
不用。我自己不是工程師，是把需求講清楚給 AI，由它生腳本、我負責測試跟提修改。會一點基礎概念會更順，但不是門檻。

Q：Flex-solid 跟直接開一塊 Solid 差在哪？
差在自動置底、內建 Fill 方便調色，還有最關鍵的：comp 尺寸改了它會跟著變，不會出現背景沒跟上的破圖。

Q：要錢嗎？怎麼拿？
免費，到上面的 Gumroad 連結就能下載。

寫在最後

如果你也在 AE 裡有一個「每次都要手動做、有夠煩」的小動作，不妨先把它寫下來，丟給 AI 許願看看吧。

之後我還會陸續分享其他用 AI 做的 AE 小工具，有興趣的話歡迎收藏這個網站，常回來看看。

作者：陳柏尹（PoYin），動態設計師，專注於把 AI 接進日常設計與動態工作流。

延伸學習：《超越技術的動態思維》（Motioner 二樓知學）。進階動態課，從經典案例分析講到設計思維；工具能省力，但背後的判斷力才是這堂課的主軸。