android封装动画库,【强烈推荐】Lottie动画库 Android 端源码浅析

原标题:【强烈推荐】Lottie动画库 Android 端源码浅析

惊艳的Lottie

前段时间airbnb开源的动画库Lottie得到了不错的反响,旨在解决Android、IOS、RN 上面开发动画成本高、表现不一致的问题,可以说降低了三端动画的开发成本。

项目地址:

先上几个git上的效果:

3ed8c51b5df17d22fdd86cf0489a59ca.gif

demo1

e0fcf84ec259af0ccb4541b715449d4e.png

demo2

如果需要在3端都分别完成这些动画,可能就需要折磨设计&开发同学了。人肉写出这些效果简直是处女座也无法完成的一件事。

Lottie在这件事上就是来拯救移动开发程序员的。

思路

Lottie借助AE生成动画,再利用AE插件来导出可描述的json文件,而Lottie负责在不同端上解析json文件完成动画的绘制。

从设计思路上可以看出,这确实是一个很好的解法,Lottie抹平了各端的差异性,通过统一描述(JSON)来表述动画。这看上去和近年来很火的Weex思路一致。

作为一个Android搬砖程序员,接下来的篇幅主要以Lottie Android SDK(ios也不会呀~~~)来分析一下Lottie的解法。

用法

先来感受一下用法,感觉还是很清爽的:

Dependency:

compile'com.airbnb.android:lottie:1.5.3'

使用lottie_fileName="hello-world.json"来指定动画路径,也可以使用:setAnimation("hello-world.json")来指定。

9fa067bca65c501146606f9f837ff510.png

xml usage

1eeefed2614584aa330e31beed4ef532.png

java usage

然后你就可以像使用普通动画对待Lottie了。

原理浅析绘制

我们先从能接触到的类com.airbnb.lottie.LottieAnimationView看起,所有的逻辑处理、json解析、绘制工作都在这里完成。

7d3b1805ede2bcf2766cbdef80d0ca48.png

LottieAnimationView

可以看到这个是AppCompatImageView,里面有个很重要的变量:

LottieDrawable lottieDrawable;

LottieAnimationView在初始化时会调用setImageDrawable(lottieDrawable);方法,使用LottieDrawable作为ImageDrawable。并且同时重写invalidateDrawable方法,当需要invalidate时通知lottieDrawable。

56d42b81ea5af0073fb88104564dcac5.png

invalidateDrawable

LottieDrawable

b25c275044ff35aa242e3401b3f0bb57.png

继承关系

从类结构看,继承自AnimatableLayer,里面实现了Drawable需要实现的方法,主要是public void draw(@NonNull Canvas canvas)用来实现Drawable的绘制工作。

我们先来看看父类AnimatableLayer定义了什么行为。

首先当然是来看最重要的:draw

5428741603ef2adea40cde94d10a72ed.png

draw

可以看到,在绘制前,调用applyTransformForLayer对画布canvas进行了transform操作。接着绘制background、layers。

而layers的定义是:final List layers = new ArrayList<>();每一层,都是一个AnimatableLayer对象。

我们来看看AnimatableLayer的子类。

3a9fc0abcdfad4cf97c0c1ffdcff4329.png

我们目前大概可以分析出,Lottie 根据JSON 构造了一个树形结构,root节点是LottieDrawable,将绘制的元素添加到了LottieDrawable.layers中。递归的描述每一个元素。

我们接着看“root”:LottieDrawable都做了些什么。

让Drawable“动起来”

由于Drawable本身只是负责绘制工作,并不会像动画一样,有start、end、duration等属性。因此在LottieDrawable引入了一个简单的animator = ValueAnimator.ofFloat(0f, 1f)来解决这个问题。

51202c0cda6276e7fbb280da9235b48d.png

所有对动画的操作(repeat、start),都是对这个ValueAnimator元素的操作。

setProgerss

54def5e9066791b886faaa81615687fd.png

从上面可以看到,调用父类AnimatableLayer的setProgerss会通知animations、layers。之前我们已经了解过layers,那么animations是什么呢?来看定义:

private final List> animations = new ArrayList<>();

BaseKeyframeAnimation

BaseKeyframeAnimation从字面意思大概是用来描述关键帧的动画。

做过动画的朋友大概清楚“关键帧”的概念。BaseKeyframeAnimation的意义就是存放了一个动画中所有的关键帧,以及每一帧的过度进度。

543e36706a1e7991ed16b9e19e045014.png

listeners可以注册对动画的监听,当外界调用setProgerss时,会通知给监听者。

keyframes存放了当前动画所有关键帧。

最终对外的方法是:

abstract A getValue(Keyframekeyframe, float keyframeProgress);

从入参看很清晰,传入了当前所在的关键帧,以及帧进度。

KeyFrame是对每一帧的描述,字段如下:

977553673c1b5887c71f51c71e53b1b9.png

LottieComposition是当前帧的所有数据,我们后面会讲到。

并且提供了静态工厂方法来生成一个KeyFrame。将JSON文件解析成一个KeyFrame对象。

56a74891ed547a1065760b9e166ad187.png

setTransform

前面提到的animations是在何时注册的呢?

我们在AnimatableLayer.setTransform方法中看到了注册方法。这个方法在root节点不会被调用,但是在具体的Layer(如EllipseLayer、ShapeLayerView)中会使用。具体如下:

603d4d49731b9ac199f0286b517e1a29.png

可以看到,在addAnimation后以及 注册的updatelistener中调用了invalidateSelf()方法。而invalidateSelf()方法会触发draw流程。draw会递归的调用layers进行绘制。由于每一个layer都拥有当前的 progress,因此就可以正确的绘制出来啦。

JSON 解析

解析工作在调用animationView.setAnimation后,就开始了。

JSON 解析 会用InputStream异步读取json内容,经过处理后封装成LottieComposition对象。

160b42b673031d6067421ef42bb6af84.png

当加载完成后,会回调animationView.setComposition方法。animationView会接着调用LottieDrawable.setComposition。

bf95745a08c68b24fdf1a3523bdd1f4f.png

buildLayersForComposition

这里完成了前面提到的layers的构建:

849978c9db087489b47da25b975a93cb.png

里面做了一次转换,构造了一个LayerView对象,这个是关键所在。

LayerView

LayerView也是继承自AnimatableLayer。 完成了所有Layer类型的转换。

在初始化方式中会调用:setupForModel();方法。

0839c6bdfbc5c5f2d7acbfac1ba97ef3.png

摘取了setupShapeLayer的代码片段,里面会根据不同的数据类型,生成不同的LayerView,这些细节就不再做细究了。

总结

为了实现基本的动画能力,Lottie做了这么些事情。

1. 绘制:Lottie 使用 ImageView.Drawable来处理动画。使用统一Canvas来绘制。

2.动画控制:借助一个ValueAnimator来控制动画的进度,通过一系列监听器来通知Drawable进行绘制(draw)。

3.资源转换:将JSON文件经过处理得到LottieComposition对象,包括了每一层动画对象、资源(images)等信息。

f7fb0ea8234e996646d797ec3551e81b.png

写在最后

首先给Lottie的工程师们一个star。

本文只是对Lottie的主要逻辑进行了梳理,没有梳理动画格式之类,里面比较复杂的的部分是不同的Layer的绘制、KeyFrame的计算。这部分由于对AE以及bodymovin不太了解就没有深究了。旨在掌握Lottie的大体设计。如有错误之处,请指出。

最后吐槽一波Lottie的代码结构,虽然源码不多,但是这个一层结构。。。。

责任编辑:

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值