Lottie
======
###### tags: `Lottie`

Lottie是由Airbnb所開發的一套Liberary，基於JSON的動畫格式，目前支援AE(安裝Bodymovin套件、CC2014以上)、Figma、canva、webflow、Framer、wordpress。

LottieFiles
-----------
### 優點
1. 較小的檔案體積：相較於傳統MP4和GIF，JSON lottie大約可以減少90%的檔案大小，提升網頁反應速度和使用者體驗。
2. 延展性：向量檔讓動畫的呈現大小可自由選擇，不會出現解析度過低的問題。
3. 多平台和框架：支援iOS、Android、Web、React Native，無須修改檔案和程式。
4. 互動：內建Scroll, Click, Cursor方法，使用不同方式與動畫交互。

### 限制
由於AE效果眾多，目前部分進階特效尚未支援，不同平台所支援的項目也不完全相同，所以在設計和輸出時(尤其支援多種裝置時)記得再三確認，<a href="https://airbnb.io/lottie/#/supported-features">完整支援項目</a>。

### 各平台框架文件
- Web: https://lottiefiles.com/web-player
- Android: https://github.com/airbnb/lottie-android
- iOS: https://github.com/airbnb/lottie-ios
- React Native: https://github.com/airbnb/lottie-react-native

### 簡易Web範例

<script src=“https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js”></script>
<lottie-player src=“https://lottie.host/31b0c1dc-5ff1-45df-b96c-fa1200c8c554/QTcdtW0332.json” background=“Transparent” speed=“1” style=“width: 300px; height: 300px” direction=“1” mode=“normal” loop controls autoplay></lottie-player>

Lottie Interactivity
--------------------