使用lottie加载json动画

先上效果图，这个是做的一个仿抖音的点赞动画：

giphy.gif

众所周知，属性动画、补间动画通常只能做一些效果简单的，而做复杂的动画可采用gif图，帧动画，但是这样资源空间增大导致apk增大不小。而加载json文件实现动画就完美解决以上问题。

设计师AE导出Json文件，Lotti 解析Json文件后调Core Animation的API绘制渲染。所以让你们公司的UI去学一学AE吧，多们技能好防身。

Lottie开源库地址：一个集Android、Ios、React Native与Web平台于一身的女子。

https://github.com/airbnb/lottie-android

使用方式：

引入库

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

创建assets文件夹，将json文件放入其中。

image.png

引用LottieAnimationView控件

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie_likeanim"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:lottie_fileName="likeanim.json"
        app:lottie_loop="true"
        android:layout_centerInParent="true"/>

常用属性：

      app:lottie_fileName="likeanim.json"  加载json的文件名
      app:lottie_loop="true"  是否循环播放
      app:lottie_autoPlay="true"  是否自动播放

常用操作：

       lottieLike.playAnimation();   //播放
        lottieLike.pauseAnimation();  //暂停
        lottieLike.cancelAnimation();  //取消
        lottieLike.getDuration();   //获取动画时长
        lottieLike.addAnimatorListener(new Animator.AnimatorListener() {  //添加动画监听
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {

            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });

lottie动画原理

上图是Lottie动画库从AE导出动画到绘制到客户端屏幕的过程，第一阶段是JSON到Model(OC数据模型)的转换过程，主要是将JSON转成OC语言可以识别的数据模型Model, Model实际上是一个Object类型的对象，我们可以通过属性key快速查找数据内容，第二阶段是Model(数据模型)依附到CALayer(图层)上，就像写一个CALayer一样，把Model数据一一赋值给CALayer的属性上，必要时再做特殊处理，最后在图层CALayer上添加Animation(动画)。

JSON字段解读

JSON最外一层的数据，包括一个动画的基础数据：动画帧率、起始/结束关键帧，动画的宽高等，还有子图层的信息和关联的资源信息，如图片，矢量图等。

{
  "v": "5.6.10",   // bodymovin插件版本
  "fr": 25,        // 帧率
  "ip": 0,         // 起始关键帧
  "op": 277,       // 结束关键帧
  "w": 110,        // 视图宽度
  "h": 110,        // 视图高度
  "nm": "cloud",   // 动画名称
  "ddd": 0,        // 是否是3D
  "assets": [...]  // 资源集合
  "layers": [...]  // 图层集合
}

assets 资源集合
assets是一个数组，资源信息包含的是矢量图信息，如形状，大小等等，也包含位图；还可能是预合成层，即对已存在的某些图层进行分组，把它们放置到新的合成中，作为新的一个资源对象，这里layers的对象结构是跟上面一级属性中的layers图层集合是一样的图层结构。

"assets": [
    {
        "id": "image_0",   // 图片唯一识别的id，图层获取图片的标识
        "w": 167,          // 图片的宽度
        "h": 165,          // 图片的高度
        "u": "images/",    // 图片的路径
        "p": "img_0.png",  // 图片的名称
        "layers":  []      // 预合成层
    }
]

layers 图层集合
layers对象也是一个数组，数组中的每个元素对应一个图层，图层信息包括的图层的位置，大小，形状，起始关键帧，结束关键帧等，一个个图层动画叠加起来构成最终的动画效果。

"layers": [
    {
        "ddd": 0,             // 是否是3D图层
        "ind": 1,             // 在AE里的图层标序号
        "ty": 4,              // 图层类型
        "nm": "形状图层 1",    // 在AE下的命名
        "ks": {},             // 动画属性值，下面有进一步拆解
        "shapes": {},         // 矢量图形图层信息，下面有进一步拆解
        "ip": 0,              // 起始关键帧
        "op": 750,            // 结束关键帧
        "refId: 0,            // 引用资源ID
        "parent": 0,          // 父图层的id，默认都添加到根图层上，如果指定了id不为0会寻找父图层并添加到上面
        "masksProperties":[], // 蒙版的数组
        "w": 100,             // 预合成层：宽度
        "h": 100,             // 预合成层：图层高度
        "sw": 0,              // 固态层：宽度
        "sh": 0,              // 固态层：图层高度
        "sc": 0 ,             // 固态层：颜色
    }
]

参考：
https://cloud.tencent.com/developer/article/1655236

使用lottie加载json动画