目錄
- 背景
- 實(shí)戰(zhàn)
- 總結(jié)
- 參考資料
1. 背景
最近看了下全民K歌的動(dòng)畫挺好的「見圖」靶病，查了下資料使用的技術(shù)是lottie曲秉，好吧動(dòng)手跑個(gè)demo舔哪。
全民K歌
看了下流程谓媒，簡(jiǎn)單記錄下：
- Adobe After Effects制作動(dòng)畫
- Adobe After Effects安裝bodymovin插件導(dǎo)出json文件
- Android使用lottie開源庫(kù)解析json文件展示動(dòng)畫
- lottie不僅支持Android端三，還支持iOS畜疾、Reaact Native和Web祖驱。
- 其實(shí)有點(diǎn)類似Java「一次編寫按咒，到處運(yùn)行」舅柜，json文件具有跨平臺(tái)的能力「.class」梭纹，各個(gè)平臺(tái)的lottile解析渲染動(dòng)畫「jvm」。
2. 實(shí)戰(zhàn)
1. 環(huán)境準(zhǔn)備
- 由于公司網(wǎng)絡(luò)限制致份，安裝Adobe After Effects和bodymovin插件就不跑了变抽，大家可以參考該文章Lottie開源動(dòng)畫庫(kù)介紹與使用示例。本身制作動(dòng)畫UI同學(xué)更專業(yè)知举。
- 直接下載bodymovin導(dǎo)出來的json文件瞬沦。
- 直接瀏覽json動(dòng)畫效果網(wǎng)址「避免UI撕逼」
2.Android Studio操作
- 添加依賴
compile 'com.airbnb.android:lottie:2.8.0'
- 編譯報(bào)錯(cuò)
app\build\intermediates\manifests\full\debug\AndroidManifest.xml:19: error: No resource identifier found for attribute 'appComponentFactory' in package 'android'
Lottie 2.8.0 and above only supports projects that have been migrated to androidx for more information, read Google's migration guide.
- Lottie2.8.0使用的是androidX「解決Android support版本混亂的」，因?yàn)閐emo項(xiàng)目未使用androidX雇锡，老實(shí)使用2.7.0逛钻，問題解決。
- 下載拷貝lottie_data_origin.json到app\src\main\assets
- 編寫布局引用資源
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottieAnimationView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_fileName="lottie_data_origin.json"
app:lottie_loop="true"
app:lottie_autoPlay="true"/>
- lottie_fileName 指定json文件路徑
- lottie_loop 是否循環(huán)
- lottie_autoPlay 是否自動(dòng)播放
// 監(jiān)聽動(dòng)畫
animationView.addAnimatorUpdateListener((animation) -> {
// Do something.
});
// 播放動(dòng)畫
animationView.playAnimation();
- 編譯運(yùn)行锰提，查看結(jié)果
運(yùn)行效果
3. 總結(jié)
lottie封裝的已經(jīng)很好了曙痘，我們使用的時(shí)候只需要?jiǎng)赢嫷膉son文件，利用lottie解析渲染到界面就可以了立肘。利用playAnimation和addAnimatorUpdateListener來完成動(dòng)畫手動(dòng)播放和動(dòng)畫監(jiān)聽边坤。
