# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tenten.co/docs-webflow/webflow-101/4-yuan-su-de-lei-xing/lottie-animation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.