导读：Lottie 是一个很好的动画库，不同于FaceBook 的 POP，Lottie 主要是重现由AE(Adobe After Effects)实现的动画，具体方法是AE 导出一个json，Lottie 读取json 进行较为炫酷的动画。本文主要讲述从AE的bodymovin插件导出的JSON文件到Objective-c的LOTCompisition实体对象的过程。JSON文件包含做动画的一切信息，包括帧率、动画形态、图层、字体等等。
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是一个数组，资源信息包含的是矢量图信息，如形状，大小等等，也包含位图；还可能是预合成层，即对已存在的某些图层进行分组，把它们放置到新的合成中，作为新的一个资源对象，这儿layers的对象结构是上面一级属性中的layers图层集合是一样的
"assets": [
{
"id": "image_0", // 图片唯一识别的id，图层获取图片的标识
"w": 167, // 图片的宽度
"h": 165, // 图片的高度
"u": "images/", // 图片的路径
"p": "img_0.png", // 图片的名称
"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 , // 固态层：颜色
}
]
图层有6种类型，不同类型的图层获取宽高的方式不同，如图片层需要从关联的refId获取asset，从而获取到图片资源的宽高来作为该图层的宽高等，具体如下
0 代表 预合成层：从属性值w和h获取
1 代表 固态层：从属性值w和h获取
2 代表 图片层：从图片资源属性获取
3 代表 空层：从根图层获取
4 代表 形状层：从根图层获取
5 代表 位置层：从根图层获取
解读ks属性：这是一个比较关键的属性，包含图层变换transform的信息，包含透明度、位置、锚点、缩放、旋转等。格式如下
"ks": {
"o": { // 透明度
"k": 100
},
"p": { // 位置
"k": [
126.5,
963,
0
]
}
}属性对应的值主要通过K值获取, 如上面的例子中透明度o为100, 位置p为(126.5,963,0)
k对应的值有如下几种情况：
数字或3个数字组成的数组：不带动画。表示对应属性的值。比如透明度100， 位置(126.5,963,0)等。
数组类型并且数字第一个对象的t有值：带帧动画。第一个对象表示动画开始的属性，第二个对象表示动画结束的属性。通过以下参数可以拼装出关键帧的属性值，关键帧时间点，关键帧之间的时间函数，t表示开始/结束帧，s和e表示开始/结束属性值，i和o决定动画的时间函数。
举个例子：比如下面的动画，是有个矩形从上往下的动画。
从导出的JSON文件截取以下片段：
```JSON
"ks": {
...
"p": { // 位置信息
"a": 1,
"k": [ // 数组类型并且数字第一个对象的t有值
{
"t": 0, // 起始关键帧
"s": [
300,
700,
0
],
},
{
"t": 49, // 结束关键帧
"s": [
250,
1800,
0
]
}
],
"ix": 2
}
},
```从以上片段中我们读到位置p的k值是一个数组，并且是带有t的元素, 即为帧动画。从内容我们可以读出关键帧帧为0时，位置信息为(300,700,0) , 变换到关键帧为49时，位置信息变为(250,1800,0)。
shape是一个形状图层的数组，对应AE中图层的内容中的形状设置，描述形状的特征，通过描边信息、颜色填充等信息的组合形成一个个矢量图。
"shapes": {
"ty": "gr", // 形状的类型
"it": [
{
"ty": "rc",
"d": 1,
"s": { // 形状的大小
"k": [
450.094,
140.297
]
},
"p": {
"k": [
0,
0
]
},
"nm": "矩形路径 1"
}
]
}类型属性ty
ty为形状的类型，对应的类型值如下：
gr(ShapeGroup): 图形组合
st(ShapeStroke): 图形描边
fl(ShapeFill): 图形填充
tr(ShapeTransform): 图形变换
sh(ShapePath): 图形路径
rc(RectPath): 矩形路径
el(EllipsePath): 椭圆路径
tm(trimPath): 裁剪路径
LOTComposition类是记录动画信息的类，继承 NSObject, 作为整个json文件内容的映射，用于记录所有动画信息的类。在这个类中我们可以看到动画的基础信息，包含创建AE文件时的设置：合成名称、宽高、帧速率(帧/秒)，也是JSON文件中一级属性的映射。以下是一个LOTComposition的实例信息：
从上图我们可以看到两个集合类，LOTLayerGroup记录图层信息的数组，对应JSON对象中layers数组，由一个个LOTLayer组成。一个LOTLayer是一个图层，是一个动画被拆解的最小单位个体。
例如以下云朵动画
可以看出云朵的运动速度是不一样的，因此可以判断他们并不是在一个图层中，而是由多个图层的动画叠加起来的效果，即每个云朵为一个图层, LOTLayer就是记录一个图层单位的信息
以下是一个LOTLayer携带的信息
LOTAssetsGroup是记录资源信息，对应JSON对象中的assets数组，若图层需要依赖资源，可以通过自身信息refId关联到对应的资源ID寻找资源。如以上云朵动画，每个云朵即为一个资源，LOTAsset为记录一个资源的信息。
总结：以上讲述的是从AE导出JSON文件到OC读取后转成modal的过程，了解JSON的内容有助于我们理解一个动画的内部结构，可方便后续理解整个动画的运作，也对于我们实践开发中遇到的缺陷或者性能问题的排查定位有极大的帮助。