lottie Animation

C4: 網頁動畫新未來：Lottie檔案更小讀取更快

Lottie

像 gif 但比 gif 更好。Lottie 是Airbnb 開源的跨平台動畫函式庫，設計師在 AE 製作好動畫之後，使用 Lottic 提供的 Bodymovin 插件將設計好的動畫導出成 JSON 格式，就可以直接運用在 iOS、Android、Web 和 React Native之上，無需其他額外操作。

Lottie: 檔案更小, 更便利可輕易攜帶的動畫檔案

根據Lottie官網的歷史資料，其實這個技術開發長達十年，從沒沒無名的技術，經過微軟以及許多大公司的支援，Lottie能夠在電腦與手機上順暢運作沒有問題，踏出了成功的第一步。接著Adobe After Effect軟體也提供了Lottie的插件，可以透過After Effect輸出高品質的動畫。

‍

靈活的 After Effects 功能

我們目前支持實體、形狀圖層、蒙版、alpha 遮罩、修剪路徑和虛線圖案。我們將定期添加新功能。

‍

以您喜歡的方式操作動畫

您可以前進、後退，而且最重要的是，您可以對動畫進行編程以響應任何交互。

‍

小文件大小

在您的應用程序中捆綁矢量動畫，而不必擔心多維或大文件大小。或者，您可以通過從 JSON API 加載動畫文件與應用程序代碼完全分離。

Lottie 的概念

如何製作Lottie動畫？

Lottie的優勢在於向量動畫的效果，因此在Lottie的官網可以看到大多數的Lottie都是以向量為主的作品，向量動畫的優勢早在Flash時代就很明顯了：可以任意縮放大小，不受到顯示器的尺寸限制，畫質也不受縮放影響，也更易於達成設計師想要的高幀(高影格速率)作品。

Lottie 資源

哪裡可以找到Lottie資源？

沒有開發經驗的人，最快的入門方式永遠是先參考，後學習。到 lottiefiles.com 可以看到海量的免費資源可以下載使用。大家或許最想淘寶的地方是下載區，但其實lottiefiles.com 還有很多資源如論壇與免費工具等，可以提升你的動畫設計能力。

Lottie有一個很簡易的編輯功能，你可以將Lottie的檔案透過 lottie editor 編輯器，隨意的改變元素中的顏色配置，但請注意編輯器不是開發工具，頂多是改變顏色或是添加文字，不能調整作品的時間軸或元件原有位置。

‍

Tools

• Lottie Grabber - Chrome Extension

• Lottie 官方網站

• Lottiefile: Lottie 資源站

• After Effect plugin: Lottie

‍

‍

‍

Hello. Hope you're having a good day. @erikthought | Webflow MasterClass