Lottie 動畫教學：從 After Effects 到網頁動效的完整指南

如果你是動態設計師，一定有過這種經驗：辛苦在 After Effects 做好的動畫，交給前端工程師之後，要嘛變成很大的 GIF 檔，要嘛被說「這個實作不了」。Lottie 就是為了解決這個問題而誕生的。

我在接網頁動效的案子時，Lottie 已經變成了標配工具。這篇會從動畫製作到前端實作，完整帶你走一遍 Lottie 的工作流程。如果你對動態設計產業有興趣，推薦也看看一人動畫工作室如何運用 AI 工具創造百萬營收的故事。

什麼是 Lottie 動畫

Lottie 是 Airbnb 在 2017 年開源的動畫格式。它的核心概念很簡單：把 After Effects 的動畫匯出成一個輕量的 JSON 檔案，然後用前端的 Lottie 播放器渲染。

一個 Lottie 動畫檔通常只有幾十 KB，但可以做到和原始 AE 動畫幾乎一模一樣的效果。而且因為是用向量渲染的，不管放大多少倍都不會模糊。

為什麼選 Lottie 而不是 GIF 或影片

快速比較一下：

GIF：檔案大、畫質差、色彩有限（256 色）、不支援透明度漸變。一個 5 秒的動畫 GIF 可能就要 2-5 MB。

影片（MP4/WebM）：畫質好但檔案大、不支援透明背景（WebM 可以但相容性差）、不容易做互動控制。

CSS/JS 動畫：輕量、互動性強，但複雜動畫的開發成本極高。

Lottie：檔案小（通常 < 100KB）、向量無限縮放、支援透明背景、可以用 JS 控制播放/暫停/進度、跨平台（Web、iOS、Android、React Native）。

唯一的缺點是 Lottie 不支援所有 AE 特效（像粒子系統、3D 圖層等），但日常的 UI 動效和 Motion Graphics 都能處理。

After Effects 動畫製作要點

在 AE 裡做動畫的時候，有幾個 Lottie 友好的原則要注意：

支援的功能

• 形狀圖層（Shape Layers）— 最推薦使用
• 純色圖層搭配遮罩
• 預合成（Pre-comp）
• 基本的 Transform 動畫（位置、縮放、旋轉、透明度）
• Trim Paths（路徑修剪）
• 漸層填色和描邊
• 速度曲線（Easing）

不支援或有問題的功能

• 3D 圖層
• 表達式（部分支援，但建議避免）
• 特效（模糊、發光、粒子等）
• 圖層樣式（投影、外光暈等）
• 音訊

我的建議是：儘量用形狀圖層和基本動畫做。如果一個效果必須用特效才能達成，考慮把那部分用 CSS 在前端實作。

使用 Bodymovin 匯出 JSON

匯出 Lottie 需要安裝 Bodymovin 外掛（現在也叫 LottieFiles for After Effects）：

1. 在 AE 中打開 Window → Extensions → Bodymovin
2. 選擇要匯出的合成（Composition）
3. 選擇輸出目錄
4. 點擊 Render

匯出後會得到一個 .json 檔案。你可以到 lottiefiles.com 的預覽器上傳測試，確認動畫是否正確。

2025 年之後，Lottie 官方推出了 dotLottie 格式（.lottie），它是 JSON 的壓縮版，檔案大小可以再減少 60-80%。Bodymovin 現在也支援直接匯出 .lottie 格式。

前端整合：lottie-web 與 React

前端使用 Lottie 最常用的是 lottie-web 這個 library：

npm install lottie-web

基本用法：

import lottie from 'lottie-web';

const animation = lottie.loadAnimation({
  container: document.getElementById('lottie-container'),
  renderer: 'svg', // 或 'canvas'、'html'
  loop: true,
  autoplay: true,
  path: '/animations/my-animation.json'
});

如果你用 React，可以用 lottie-react 這個封裝：

import Lottie from 'lottie-react';
import animationData from './my-animation.json';

function MyComponent() {
  return <Lottie animationData={animationData} loop={true} />;
}

renderer 的選擇：svg 品質最好、支援互動，適合大部分場景；canvas 效能較好，適合大量動畫或手機端；html 最輕量但功能最少。

DotLottie 格式與效能優化

如果你在意效能（你應該要在意），dotLottie 格式值得了解：

• 使用 @dotlottie/react-player 或 @lottiefiles/dotlottie-web
• 檔案大小比 JSON 小 60-80%
• 支援多個動畫打包在一個檔案中
• 支援主題切換（深色/淺色模式）

其他效能優化技巧：

• 降低動畫的尺寸和幀率（24fps 通常就夠了）
• 減少不必要的關鍵幀
• 合併相似的形狀圖層
• 在手機端用 canvas renderer 取代 svg
• 對螢幕外的動畫暫停播放

互動控制與事件監聽

Lottie 不只是播放動畫，你還可以用 JavaScript 做各種互動控制：

// 播放控制
animation.play();
animation.pause();
animation.stop();

// 跳到特定幀
animation.goToAndStop(30, true); // 跳到第 30 幀

// 設定播放速度
animation.setSpeed(2); // 兩倍速

// 設定播放方向
animation.setDirection(-1); // 倒放

// 事件監聽
animation.addEventListener('complete', () => {
  console.log('動畫播放完成');
});

animation.addEventListener('loopComplete', () => {
  console.log('一輪播放完成');
});

實用場景：滾動觸發（配合 Intersection Observer）、Hover 播放、進度條控制、按鈕點擊後的動態回饋等。

LottieFiles 平台與資源

LottieFiles（lottiefiles.com）是 Lottie 生態系最重要的平台。你可以在上面：

• 瀏覽數萬個免費 Lottie 動畫素材
• 線上預覽和編輯動畫（改顏色、速度等）
• 團隊協作管理動畫資源
• 使用 Lottie Editor 直接在瀏覽器中修改動畫

如果你趕時間或不會用 AE，直接從 LottieFiles 找合適的素材修改，也是一個很實際的做法。

常見問題與除錯

1. 動畫在 AE 正常但匯出後不對：通常是用了不支援的特效。在 AE 裡逐一關閉圖層，找出問題圖層
2. JSON 檔案太大：檢查是否有嵌入的點陣圖。Lottie 最適合純向量動畫，有圖片的話改用 dotLottie 格式
3. 動畫卡頓：減少圖層數量、降低解析度、改用 canvas renderer
4. 顏色不一致：檢查 AE 的色彩空間設定，確保使用 sRGB

結語

Lottie 真正做到了「設計師做動畫，工程師無痛整合」。如果你是動態設計師，學會 Lottie 工作流程，你的市場價值會明顯提升——因為你交出來的東西不再只是漂亮的 Demo，而是可以直接用在產品上的。

如果你是前端工程師，了解 Lottie 可以讓你在處理動效需求時多一個強大的選擇。與其花三天用 CSS 寫一個複雜動畫，不如讓設計師用 AE 做好，你五分鐘就整合完。