項目中為了優化使用者體驗加入了幾處微互動動畫，過期的流程都是設計輸出合成的雪碧圖，前端通過序列幀實作動畫效果，如下圖動畫效果：
序列幀
動畫效果
幀動畫的缺點和局限性比較明顯，合成的雪碧圖檔案大，且在不同螢幕分辨率下可能會失真。經調研發現，Lottie是個簡單、高效且性能高的動畫方案。
Lottie是可應用于Android, iOS, Web和Windows的庫，通過BodyMovin解析AE動畫，并導出可在移動端和web端渲染動畫的json檔案。換言之，設計師用AE把動畫效果做出來，再用Bodymovin導出相應地json檔案給到前端，前端使用Lottie庫就可以實作動畫效果。
BodyMovin插件的安裝與使用
1. 關閉AE
2. 下載下傳并安裝ZXP installer
https://aescripts.com/learn/zxp-installer/
3. 下載下傳最新版bodymovin插件
https://github.com/airbnb/lottie-web/blob/master/build/extension/bodymovin.zxp
4. 把下載下傳好的bodymovin.zxp拖到ZXP installer
5. 打開AE，在菜單首選項->正常中勾選:ballot_box_with_check:允許腳本寫入檔案和通路網絡（否則輸出JSON檔案時會失敗）
6. 在AE中制作動畫，打開菜單視窗->拓展->Bodymovin，勾選要輸出的動畫，并設定輸出檔案目錄，點選render
7. 打開輸出目錄會看到生成的JSON檔案，若動畫裡導入了外部圖檔，則會在images中存放JSON中引用的圖檔
前端使用lottie
靜态URL
https://cdnjs.com/libraries/lottie-web
NPM
調用loadAnimation
vue-lottie
也可以在vue中使用lottie
loadAnimation參數
container
用于渲染動畫的HTML元素，需確定在調用loadAnimation時該元素已存在
renderer
渲染器，可選值為'svg'（預設值）/'canvas'/'html'。svg支援的功能最多，但html的性能更好且支援3d圖層。各選項值支援的功能清單在此(https://github.com/airbnb/lottie-web/wiki/Features)
loop
預設值為true。可傳遞需要循環的特定次數
autoplay
自動播放
path
JSON檔案路徑
animationData
JSON資料，與path互斥
name
傳遞該參數後，可在之後通過lottie引用該動畫執行個體
rendererSettings
可傳遞給renderer執行個體的特定設定，具體可看(https://github.com/airbnb/lottie-web/wiki/Renderer-Settings)
Lottie動畫監聽
Lottie提供了用于監聽動畫執行情況的事件：
complete
loopComplete
enterFrame
segmentStart
config_ready(初始配置完成)
data_ready（所有動畫資料加載完成）
DOMLoaded（元素已添加到DOM節點）
destroy
可使用addEventListener監聽事件
控制動畫播放速度和進度
可使用anm.pause和anm.play暫停和播放動畫，調用anm.stop則會停止動畫播放并回到動畫第一幀的畫面。
使用anm.setSpeed(speed)可調節動畫速度，而anm.goToAndStop(value, isFrame)和anm.goToAndPlay可控制播放特定幀數，也可結合anm.totalFrames控制進度百分比，比如可傳anm.totalFrames - 1跳到最後一幀。
這樣的好處是可以把相關聯的JSON檔案合并，通過anm.goToAndPlay控制動畫狀态的切換，如下圖例中一個JSON檔案包含了2個動畫狀态的資料：
圖檔資源
JSON檔案裡assets設定了對圖檔的引用：
若想統一修改靜态資源路徑或者設定成絕對路徑，可在調用loadAnimation時傳入assetsPath參數：
功能支援清單
即使用bodymovin成功輸出了JSON檔案（沒有報錯），也會出現動效不如預期的情況，比如這是在AE中建構的形象圖：
但在頁面中渲染效果是這樣的：
這是因為使用了不支援的Merge Paths功能
是以對設計師而言，建立Lottie動畫和往常制作AE動畫有所不同，此文檔記錄了Bodymovin支援輸出的AE功能清單，動畫制作前需跟設計師溝通好，根據動畫加載平台來确認可使用的AE功能。
盡量遵循官方文檔裡對設計過程的指導和建議
動畫簡單化。建立動畫時需時刻記着保持JSON檔案的精簡，比如盡可能地綁定父子關系，在相似的圖層上複制相同的關鍵幀會增加額外的代碼，盡量不使用占用空間最多的路徑關鍵幀動畫。諸如自動跟蹤描繪、顫動之類的技術會使得JSON檔案變得非常大且耗性能。
建立形狀圖層。将AI、EPS、SVG和PDF等資源轉換成形狀圖層否則無法在Lottie中正常使用，轉換好後注意删除該資源以防被導出到JSON檔案。
設定尺寸。在AE中可設定合成尺寸為任意大小，但需確定導出時合成尺寸和資源尺寸大小保持一緻。
不使用表達式和特效。Lottie暫不支援。
注意遮罩尺寸。若使用alpha遮罩，遮照的大小會對性能産生很大的影響。盡可能地把遮罩尺寸維持到最小。
動畫調試。若輸出動畫破損，通過每次導出特定圖層來調試出哪些圖層出了問題。然後在github中附上該圖層檔案送出問題，選擇用其他方式重構該圖層。
不使用混合模式和亮度蒙版。
不添加圖層樣式。
全屏動畫。設定比想要支援的最寬螢幕更寬的導出尺寸。
設定空白對象。若使用空白對象，需確定勾選可見并設定透明度為0%否則不會被導出到JSON檔案。
預覽效果
由于以上所說的功能支援問題會導緻輸出動畫效果不确定性，設計師和前端之間有個動畫效果聯調的過程，為了提高聯調效率，設計師可先進行初步的效果預覽，再把檔案傳遞給前端。
方法1:輸出預覽HTML檔案
渲染前設定所要渲染的檔案
勾選☑️Demo選項
在輸出的檔案目錄中就可找到可預覽的demo.html檔案
方法2:LottieFiles分享平台
把生成的JSON檔案傳到LottieFiles平台，可播放、暫停生成檔案的動畫效果，可設定圖層顔色、動畫速度，也可以下載下傳lottie preview用戶端在iOS或Android機子上預覽。
LottieFiles平台還提供了很多線上公開的Lottie動畫效果，可直接下載下傳JSON檔案使用
互動hack
Lottie的不足之處是沒有對應的API操縱動畫層，若想做更細化的動畫處理，隻能直接操作節點來實作。比如當播放完左圖動畫進入驚訝狀态後，若想實作右圖随滑鼠移動而控制動畫層的簡單效果：
開啟調試面闆可以看到，lottie-web通過使用标簽的transform屬性來控制動畫：
當元素已添加到DOM節點，找到想要控制的标簽，提取其transform屬性的矩陣值，并使用rematrix解析矩陣值。
監聽滑鼠移動，設定新的transform屬性值。
進一步優化
看到一個方法，在AE中将圖層命名為#id格式，生成的SVG相應的圖層id會被設定為id，命名為.class格式，相應的圖層class會被設定為class
試了下的确可以，如下圖，是以可通過這個方法快速找到需要操作的動畫層，進一步簡化代碼：
小結
Lottie的缺點在于若在AE動畫制作的過程不注意規範，會導緻資料檔案大、耗記憶體和性能的問題；Lottie-web的官方文檔不夠詳盡，例如assetsPath參數是在看源碼的時候發現的；開放的API不夠齊全，無法很靈活地控制動畫層。
而優點也很明顯，Lottie能幫助提高開發效率，精簡代碼，易于調試和維護；資源檔案小，輸出動畫效果保真；跨平台——Android, iOS, Web和Windows通用。
總的來說，Lottie的引用可以替代傳統的GIF和幀動畫，靈活利用好提供的屬性和方法可以控制動畫的播放，但需注意規範設計和開發的流程，才可以更高效地完成動畫的制作與調試。