Lottie 網頁動畫 — 輕量級動畫如何提升使用者體驗
Lottie 動畫以 JSON 向量格式儲存，檔案體積通常只有同等 GIF 的十分之一到二十分之一，卻能在任何解析度下保持銳利、支援縮放與互動控制，這是它在 2017 年由 Airbnb 開源後迅速成為網頁微互動主流方案的根本原因。它讓設計師在 After Effects 完成的動畫，不必轉成笨重影片或失真 GIF，就
Lottie 動畫以 JSON 向量格式儲存，檔案體積通常只有同等 GIF 的十分之一到二十分之一，卻能在任何解析度下保持銳利、支援縮放與互動控制，這是它在 2017 年由 Airbnb 開源後迅速成為網頁微互動主流方案的根本原因。它讓設計師在 After Effects 完成的動畫，不必轉成笨重影片或失真 GIF，就能直接在瀏覽器以原生效能播放。 Lottie 是什麼：把 After Effects 動畫變成向量 JSON Lottie 是一種以 JSON 描述向量動畫的檔案格式與播放函式庫。設計師在 Adobe After Effects 製作動畫後，透過 Bodymovin 外掛 把動畫的路徑、關鍵影格、變形與遮罩全部匯出成一份 JSON，再由 lottie-web、lottie-react 等函式庫在瀏覽器端逐格繪製。 這個格式由 Airbnb 工程團隊於 2017 年開源，並以工程師 Salih Abdul-Karim 女兒的名字「Lottie」命名，致敬德國動畫先驅 Lotte Reiniger。因為底層是向量而非點陣，Lottie 動畫在 Retina 螢幕、4K 顯示器或任意縮放比例下都不會出現鋸齒或模糊，這是 GIF 與 PNG 序列幀無法做到的。 與影片相比，Lottie 的關鍵差異在於「可程式控制」。開發者能用 JavaScript 控制播放進度、暫停於特定影格、依滑鼠位置或捲動深度改變動畫狀態，甚至動態替換顏色與文字，而不需要重新輸出檔案。 為什麼輕量：體積差距的實際數字 Lottie 最直接的效益是檔案體積遠小於傳統動畫格式。根據 「Lottie 檔案體積比同等 GIF 小最多達 96%」（來源：LottieFiles 官方） ，一段複雜的載入動畫做成 GIF 可能有 800 KB 到 2 MB，而 Lottie JSON 往往只有數十 KB。 體積之所以能壓這麼小，是因為 Lottie 儲存的是「數學描述」而非「像素資料」。GIF 要為每一影格記錄整張圖的像素，一秒 30 影格就是 30 張完整點陣圖；Lottie 只記錄「某條路徑在 0.5 秒內從 A 點移動到 B 點」這類指令，播放時才即時運算。 頁面速度直接牽動商業結果。Google 的研究指出， 「行動網頁載入時間從 1 秒增加到 3 秒，跳出率上升 32%」（來源：Think with Google） 。用 Lottie 取代肥大的 GIF 或自動播放影片，能顯著縮短首屏資源下載時間。 此外，網頁上的圖片與動畫資源佔比相當可觀。根據 「2022 年行動網頁圖片中位數傳輸量約為 900 KB」（來源：Web Almanac 2022） ，把其中的裝飾性動畫改用向量方案，是壓縮頁面重量最有感的一環。 Lottie 如何提升使用者體驗 Lottie 的 UX 價值在於用低成本製造「有意義的動態回饋」，而非單純的視覺裝飾。以下幾個場景是它最能發揮的地方。 載入與等待狀態 等待是使用者體驗中最容易產生焦慮的時刻。一個順暢的 Lottie 載入動畫能提供明確的「系統正在運作」訊號，降低使用者以為卡死而離開的機率。因為體積小，這類動畫可以內嵌在初始 HTML 或優先載入，不會反而拖慢它想掩飾的等待。 微互動與狀態轉換 按鈕點擊後的勾選動畫、收藏愛心的填色、切換開關的滑動，這些「微互動」用 Lottie 實作能精準對齊設計稿。 Nielsen Norman Group 指出，設計良好的微互動能提供即時回饋、引導操作，並讓介面感覺更靈敏可靠。Lottie 讓設計師直接交付動畫檔，減少工程師手刻 CSS 動畫與設計原意之間的落差。 捲動與互動驅動的敘事 Lottie 支援把播放進度綁定到捲動位置。使用者往下滑時，動畫依捲動深度逐格前進，常見於產品介紹頁的步驟演示。這種互動讓資訊分段揭露，比一次塞滿整頁文字更容易被理解與記住。 效能取捨：Lottie 不是零成本 Lottie 省下的是頻寬，付出的是 CPU 運算，因此用法錯誤反而會拖累效能。因為每一影格都需即時運算向量並繪製，動畫節點數過多、同時播放多個複雜 Lottie、或在低階裝置上運行時，可能造成掉幀與捲動卡頓。 渲染方式的選擇是關鍵。lottie-web 預設使用 SVG 渲染器，節點多時 DOM 會非常龐大；改用 Canvas 渲染器通常能降低複雜動畫的運算負擔。近年推出的 dotLottie（.lottie）格式 更進一步，把 JSON 以 ZIP 壓縮並可打包多個動畫與資源，體積比原始 JSON 再小一截，且新一代播放器以 Rust 與 WebAssembly 重寫渲染核心，效能更穩定。 實務上的建議是：控制動畫的圖層與節點數量、避免在單一畫面同時運行多個大型動畫、對非必要動畫加上 prefer
FAQ
Lottie 是什麼：把 After Effects 動畫變成向量 JSON
Lottie 是一種以 JSON 描述向量動畫的檔案格式與播放函式庫。設計師在 Adobe After Effects 製作動畫後，透過 Bodymovin 外掛 把動畫的路徑、關鍵影格、變形與遮罩全部匯出成一份 JSON，再由 lottie-web、lottie-react 等函式庫在瀏覽器端逐格繪製。 這個格式由 Airbnb 工程團隊於 2017 年開源，並以工程師 Salih Abdul-Karim 女兒的名字「Lottie」命名，致敬德國動畫先驅 Lotte Reiniger。因為底層是向量而非點陣，Lottie 動畫在 Retina 螢幕、4K 顯示器或任意縮放比例下都不會出現鋸齒或模糊，這是 GIF 與 PNG 序列幀無法做到的。 與影片相比，Lottie 的關鍵差異在於「可程式控制」。開發者能用 JavaScript 控制播放進度、暫停於特定影格、依滑鼠位置或捲動深度改變動畫狀態，甚至動態替換顏色與文字，而不需要重新輸出檔案。
為什麼輕量：體積差距的實際數字
Lottie 最直接的效益是檔案體積遠小於傳統動畫格式。根據 「Lottie 檔案體積比同等 GIF 小最多達 96%」（來源：LottieFiles 官方） ，一段複雜的載入動畫做成 GIF 可能有 800 KB 到 2 MB，而 Lottie JSON 往往只有數十 KB。 體積之所以能壓這麼小，是因為 Lottie 儲存的是「數學描述」而非「像素資料」。GIF 要為每一影格記錄整張圖的像素，一秒 30 影格就是 30 張完整點陣圖；Lottie 只記錄「某條路徑在 0.5 秒內從 A 點移動到 B 點」這類指令，播放時才即時運算。 頁面速度直接牽動商業結果。Google 的研究指出， 「行動網頁載入時間從 1 秒增加到 3 秒，跳出率上升 32%」（來源：Think with Google） 。用 Lottie 取代肥大的 GIF 或自動播放影片，能顯著縮短首屏資源下載時間。 此外，網頁上的圖片與動畫資源佔比相當可觀。根據 「2022 年行動網頁圖片中位數傳輸量約為 900 KB」（來源：Web Almanac 2022） ，把其中的裝飾性動畫改用向量方案，是壓縮頁面重量最有感的
Lottie 如何提升使用者體驗
Lottie 的 UX 價值在於用低成本製造「有意義的動態回饋」，而非單純的視覺裝飾。以下幾個場景是它最能發揮的地方。 載入與等待狀態 等待是使用者體驗中最容易產生焦慮的時刻。一個順暢的 Lottie 載入動畫能提供明確的「系統正在運作」訊號，降低使用者以為卡死而離開的機率。因為體積小，這類動畫可以內嵌在初始 HTML 或優先載入，不會反而拖慢它想掩飾的等待。 微互動與狀態轉換 按鈕點擊後的勾選動畫、收藏愛心的填色、切換開關的滑動，這些「微互動」用 Lottie 實作能精準對齊設計稿。 Nielsen Norman Group 指出，設計良好的微互動能提供即時回饋、引導操作，並讓介面感覺更靈敏可靠。Lottie 讓設計師直接交付動畫檔，減少工程師手刻 CSS 動畫與設計原意之間的落差。 捲動與互動驅動的敘事 Lottie 支援把播放進度綁定到捲動位置。使用者往下滑時，動畫依捲動深度逐格前進，常見於產品介紹頁的步驟演示。這種互動讓資訊分段揭露，比一次塞滿整頁文字更容易被理解與記住。
技術選型：什麼時候該用 Lottie，什麼時候不該
Lottie 最適合「向量風格、需要無限縮放清晰、體積敏感、且要能程式控制」的動畫。品牌吉祥物、圖示動畫、載入指示器、成功／錯誤狀態、onboarding 引導插畫，都是它的強項。 相對地，有幾類內容不適合硬套 Lottie。第一是寫實影像或含大量點陣素材的動畫，這類本質是像素資料，用影片編碼（如 WebM／H.265）反而更有效率。第二是極長、每秒都在變化的複雜動畫，逐格運算的 CPU 成本會超過影片解碼。第三是純粹靜態、或用 CSS 幾行就能完成的簡單過場，導入整個 Lottie 函式庫並不划算——單純的 hover 位移或淡入，原生 CSS transition 更輕。 選型時的量化判準可以這樣抓：若動畫超過三、四層複雜路徑且需在多種尺寸清晰呈現，Lottie 通常勝出；若只是單一元素的位移或透明度變化，CSS 幾乎總是更省。
相關工具書
由 FeiYueh 親自審稿驗證 · 最後更新於 2026-08-26. Independently maintained — not AI-generated boilerplate.
← Back to Blog