# lottie Animation

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

## Lottie

##

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

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

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

‍

**靈活的 After Effects 功能**

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

‍

**以您喜歡的方式操作動畫**

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

‍

**小文件大小**

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

### Lottie 的概念

#### 如何製作Lottie動畫？

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

### Lottie 資源

#### 哪裡可以找到Lottie資源？

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

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

‍

**Tools**

* [Lottie Grabber - Chrome Extension](https://chrome.google.com/webstore/detail/lottie-grabber/picecooepnneofbeikgdaiebdlcenafn?hl=en)
* [Lottie 官方網站](https://airbnb.design/lottie/)
* [Lottiefile: Lottie 資源站](https://lottiefiles.com/)
* [After Effect plugin: Lottie](https://lottiefiles.com/plugins/after-effects)

‍

![](https://assets.website-files.com/62c7d7a668cb77eef7887249/62d5322f76f133f79403fdc5_lottie-editor-interface.png)

#### ‍

‍

![](https://assets.website-files.com/62c7d7a668cb77eef7887249/62c7d7a668cb77f52f887280_bf57026ee75af2f414000cec322f7404.gif)

**Hello.** Hope you're having a good day.\
[@erikthought](https://tentens-client-first.webflow.io/c4-animation-lottie) | Webflow MasterClass