需求場景：
【1】動畫效果太難實(shí)現(xiàn)，或者實(shí)現(xiàn)后速度很慢
【2】動畫效果很復(fù)雜又不想用gif或者視頻加載，卡頓問題
【3】安卓，ios，web三端需要統(tǒng)一動畫效果
那么Lottie你值得一試！只要設(shè)計師能做出來你代碼就能100%還原效果！
核心：
是設(shè)計師用AE制作動畫，并且導(dǎo)出json文件，前端只需要使用Lottie框架去加載其json即可
原理：
Lottie將json動畫文件轉(zhuǎn)化為svg渲染在瀏覽器（SVG 是一種基于 XML 語法的圖像格式，全稱是可縮放矢量圖（Scalable Vector Graphics）。其他圖像格式都是基于像素處理的，SVG 則是屬于對圖像的形狀描述，所以它本質(zhì)上是文本文件，體積較小，且不管放大多少倍都不會失真）
使用：
【1】設(shè)計師參考：
LottieJS動畫的安裝與使用 - 簡書
AE插件bodymovin如何安裝 - 簡書
有這個兩個應(yīng)用后就可以開始制作動畫效果了，如果只是簡單的路徑位置，動畫曲線、透明等問題在制作完成后打開bodymovin，選中要導(dǎo)出的文件，選擇位置點(diǎn)擊 render即可。
需要注意的是lottie不能萬能的，加入特效插件的無法實(shí)現(xiàn)，預(yù)合成的文件無法識別，因此需要設(shè)計師在做動效時需要用最簡單、最近本的方法實(shí)現(xiàn)動畫效果。
還有因?yàn)閎odymovin的影響漸變色可能是黑白漸變，這時需要通過修改json文件來修改漸變色，后面會提到。
適用范圍
即便是用ae最簡單的工具制作，但是Lottie也只能實(shí)現(xiàn)部分效果，web端的使用范圍大很多，但是ios和安卓有一些限制，大家在制作前最好看看哪些效果無法實(shí)現(xiàn)，比如我之前就在這遇到個坑，用了蒙版擴(kuò)展，但是ios不知道擴(kuò)展的功能，費(fèi)了很長時間，下面附上鏈接
點(diǎn)我查看各端支持范圍
Lottie 動畫里有圖片怎么辦？設(shè)計師小姐姐也能幫你減少開發(fā)量！
Lottie的避坑指南 | 寫給設(shè)計師的Lottie使用技巧_動畫
想用 Lottie 做動畫？先收下這份常見錯誤和解決方法總結(jié) - 優(yōu)設(shè)網(wǎng) - UISDC
Lottie和Bodymovin輸出動畫 完美實(shí)現(xiàn)漸變方案|UI|教程|威武小帥哥 - 原創(chuàng)文章 - 站酷
附：
通過這個網(wǎng)站可以預(yù)覽你的json文件，不過這里默認(rèn)是web端，ios端和安卓端可以下載應(yīng)用，lottie files 下載。
使用方法：在網(wǎng)站上點(diǎn)擊預(yù)覽，拖入json文件，右邊有二維碼app掃碼查看效果。
Preview & Test Bodymovin Lottie Animations on Web, iOS and Android
