Android Lottie动画初探

目录

1. 背景
2. 实战
3. 总结
4. 参考资料

1. 背景

最近看了下全民K歌的动画挺好的「见图」，查了下资料使用的技术是lottie，好吧动手跑个demo。

全民K歌

看了下流程，简单记录下：

1. Adobe After Effects制作动画
2. Adobe After Effects安装bodymovin插件导出json文件
3. Android使用lottie开源库解析json文件展示动画

• lottie不仅支持Android，还支持iOS、Reaact Native和Web。
• 其实有点类似Java「一次编写，到处运行」，json文件具有跨平台的能力「.class」，各个平台的lottile解析渲染动画「jvm」。

2. 实战

1. 环境准备

1. 由于公司网络限制，安装Adobe After Effects和bodymovin插件就不跑了，大家可以参考该文章Lottie开源动画库介绍与使用示例。本身制作动画UI同学更专业。
2. 直接下载bodymovin导出来的json文件。
3. 直接浏览json动画效果网址「避免UI撕逼」

2.Android Studio操作

1. 添加依赖

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，问题解决。

2. 下载拷贝lottie_data_origin.json到app\src\main\assets
3. 编写布局引用资源

<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();

4. 编译运行，查看结果

运行效果

3. 总结

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

4.参考资料

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