無程式碼也能輕鬆打造專業LINE官方帳號！一鍵導入模板，讓AI助你行銷加分！
高品質動態設計已成為現代網頁和行動應用程式的必要元素，但從設計工具實現動畫傳統上需要手動工程努力。設計師在 After Effects 中建立精美的動畫，而開發人員需要花費數天時間用程式碼重現它們。Lottie 完全消除了這個差距，透過 JSON 匯出原生呈現 After Effects 動畫。
最初由 Airbnb 建立，後來由社群透過 LottieFiles 維護，Lottie 已成為跨平台動畫傳遞的行業標準。網頁版本 Lottie-web 將動畫渲染為 SVG、Canvas 或 HTML 元素，產生清晰、可縮放的結果，完全符合設計師的意圖。
工作流程非常簡單：設計師在 After Effects 中建立動畫，使用免費的 Bodymovin 外掛將其匯出為 JSON 檔案，開發人員只需幾行程式碼即可將該 JSON 載入到 Lottie 中。動畫與解析度無關，可透過程式控制，檔案大小通常以 KB 為單位，而非 GIF 或影片的 MB。
Lottie 與其他動畫格式相比如何？
在 Lottie 之前，網頁動畫格式各有重大的取捨。Lottie 結合了其前身的最佳特性，同時避免了它們的限制。
| 格式 | 檔案大小 | 品質 | 可縮放性 | 互動性 | 瀏覽器支援 |
|---|---|---|---|---|---|
| Lottie（JSON） | 小（5-50 KB） | 完美向量 | 是（SVG） | 完全控制 | 所有現代瀏覽器 |
| GIF | 大（500 KB - 5 MB） | 畫素化 | 否 | 無 | 通用 |
| CSS 動畫 | 小 | 良好 | 是 | 有限 | 現代瀏覽器 |
| 影片（MP4） | 中等 | 點陣圖 | 否 | 無 | 通用 |
| 精靈圖 | 大 | 點陣圖 | 否 | 基本 | 通用 |
Lottie 結合小檔案大小、向量品質、程式控制和跨平台支援，使其成為 UI 動畫、載入指示器、引導流程和互動式插圖的首選格式。
graph LR
A[After Effects] -->|Bodymovin 外掛| B[Lottie JSON]
B --> C[Lottie-web]
B --> D[Lottie-iOS]
B --> E[Lottie-Android]
B --> F[Lottie-React-Native]
C --> G[SVG / Canvas / HTML]
D --> H[Core Animation]
E --> I[Canvas API]
F --> J[原生橋接]
Lottie-web 的主要方法和事件有哪些？
該函式庫提供了全面的 API，用於控制動畫播放和回應動畫事件。
| 方法 | 說明 | 範例 |
|---|---|---|
lottie.loadAnimation() | 載入並初始化動畫 | loadAnimation({path: 'data.json', renderer: 'svg'}) |
animation.play() | 開始或繼續播放 | animation.play() |
animation.pause() | 暫停在當前影格 | animation.pause() |
animation.stop() | 停止並重設到影格 0 | animation.stop() |
animation.goToAndStop() | 跳轉到特定影格/時間 | animation.goToAndStop(30, true) |
animation.setSpeed() | 設定播放速度倍數 | animation.setSpeed(2) |
animation.setDirection() | 正向或反向 | animation.setDirection(-1) |
animation.destroy() | 清理資源 | animation.destroy() |
| 事件 | 觸發時機 | 使用案例 |
|---|---|---|
complete | 動畫完成 | 觸發後續動作 |
loopComplete | 每次循環結束 | 更新計數器或狀態 |
enterFrame | 每個影格 | 與其他動畫同步 |
segmentStart | 新片段開始 | 基於章節的動畫 |
DOMLoaded | 元素渲染完成 | 啟動互動處理器 |
Bodymovin 支援哪些 After Effects 功能？
Bodymovin 外掛匯出了 After Effects 功能的全面子集，但某些進階能力有限制。
| 功能類別 | 完全支援 | 部分 / 有限 |
|---|---|---|
| 形狀圖層 | 路徑、填色、描邊、漸層 | 複雜布林運算 |
| 變換 | 位置、縮放、旋轉、不透明度 | 3D 圖層變換 |
| 遮罩 | 路徑遮罩、Alpha 疊色 | 帶複雜形狀的軌道疊色 |
| 文字 | 基本文字、字型、字距 | 逐字元 3D 動畫 |
| 效果 | 投影（有限） | 大多數原生 After Effects 效果 |
| 表達式 | 基本 JavaScript 表達式 | 複雜腳本 |
常見問題
什麼是 Lottie？ Lottie 是 Airbnb 開發的開源動畫函式庫，能在網頁、Android、iOS 和 React Native 平台上原生呈現 Adobe After Effects 動畫。它解析從 Bodymovin 外掛匯出為 JSON 檔案的動畫，並使用原生圖形 API 進行渲染。
Lottie-web 支援哪些渲染器？ Lottie-web 支援三種渲染器類型：‘svg’（預設）、‘canvas’和 ‘html’。SVG 渲染器因其清晰度和可及性是大多數使用案例的推薦選擇。
如何安裝 Lottie-web？
可透過 npm 安裝：npm install lottie-web，或直接從 CDN 載入。沒有外部依賴。
Lottie 的主要方法有哪些？
包括 lottie.loadAnimation()、animation.play()、animation.stop()、animation.goToAndStop()、animation.setSpeed() 和 animation.destroy()。
什麼是 Bodymovin？ 一個免費的 Adobe After Effects 擴充功能，將動畫匯出為與 Lottie 相容的優化 JSON 檔案。
延伸閱讀
- Lottie-web GitHub 儲存庫 – 原始碼、文件和範例
- LottieFiles 文件 – Lottie 動畫和工具的社群平台
- Bodymovin After Effects 外掛 – After Effects 匯出擴充功能
- Lottie for Android – Android 渲染函式庫
- Lottie for iOS – iOS 渲染函式庫（Swift 和 Objective-C）
