目录
- 背景
- 实战
- 总结
- 参考资料
1. 背景
最近看了下全民K歌的动画挺好的「见图」，查了下资料使用的技术是lottie，好吧动手跑个demo。
全民K歌
看了下流程，简单记录下：
- Adobe After Effects制作动画
- Adobe After Effects安装bodymovin插件导出json文件
- Android使用lottie开源库解析json文件展示动画
- lottie不仅支持Android，还支持iOS、Reaact Native和Web。
- 其实有点类似Java「一次编写，到处运行」，json文件具有跨平台的能力「.class」，各个平台的lottile解析渲染动画「jvm」。
2. 实战
1. 环境准备
- 由于公司网络限制，安装Adobe After Effects和bodymovin插件就不跑了，大家可以参考该文章Lottie开源动画库介绍与使用示例。本身制作动画UI同学更专业。
- 直接下载bodymovin导出来的json文件。
- 直接浏览json动画效果网址「避免UI撕逼」
2.Android Studio操作
- 添加依赖
compile 'com.airbnb.android:lottie:2.8.0'
- 编译报错
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版本混乱的」，因为demo项目未使用androidX，老实使用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 是否循环
- lottie_autoPlay 是否自动播放
// 监听动画
animationView.addAnimatorUpdateListener((animation) -> {
// Do something.
});
// 播放动画
animationView.playAnimation();
- 编译运行，查看结果
运行效果
3. 总结
lottie封装的已经很好了，我们使用的时候只需要动画的json文件，利用lottie解析渲染到界面就可以了。利用playAnimation和addAnimatorUpdateListener来完成动画手动播放和动画监听。
