簡介
我們使用Lottie的時候，最關鍵的類就是LottieAnimationView(繼承自ImageView)和LottieDrawable(繼承自Drawable)，Lottie的描述文件最終會解析成一系列的Layer，然后在繪制的時候，根據不同的進度，繪制Layer的不同幀。
JSON描述文件
在分析源碼之前，我們需要先認識一下，加載的json 文件的數據結構是怎樣的。
比較重要的有三層，
assets,這個描述的是，圖片資源的位置；
layers,這個描述的是，每個圖層的相關信息；
shapes,這個描述的是，具體圖層的動畫元素相關信息。
-w1057
assets會解析成LottieImageAsset對象，
Layers層在渲染的時候，會被解析成以下幾種類型中的一種。
-w760
shapes會被解析成ShapeGroup。
動畫文件的加載
整體的時序圖：
整體的類圖：
Lottie提供了各種數據源獲取的API，根據數據源的不同選擇不同的獲取方式。
-w779
這里我們介紹一下，從assets下面獲取解析json文件的流程。
public void setAnimation(final String animationName, final CacheStrategy cacheStrategy) {
this.animationName = animationName;
lottieDrawable.cancelAnimation();
cancelLoaderTask();
compositionLoader = LottieComposition.Factory.fromAssetFileName(getContext(), animationName,
new OnCompositionLoadedListener() {
@Override public void onCompositionLoaded(LottieComposition composition) {
if (cacheStrategy == CacheStrategy.Strong) {
strongRefCache.put(animationName, composition);
} else if (cacheStrategy == CacheStrategy.Weak) {
weakRefCache.put(animationName, new WeakReference<>(composition));
}
setComposition(composition);
}
});
}
如上，先調用fromAssetFileName方法，會直接同步使用AssetManager的open方法，然后將InputStream流提供給FileCompositionLoader(繼承自AsyncTask),在里面進行異步解析。最終會返回一個LottieComposition對象。
public class LottieComposition {
//預合成的圖層
private final Map<String, List<Layer>> precomps = new HashMap<>();
//圖片資源
private final Map<String, LottieImageAsset> images = new HashMap<>();
//所有的Layer，帶對應的ID
private final LongSparseArray<Layer> layerMap = new LongSparseArray<>();
//所有的layer,
private final List<Layer> layers = new ArrayList<>();
private final Rect bounds;
private final long startFrame;
private final long endFrame;
private final int frameRate;
private final float dpScale;
}
至此，就已經將json文件解析完成，接著會調用LottieDrawable的setComposition方法。進行一系列的初始化配置，包括速度、原始進度、colorFilter的設置、layer之間的關系等。
public boolean setComposition(LottieComposition composition) {
if (this.composition == composition){return false;}
clearComposition();
this.composition = composition;
//設置速度
setSpeed(speed);
updateBounds();
//構建CompositionLayer，會將所有的Layer轉換成為可以繪制的各種BaseLayer
buildCompositionLayer();
//處理colorFilter的設置
applyColorFilters();
//處理進度的設置
setProgress(progress);
//如果需要，怎在以上配置完成，開始執行動畫
if(playAnimationWhenCompositionAdded){
playAnimationWhenCompositionAdded = false;
playAnimation();
}
if(reverseAnimationWhenCompositionAdded) {
reverseAnimationWhenCompositionAdded = false;
reverseAnimation();
}
return true;
}
動畫文件的渲染
其實就是將上面構建出來的各種BaseLayer進行對應的繪制。
-w577
當調用animator.start的時候,LottieDrawable的onAnimationUpdate就會被回調，根據動畫的進度，調用setProgress方法進行更新。
public void onAnimationUpdate(ValueAnimator animation) {
if (systemAnimationsAreDisabled) {
animator.cancel();
setProgress(1f);
} else {
setProgress((float) animation.getAnimatedValue());
}
}
public void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
this.progress = progress;
if (compositionLayer != null) {
compositionLayer.setProgress(progress);
}
}
而真正實現動畫功能的，其實是CompositionLayer里面控制的。在這里會調用到每個BaseLayer的setProgress,
public void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
super.setProgress(progress);
progress -= layerModel.getStartProgress();
for (int i = layers.size() - 1; i >= 0; i--) {
layers.get(i).setProgress(progress);
}
}
而BaseLayer的setProgress會觸發LottieDrawable的invalidateSelf方法，進行重新繪制。隨著動畫的不斷執行，就會不斷繪制對應進度的樣式，形成動畫。
public void onValueChanged() {
this.invalidateSelf();
}
private void invalidateSelf() {
this.lottieDrawable.invalidateSelf();
}
小結
整個流程其實就是：
1、通過LottieComposition.Factory獲取對應數據源的json文件并解析成LottieComposition。
2、調用LottieDrawable的setComposition，將所有的圖層解析成對應的Layer,并構建出一個基礎的CompositionLayer.
3、接著調用LottieDrawable的動畫執行方法，觸發BaseLayer的draw()方法不斷執行，不斷的繪制各個圖層從而形成動畫。
