Lotie是Airbnb開源的一套動畫渲染庫，可用於Web、Android，iOS。它體積小，質量高，可以實現非常漂亮的動畫。
可以先看看它所實現的動畫效果：https://lottiefiles.com/
具體來說，它可以通過Bodymovin插件解析AE（adobe After Effects）導出生成JSON文件，並在IOS、安卓、Web、React Native端實現相同的動畫效果，也就是說，設計師可以將AE中的部分動畫直接輸出給研發同學使用。
Lottie相關網站：
- Lottie 官網
- Lottie on Github
- Lottie for Android
- Lottie for iOS
- Lottie for Web
- Lottie for React Native
- Lottie for Vue
使用準備
1.1下載並安裝最新版本的 Adobe After Effects
地址：https://www.qssily.com/app/1074.html
1.2下載安裝 Bodymovin
1.2.1 要想使用Bodymovin插件，要先安裝 ZXP Installer擴展
下載地址：https://aescripts.com/learn/zxp-installer/
1.2.2 然後再下載 bodymovin 擴展
下載地址：
https://github.com/airbnb/lottie-web/blob/master/build/extension/bodymovin.zxp
1.2.3先安裝好ZXP Installer擴展，安裝好後，打開File選項，再打開（Open）剛剛下載好的bodymovin擴展
1.2.4打開Adobe After Effects，打開擴展就可以看到Bodymovin了
如何使用
安裝好必要的工具之後，我們就可以開始使用了，使用前需要給大家推一個Lottie動畫庫
LottieFiles 提供了很多設計師上傳的 Lottie 動畫，並提供預覽的效果，並且可以直接下載成 JSON ，或者生成二維碼，可供 Lottie App 掃描看效果，非常的方便。
有了這個網站，我們導出的動畫JSON文件就可以在線預覽，當然，你也可以從LootieFiles上下載動畫文件，通過Bodymovin導入AE，進行二次加工
我們在AE里製作好動畫，然後通過Lottie的Bodymovin擴展導出，導出的動畫JSON文件給到開發者使用，這就是Lottie實現動畫渲染的整個工作流程
關於Lottie的詳細使用方法，網上已經有視頻教程，這裡推薦一位字節跳動動效師出的教程，看完他的視頻，就可以掌握Lottie的用法了
地址：https://www.notion.so/heyjerio/
最後關於Lottie 動畫利弊
好處：
- Lottie 只需要解析導出的 JSON 文件及所需要的圖片，就能在各個平台上實現動畫效果，上線後可動態替換對應的 JSON 文件就能實現，可配置、可運營；
- 動畫由設計使用專業的動畫製作工具 Adobe After Effects 來實現，使動畫實現更加方便，動畫效果也更好；
- 各平台 RD 可以方便的調用動畫，並對動畫進行控制，減少 RD 動畫編程工作量；
- 還原程度好；
- 體積小，JSON 文件大小通常會比 gif、webp 文件小很多。
不足：
- 很多 AE 常用的 Effects / 特效、Layer Styles / 圖層樣式不支持，如高斯模糊、外發光等；
- 部分 AE 中的動畫屬性不支持導出，或不同系統設備展示效果不一，如 iOS 端實現的時候不能識別JSON 文件中 Alpha Inverted Matte /反向蒙版（Alpha Matte / 正向蒙版支持），但是 Android 可以識別。
- 形狀圖層的大多數屬性都支持，但比如 Merge Path / 合併路徑、Wiggle Path /扭動路徑 等還是不支持；
- 漸變支持的不好，看系統以及 Lottie 版本，需修改 JSON 代碼；
以上供參考，具體以官方更新的動畫支持情況為準；
厲害