Lottie使用小结

由于项目中需要实现一个比较复杂的动效，比较了一下VectorDrawable和Lottie两种方案，最终还是采用了Lottie，配合UI输出的json文件，还是做出了不错的效果，当然这中间也踩了不少的坑，不管是代码层面或是UI方面的问题，这里简单总结一下

1.源码环境下使用Lottie的aar包

使用gradle构建工程的话使用lottie十分的方便，一行代码便可搞定（写稿时jcenter上的稳定版本为2.3.1）

dependencies {  
  compile 'com.airbnb.android:lottie:2.3.1'
}

而源码下的应用是由mk文件构建，使用aar包的话得先下载到本地，然后修改mk文件
https://jcenter.bintray.com/com/airbnb/android/lottie/
修改mk文件的方式如下

...
LOCAL_STATIC_JAVA_AAR_LIBRARIES:= lottie
...
LOCAL_AAPT_FLAGS := \
  --auto-add-overlay \
  --extra-packages com.airbnb.lottie
...
LOCAL_PREBUILT_STATIC_JAVA_LIBRARIES := lottie:libs/lottie-2.3.1.aar
...

使用LOCAL_AAPT_FLAGS的目的是获得aar包中的resource，这样做在7.1之前都是可以正常使用的，但是到了8.0上就获取不到了（暂时还没弄明白，猜测可能是8.0使用了AAPT2的原因），所以目前只能把aar中的resource复制到本地，解压lottie的aar可以看到lottie的resource只有value的定义，所以复制过来也是非常方便的

<?xml version="1.0" encoding="UTF-8"?>
<resources>
<declare-styleable name="LottieAnimationView">
  <attr name="lottie_fileName" format="string"/>
  <attr name="lottie_rawRes" format="reference"/>
  <attr name="lottie_autoPlay" format="boolean"/>
  <attr name="lottie_loop" format="boolean"/>
  <attr name="lottie_imageAssetsFolder" format="string"/>
  <attr name="lottie_progress" format="float"/>
  <attr name="lottie_enableMergePathsForKitKatAndAbove" format="boolean"/>
  <attr name="lottie_cacheStrategy" format="enum">
    <enum name="none" value="0"/>
    <enum name="weak" value="1"/>
    <enum name="strong" value="2"/>
  </attr>
  <attr name="lottie_colorFilter" format="color"/>
  <attr name="lottie_scale" format="float"/>
</declare-styleable>
<item name="lottie_layer_name" type="id"/>
</resources>

2.给lottie动画加上渐变色效果

查看lottie的源码就可以发现LottieAnimationView继承自AppCompatImageView，里面可以使用的改变颜色的接口只有setColorFilter之类的，但是ColorFilter无法实现渐变色的效果
一般使用渐变色是canvas配和gradient，所以，很显然需要写一个自定义view扩展自LottieAnimationView，覆写onDraw方法即可，如下

public class MyView extends LottieAnimationView {
    public MyView(Context context) {
        super(context);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        LinearGradient gradient = new LinearGradient(0, 0, 100, 100,
                new int[]{Color.BLACK, Color.WHITE}, null, Shader.TileMode.CLAMP);
        Paint paint = new Paint();
        paint.setShader(gradient);
        canvas.drawRect(0, 0, 100, 100, paint);
    }
}