Lottie是一个很成熟的开源动画框架，它支持直接使用从AE导出的动画文件，在不同平台均可快速使用，大大减轻了程序员的工作量，也让复杂的动画成为可能。该动画文件使用Json格式来描述内容，可以大大缩减文件的体积。在Android平台，Lottie的作用就是把Json文件做解析，使用code做控制，并通过Canvas绘制出来。Lottie效果如下：
如果用纯代码去手搓以上的动画效果，估计码农们会原地狗带。而用Lottie作为衔接，这一切就很丝滑，就像显示一张图片一样简单，这就是Lottie的强大，可以说是降维打击。
1.文件结构
1.1最外层文件
Json的最外层结构如下：
{"v": "5.8.0", //bodymovin的版本"fr": 60, //帧率"ip": 0, //起始关键帧"op": 102, //结束关键帧"w": 1350, //动画宽度"h": 800, //动画高度"nm": "recommend_turn page_x0.75_original", //名称"ddd": 0, //是否为3d"assets":[], //资源信息"layers":[], //图层信息"markers": [] //遮罩
}
其中的layers是动画最核心的内容，因为Lottie的动画是由不同的Layer组合而成的。
1.2 Layers层
结构如下：
"layers": [ //图层信息{"ddd": 0, //是否为3d"ind": 1, //图层id 唯一性"ty": 4, //图层类型"nm": "page back 4",//图层名称"refId": "comp_0", // 引用的资源，图片/预合成层"td": 1,"sr": 1,"ks": {...}, // 变换。对应AE中的变换设置"ao": 0,"layer": [], // 该图层包含的子图层"shaps": [], // 形状图层"ip": 12, //该图层起始关键帧"op": 1782, //该图层结束关键帧"st": -18, "bm": 0}
ty : 定义了图层的类型，类型有ImageLayer、ShapeLayer、ScaleLayer、SolidLayer、TextLayer和NullLayer，不同的layer会使用不同的变化策略以及不同的资源。
refId ：这是ImageLayer会用到的图片资源。
shaps ：ShapeLayer会用到的资源，描述形状。
ks ：变换的描述，所有图层都会用到这个资源，它是对动画怎么变化的具体描述，它内部包含了很多维度的变。
1.3 KS层
具体如下：
"ks": { // 变换。对应AE中的变换设置"o": { // 透明度"a": 0,"k": 100,"ix": 11},"r": { // 旋转"a": 0,"k": 0,"ix": 10},"p": { // 位置"a": 0,"k": [-167, 358.125, 0],"ix": 2},"a": { // 锚点"a": 0,"k": [667, 375, 0],"ix": 1},"s": { // 缩放"a": 0,"k": [100, 100, 100],"ix": 6}
}
2.文件解析过程
2.1 LottieTask
在LottieAnimationView的setAnimation方法是加载资源的入口，它内部会把加载资源的任务创建一个LottieTask，并且在执行完文件解析之后，创建相关的Layer，并封装在LottieComposition作为结果返回给LottieAnimationView，如下：
public void setAnimation(@RawRes final int rawRes) {LottieTask<LottieComposition> task = cacheComposition ?LottieCompositionFactory.fromRawRes(getContext(), rawRes) : LottieCompositionFactory.fromRawRes(getContext(), rawRes, null);//添加任务监听，在任务执行成功之后回调setCompositionTask(task); }
LottieCompositionFactory内部会创建一个LottieTask并添加到线程池中去异步执行：
public static LottieTask<LottieComposition> fromRawRes(Context context, @RawRes final int rawRes, @Nullable String cacheKey) {return cache(cacheKey, new Callable<LottieResult<LottieComposition>>() {@Overridepublic LottieResult<LottieComposition> call() {// 这里执行异步解析任务return fromRawResSync(context, rawRes);}});}
在LottieTask内部中添加线程池任务：
LottieTask(Callable<LottieResult<T>> runnable, boolean runNow) {EXECUTOR.execute(new LottieFutureTask(runnable));}
2.2 LayerParser
跟进fromRawResSync方法里面去，会调用到LottieCompositionMoshiParser去做解析最外层的Json数据，我们主要关注是解析layers字段：
LottieCompositionMoshiParser.java
public static LottieComposition parse(JsonReader reader) throws IOException {switch (reader.selectName(NAMES)) {case 6:parseLayers(reader, composition, layers, layerMap);}
}private static void parseLayers(JsonReader reader, LottieComposition composition,List<Layer> layers, LongSparseArray<Layer> layerMap) throws IOException {Layer layer = LayerParser.parse(reader, composition);layers.add(layer);layerMap.put(layer.getId(), layer);}
最后再调用了LayerParser做生成各个Layer数据结构，当然LayerParser内部还要对下一层的数据做解析，最后形成一个树形数据结构返回给LottieAnimationView。
3.创建绘制图层
3.1 CompositionLayer和BaseLayer
LottieTask在解析完之后，会把LottieComposition返回给LottieAnimationView：
LottieAnimationView.java
public void setComposition(@NonNull LottieComposition composition) {boolean isNewComposition = lottieDrawable.setComposition(composition);}
LottieAnimationView又把数据透传给LottieDrawable:
LottieDrawable.java
public boolean setComposition(LottieComposition composition) {buildCompositionLayer();
}compositionLayer = new CompositionLayer(this, LayerParser.parse(composition), composition.getLayers(), composition);
这里会创建一个CompositionLayer，它继承自BaseLayer，而在它内部会创建各个类型的图层，如下：
static BaseLayer forModel(Layer layerModel, LottieDrawable drawable, LottieComposition composition) {switch (layerModel.getLayerType()) {case SHAPE:return new ShapeLayer(drawable, layerModel);case PRE_COMP:return new CompositionLayer(drawable, layerModel,composition.getPrecomps(layerModel.getRefId()), composition);case SOLID:return new SolidLayer(drawable, layerModel);case IMAGE:return new ImageLayer(drawable, layerModel);case NULL:return new NullLayer(drawable, layerModel);case TEXT:return new TextLayer(drawable, layerModel);}}
这些不同类型的Layer也是继承自BaseLayer，所以这里创建图层的过程，就是把之前Json文件解析的树形数据结构，转换成绘制图层的树形结构。CompositionLayer和其他各个BaseLayer的关系，就类似于View和ViewGroup之间的关系一样。
3.2 关键帧动画
同时在创建各个BaseLayer的时候，它们内部还会继续创建对应的关键帧动画类，我们重点看一下TransformKeyframeAnimation，也就是上面Json文件中对应的“ks”数据：
TransformKeyframeAnimation.java
@NonNull private BaseKeyframeAnimation<PointF, PointF> anchorPoint;@NonNull private BaseKeyframeAnimation<?, PointF> position;@NonNull private BaseKeyframeAnimation<ScaleXY, ScaleXY> scale;@NonNull private BaseKeyframeAnimation<Float, Float> rotation;@NonNull private BaseKeyframeAnimation<Integer, Integer> opacity;@Nullable private FloatKeyframeAnimation skew;@Nullable private FloatKeyframeAnimation skewAngle;
可以看到内部定义了很多关键帧动画类，它们决定了该Layer在某个时刻应该绘制怎样的内容。
关系图如下：
4.动画绘制过程
4.1LottieValueAnimator计算progress
准备好了资源，创建好了图层，在LottieAnimationView 调用了playAnimation()方法之后，就开始播放动画了。同样，也会调用到LottieDrawable的playAnimation()方法：
LottieDrawable.java
public void playAnimation() {//调用animator去播放动画animator.playAnimation(); }
LottieDrawable会调用它内部的LottieValueAnimator去计算动画播放的具体帧：
LottieValueAnimator.java
@MainThreadpublic void playAnimation() { //这里会通知更新动画setFrame((int) (isReversed() ? getMaxFrame() : getMinFrame()));//这里注册Choreographer，以便同步vsync信号，并在doframe方法中继续更新动画postFrameCallback();}
setFrame会调用到父类里的notifyUpdate()方法，然后回调通知到LottieDrawable里面的监听接口：
LottieDrawable.java
private final ValueAnimator.AnimatorUpdateListener progressUpdateListener = new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {if (compositionLayer != null) {compositionLayer.setProgress(animator.getAnimatedValueAbsolute());}}};
从这里可以看出，LottieValueAnimator的作用主要是根据屏幕的刷新信号，来计算应该播放的帧序列，也就是播放的具体进度。当存在卡断的情况下，Choreographer的doframe方法会延迟通知，就会导致LottieValueAnimator存在跳帧的情况。
4.2关键帧动画设置progress
接着看绘制流程，播放进度会给到CompositionLayer，而CompositionLayer又会把播放进度再分发给具体的每一个Layer，如下：
CompositionLayer.java
setProgress(@FloatRange(from = 0f, to = 1f) float progress) {for (int i = layers.size() - 1; i >= 0; i--) {layers.get(i).setProgress(progress);}
}
每个Layer都是继承自BaseLayer，在BaseLayer中又会把进度给到内部的各个关键帧动画，最重要的是TransformKeyframeAnimation，它内部包含各个维度的变化序列：
TransformKeyframeAnimation.java
setProgress(float progress) {
if (opacity != null) {opacity.setProgress(progress); //透明度}if (anchorPoint != null) {anchorPoint.setProgress(progress); //锚点}if (position != null) {position.setProgress(progress); //位置}if (scale != null) {scale.setProgress(progress); //缩放}if (rotation != null) {rotation.setProgress(progress); //旋转}if (skewAngle != null) {skewAngle.setProgress(progress); //斜角
}
4.3Layer请求刷新
在设置完progress之后，各个Layer就会触发onValueChanged()方法，并请求刷新自己：
BaseLayer.java
public void onValueChanged() {invalidateSelf();}private void invalidateSelf() {lottieDrawable.invalidateSelf();}
接着会调用到LottieDrawable的绘制：
LottieDrawable.java
public void invalidateSelf() {final Callback callback = getCallback();if (callback != null) {callback.invalidateDrawable(this);}}
4.4Layer绘制
当自定义的Drawable需要重绘的时候，就需要调用invalidateDrawable方法，请求绘制自己，然后会通过ImageView的onDraw方法里调用到Drawable的draw方法：
Drawable.java
public void draw(@NonNull Canvas canvas) {drawInternal(canvas)；}
接下来就会调用到CompositionLayer中的draw方法，在CompositionLayer中又会把实际绘制的工作交给各个Layer去完成：
CompositionLayer.java
draw(Canvas canvas, Matrix parentMatrix, int parentAlpha) {drawLayer(canvas, matrix, alpha);
}drawLayer(Canvas canvas, Matrix parentMatrix, int parentAlpha) {for (int i = layers.size() - 1; i >= 0; i--) {BaseLayer layer = layers.get(i);layer.draw(canvas, parentMatrix, childAlpha);}
}
不同的Layer层，对draw的实现也不一样，比如ImageLayer是drawBitmap，绘制前会在父类调关键帧动画计算出来的参数，对Bitmap做位移、旋转、透明度变化等等变化操作，最后才是使用Canvas做绘制：
BaseLayer.java:
public void draw(Canvas canvas, Matrix parentMatrix, int parentAlpha) {matrix.preConcat(transform.getMatrix()); //通过关键帧动画做变化操作drawLayer(canvas, matrix, alpha); //调用子类的绘制
}
ImageLayer.java
@Override public void drawLayer(@NonNull Canvas canvas, Matrix parentMatrix, int parentAlpha) {Bitmap bitmap = getBitmap(); //读取图片内容canvas.drawBitmap(bitmap, src, dst , paint);//绘制图片
}
至此，一帧动画的绘制就完成了，后面会由LottieValueAnimator的doFrame回调不停地重复上面的步骤，实现连续的动画效果。