前言：本篇文章會分為四塊內容和大家分享

第一項：lottie的原理

第二項：lottie的安裝與運用

第三項：lottie的弊端

第四項：總結

第一項：lottie的原理

1.Airbnb開源了一個名叫Lottie的動畫庫,它能夠同時支持iOS,Android與ReactNative的開發。而且它還具有占用內存少，加載流暢等特點，是個極其不錯的第三方庫。

具體的操作流程如圖

Lottie 操作流程

如上圖所示，設計獅使用ae，借用bodymovin插件，就可以把設計好的動圖導出為json格式給程序猿。

bodymovin插件本身是用于網頁上呈現各種AE效果的一個開源庫

lottie所做的事情就是實現在不同移動端平臺上呈現AE動畫的方式，從而達到動畫文件的一次繪制、一次轉換，隨處可用的效果。

Lottie 官方示范

2.Airbnb 還建立的Lottie動畫網站，里面有設計師制作的動效可供參考https://www.lottiefiles.com

Lottie動畫網站

第二項：lottie的安裝與運用

1、軟件準備(以蘋果系統為例)

AE下載：http://www.gfxcamp.com/after-effects-cc-2018/

Lottie 下載：https://github.com/airbnb/lottie-ios?下載之后選擇bodymovin安裝

2. 安裝插件

下載 After Effects 插件安裝器ZXP Installer（有 Windows 和 Mac 版本）

運行ZXP Installer，按照指示拖動bodymovin.zxp到其窗口，即可安裝完成

拖動安裝bodymovin.zxp.png

安裝成功后，如圖所示：

安裝成功

3.運用

打開AE，選擇首選項的常規，勾選允許腳本寫入和訪問網絡

首選項

勾選

重啟AE

制作動圖

導出時打開窗口擴展的bodymovin

導出bodymovin

導出文件設置

導出格式選擇

第三項：lottie的弊端

不同平臺Lottie支持AE的特性，可參考Supported After Effects Features · Lottie

在使用 After Effects 制作動畫時，建議先預覽上述網頁，以知道應該使用哪些特性制作動畫，因為若使用 Lottie 還不支持的特性，如3D圖層，則 Lottie 會無法正確渲染。

由于這些限制，目前可制作的動圖更多為路徑改變的動畫，比如加載動畫、提示動畫、刷新動畫等。

第四項：總結

在做設計的過程中，遇到簡單的動效，用Lottie可以快速實現，減少前端的工作量。但是也不用過度依賴Lottie，還有gif，vedio等多種方式實現，更多關于粒子特效的可以ae制作完成讓前端寫出來。所以方法多種多樣，適合自己的就好。