最近在做官網動畫時，無意間發現一個超像發現新大陸的寶藏工具 —— Lottie。

以前一直以為，網頁動畫要不是用 CSS 搞半天，不然就得拜託設計師用 AE 弄影片、轉 MP4、轉 GIF，整個超痛苦又重。

但這次我真的要說一句：

👉 原來 Lottie 不只是給設計師用的，它根本就是動畫界的 CDN 啊！

螢幕錄影 2025-05-22 上午8.51.25.mov

✅ 原來 Lottie 有這些優勢我都不知道：

  1. 有成千上萬個免費動畫可以用

    👉 LottieFiles 裡面超多開源動畫，品質都很高，幾乎想得到的都有！

  2. 根本不用會 AE！

    雖然 Lottie 的來源動畫通常是從 After Effects 輸出，但我發現有個工具叫 LottieLab，完全可以在瀏覽器編輯動畫、改顏色、加互動，而且還可以輸出成 JSON、GIF、MP4！

  3. 開發端整合爆簡單！

    只要裝一個套件 @lottiefiles/lottie-player，在 Vue、React、甚至原生 HTML 裡都能直接用 Web Component 播放動畫，還能設定 loop、autoplay、speed！

😳 原本還以為要去學 Canvas / WebGL...

身為前端我一度以為，要做出炫炮動畫一定得學 canvas 或 WebGL，那種數學一堆又超吃效能的技術。但結果發現：

👉 只用 Lottie 生態系，速度快、品質高、動畫檔案還超輕量！

尤其像下面這些情境，用 Lottie 簡直剛剛好：