Lottie 的Json在线校验网站:传送门
下图是它的解析过程:
大致就是把Json转化成Java Bean,然后适用Drawable进行绘制。
Android Lottie Demo
下面来实际操作一下,用Android来写一个Lottie动画。
第一步 导入Lottie动画库
注:如果使用2.8以上的版本,Android要升级至AndroidX
implementation ‘com.airbnb.android:lottie:3.1.0’
第二步 将Lottie的Json文件放到 assets文件下
第三步 在XML或者代码中使用
//xml:
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_view"
android:layout_width=“300dp”
android:layout_height=“300dp”
android:layout_centerInParent=“true”/>
//Activity
lottieView = findViewById(R.id.lottie_view);
lottieView.setAnimation(“genius-avatar.json”);
lottieView.loop(true);
lottieView.playAnimation();
效果如下:
解析原理
这里就不讲,因为通篇都是解析Json文件的。
但是我们可以看看 Lottie主要使用到的类和它们的作用:
首先,LottieDrawable
会分出很多图层,然后用图层管理者 CompositionLayers
去分别进行绘制。
绘制的时候根据时间,计算每个时间点的 关键帧。这个时候用到了我们在属性动画所学过的 KeyFrame
关键帧处理类
Lottie的优势
更多学习和讨论,欢迎加入我们的知识星球!
点击这里加入我们吧!
群内有许多来自一线的技术大牛,也有在小厂或外包公司奋斗的码农,我们致力打造一个平等,高质量的Android交流圈子,不一定能短期就让每个人的技术突飞猛进,但从长远来说,眼光,格局,长远发展的方向才是最重要的。
F%BC%81.md)
群内有许多来自一线的技术大牛,也有在小厂或外包公司奋斗的码农,我们致力打造一个平等,高质量的Android交流圈子,不一定能短期就让每个人的技术突飞猛进,但从长远来说,眼光,格局,长远发展的方向才是最重要的。
这里有2000+小伙伴,让你的学习不寂寞~·