Android(安卓)Lottie动画初探

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
编写布局引用资源

lottie_fileName 指定json文件路径
lottie_loop 是否循环
lottie_autoPlay 是否自动播放

// 监听动画animationView.addAnimatorUpdateListener((animation) -> {    // Do something.});// 播放动画animationView.playAnimation();

编译运行，查看结果

运行效果

3. 总结

lottie封装的已经很好了，我们使用的时候只需要动画的json文件，利用lottie解析渲染到界面就可以了。利用playAnimation和addAnimatorUpdateListener来完成动画手动播放和动画监听。

4.参考资料

Lottie开源动画库介绍与使用示例
lottie github
lottie Android Wiki
Lottie : 让动画如此简单

目录

1. 背景

2. 实战

1. 环境准备

2.Android Studio操作

3. 总结

4.参考资料

更多相关文章

随机推荐