Lottie，是一個(gè)支持web、 Android、iOS 以及 ReactNative、可以利用json實(shí)現(xiàn)動(dòng)畫效果的庫(kù)。
1、安裝Bodymovin
通過(guò)在AE上安裝Bodymovin 插件，可以將 AE 中制作好的動(dòng)畫導(dǎo)出成一個(gè) json 文件。
1、 下載bodymovin/bodymovin，在項(xiàng)目目錄的“/build/extension”下找到“bodymovin.zxp”文件
2、 下載安裝 zxp-installer（aescript+aeplugins zxp installer.exe）
3、 在zxp-installer中選擇“File”>“Open”，打開“bodymovin.zxp”文件，會(huì)自動(dòng)開始安裝
4、 在AE中點(diǎn)擊“窗口”>“擴(kuò)展”>“Bodymovin”菜單項(xiàng)，就可以打開Bodymovin的界面使用插件了。
2、android端使用
1、添加依賴
dependencies {
compile 'com.airbnb.android:lottie:2.0.0-beta4'
}
2、簡(jiǎn)單使用
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_fileName="hello-world.json"
app:lottie_loop="true"
app:lottie_autoPlay="true" />
1、其中json文件放在 app/src/main/assets目錄下
2、支持API14及以上的版本
3、web端使用
在bodymovin/bodymovin的項(xiàng)目下的“\build\player\bodymovin.js”，得到j(luò)s文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="bodymovin.js"></script>
</head>
<body>
<div id="animation" ></div>
<script>
bodymovin.loadAnimation({
path:'animation.json', //json文件路徑
loop:true,
autoplay:true,
renderer:'canvas', //渲染方式，有"html"、"canvas"和"svg"三種
container:document.getElementById('animation')
});
</script>
</body>
</html>
注意：
1、使用bodymovin.js時(shí)，不支持file協(xié)議，不能在本地運(yùn)行，可以建一個(gè)本地服務(wù)器，運(yùn)行（Tomcat安裝及配置教程）；
2、運(yùn)行ipconfig得到內(nèi)網(wǎng)、
3、在使用AE導(dǎo)出json文件時(shí)，也可以同時(shí)生成一個(gè)測(cè)試環(huán)境的js文件，暫替bodymovin.js
鏈接: http://pan.baidu.com/s/1gf65Ckz 密碼: cfr3
參考：大殺器Bodymovin和Lottie：把AE動(dòng)畫轉(zhuǎn)換成HTML5/Android/iOS原生動(dòng)畫、如何看待 Airbnb 新發(fā)布的 Lottie？、從json文件到炫酷動(dòng)畫-Lottie實(shí)現(xiàn)思路和源碼分析、Lottie的使用及原理淺析
