从json文件到炫酷动画-Lottie实现思路和源码分析，Lottie是最近Airbnb开源的动画项目，支持Android、iOS、ReactNaitve三个平台，本文分析主要Lottie把json文件转为动画的思路和源码实现。

文章首先介绍Lottie的基本使用，然后分析把json文件映射到动画的实现思路，最后分析Lottie的源码实现，这里分析的是Lottie-Android。

基本用法

与使用相关的只有三个类文件： LottieAnimationView、LottieComposition、LottieDrawable ，所以Lottie使用起来特别简单(需要注意Lottie支持API16及以上)。

最简单的使用方式是在xml中增加LottieAnimationView：

"Logo/LogoSmall.json"是需要加载的动画数据路径，根目录是assets目录。

也可以通过代码设置动画数据json路径：

然后在代码中控制动画播放或者添加监听事件：

Lottie提供了LottieDrawable可以使用：

可以看到Lottie使用起来非常简单，我们之后就从以上用到的 LottieAnimationView、LottieComposition、LottieDrawable 入手来分析下Lottie动画的实现原理。

思路分析

我们先从底层思考下如何在屏幕上绘制动画，最简单的方式是把动画分为多张图片，然后通过周期替换屏幕上绘制的图片来形成动画，这种暴力的方式非常简单，但缺点明显，很耗内存，动画播放中前后两张替换的图片在很多元素并没有变化，重复的内容浪费了空间。

为了提高空间利用率，可以把图片中的元素进行拆分，使用过photoshop的同学知道，其实在处理一张图片时，可以把一张复杂的图片使用多个图层来表示，每个图层上展示一部分内容，图层中的内容也可以拆分为多个元素。拆分元素之后，根据动画需求，可以单独对图层，甚至图层中的元素设置平移、旋转、收缩等动画。

Lottie使用json文件来作为动画数据源，json文件是通过 Bodymovin 插件导出的，查看sample中给出的json文件，其实就是把图片中的元素进行来拆分，并且描述每个元素的动画执行路径和执行时间。Lottie的功能就是读取这些数据，然后绘制到屏幕上。

现在思考如果我们拿到一份json格式动画如何展示到屏幕上。首先要解析json，建立数据到对象的映射，然后根据数据对象创建合适的Drawable绘制到View上，动画的实现可以通过操作读取到的元素完成。

源码分析

1. json文件到对象的映射

Lottie使用 LottieComposition 来作为After Effects的数据对象，即把json文件映射到 LottieComposition ， LottieComposition 中提供了解析json的静态方法：

我们看下 LottieComposition 都有哪些成员变量，这些成员变量描述了After Effects中的动画。

可以看到startFrame、endFrame、duration、scale等都是动画中常见的。我们看下 List ，看名字就是映射拆分后的图层数据：

Layer 中完成layer的json数据解析：

2. 数据对象到Drawable的映射

AnimatableLayer 继承自 Drawable ，我们看下它的子类：

其中 LayerView 对应着 Layer 数据， Layer 中有

对应的 LayerView 中有

可以简单地理解为ViewGroup中可以包含ViewGroup或者View，但其实整个Lottie实现的动画都是绘制在一个View LottieAnimationView 上。

AnimatableLayer 的其它子类如 ShapeLayer，RectLayouer 等作为 LayerView 中 List 的元素。

3. 绘制

LottieAnimationView 继承自 AppCompatImageView ，封装了一些动画的操作，如：

具体的绘制时委托为 LottieDrawable 完成的，我们看下 LottieDrawable 中的 draw() 方法：

LottieDrawable 继承自 AnimatableLayer ，其 draw() 方法如下：

可以看到先绘制了本层的内容，然后开始绘制包含的 layers 的内容：

这个过程于界面中ViewGroup嵌套绘制类似。

实现分析

上面我们根据动画绘制的思路分析了下Lottie实现机制，下面从正面来捋一下程序的执行过程：

创建 LottieAnimationView lottieAnimationView

创建 LottieDrawable lottieDrawable

使用 LottieComposition 中的静态方法解析json文件创建 LottieComposition lottieComposition ，这个过程中已经创建来多个 Layer 对象。

lottieDrawable.setComposition(lottieComposition)

先清理之前的数据，然后开始 buildLayersForComposition ，即根据 lottieComposition 建立多个 layerView ，此时已经创建好了多个Drawable，并通过List建立的为以 lottieDrawable 为根的一个drawable树。

lottieAnimationView.setImageDrawable(lottieDrawable)lottieAnimationView.playAnimation()

直接委托给了 lottieDrawable ， lottieDrawable 中有 private final ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f);

重点看下 setProgress 方法

调用了 private final List> animations = new ArrayList<>() 的 setProgress ：

在 onValueChanged 时，各个创建好的Drawable会根据需求进行重绘，达到动画的效果。

Lottie把动画从View的动效转移到了Drawable上。

Lottie的性能

可以看到Lottie把json描述的动画数据映射到Drawable之后，实现动画时用到了 ValueAnimator ，在动画更新时使用Drawable而非View，个人感觉在不需要交互时Drawable显然比View更加轻量。以下是Lottie性能的官方的说明：

如果没有mask和mattes，那么性能和内存非常好，没有bitmap创建，大部分操作都是简单的cavas绘制。

如果存在mattes，将会创建2～3个bitmap。bitmap在动画加载到window时被创建，被window删除时回收。所以不宜在RecyclerView中使用包涵mattes或者mask的动画，否则会引起bitmap抖动。除了内存抖动，mattes和mask中必要的bitmap.eraseColor()和canvas.drawBitmap()也会降低动画性能。对于简单的动画，在实际使用时性能不太明显。

如果在列表中使用动画，推荐使用缓存LottieAnimationView.setAnimation(String, CacheStrategy) 。

以上就是对于安卓开发方面的知识点简介，从json文件到炫酷动画-Lottie实现思路和源码分析，更多相关内容请继续关注拓胜科技安卓技术频道，或者需要了解拓胜安卓培训方面的问题，可以在线免费咨询拓胜教育老师。