lottie动画的json配置object
| 名称 | 定义 |
|---|---|
| v | 使用bodymovin的版本 |
| assetes | 图片集合 |
| layers | 图层集合 |
| w | 视图的宽度 |
| h | 视图的高度 |
| ip | 起始关键帧 |
| op | 结束关键帧 |
| fr | 帧率 |
动画时间 = (op - ip)/fr
在AE制作视频是的开始和结束时通过设置两个关键帧关键帧来完成。帧率就是单位为每秒显示帧数。
object -> assetes
assetes是一个数组，描述包含的所有资源
| 名称 | 定义 |
|---|---|
| id | 图片唯一识别的id，图层获取图片的标识 |
| w | 图片的宽度 |
| h | 图片的高度 |
| u | 图片的路径，实际并未使用 例：images/ |
| p | 图片的名称 例：img_0.png/ |
| layers | 预合成层 |
预合成层是对已存在的某些图层进行分组，把它们放置到新的合成中。layers用来实现预合成层，它和assetes同级的layers属于同一种数据类型。
object -> layers
layers是一个数组，描述包含的所有图层
| 名称 | 定义 |
|---|---|
| nm | layer的名称，在ae中生成唯一 |
| ind | layer的Id，唯一 |
| ty | layer的类型，为数字 |
| refId | 引用的资源，图片/预合成层 |
| parent | 父图层的id，默认都添加到跟图层上，如果指定了id不为0会寻找父图层并添加到上面 |
| ip | 该图层的起始关键帧 |
| op | 该图层的结束关键帧 |
| w | 预合成层：宽度 |
| h | 预合成层：图层高度 |
| sw | 固态层：宽度 |
| sh | 固态层：图层高度 |
| sc | 固态层：颜色 |
| ks | 外观信息，下面有进一步分析 |
| tt | 遮罩类型 |
| masksProperties | 蒙版的数组 |
| shapes | 矢量图形图层的数组 |
-
type：layer的类型
- 0 预合成层
- 1 固态层
- 2 图片曾
- 3 空层
- 4 形状层
- 5 位置层
当前为图片层时候，宽高通过asset来读取。预合成层和固态层，从属性读取，其他情况直接读取根图层的宽高。
ip，op：当前图层的开始和结束关键帧，决定该图层动画开始和结束的时间，使动画可以只在整个过程的某一部分产生。帧率和根图层共享。
object -> layers -> ks
| 名称 | 定义 |
|---|---|
| o | opacity不透明度 |
| r/rz | rotation旋转 |
| p | position位置 |
| a | anchor锚点 |
| s | scale縮放 |
opacity、rotation、position
不透明度和旋转通过读取字典内k值来获取。位置下有s属性时会从x和y读取，没有s时也从k读取。k对应的值有如下几种情况：
- 数字或3个数字组成的数组，表示对应属性的值，没有动画。比如锚点[62.5,46.5,0]，缩放[-100,100,100]，不透明度0等。
- 数组类型并且数字第一个对象的t有值时，表示帧动画。第一个对象表示动画开始的属性，第二个对象表示动画结束的属性。通过以下参数可以拼装出关键帧的属性值，关键帧时间点，关键帧之间的时间函数，
- t表示开始/结束帧
- s和e表示开始/结束属性值
- i和o决定动画的时间函数
anchor
同样有两种表示，带动画和不带动画。不带动画会用2个数字生成位置。当时数组带t值时表示有动画。参数和上面类似，区别是在s和e会生成移动的轨迹数组和关键帧的位置数组。
scale
同样有两种表示，带动画和不带动画。不带动画会用2个数字生成3D的缩放变换，单位比例是100.f。带动画参数同样和上面类似，区别是s和e生成关键帧比例变换值的数组。
object -> layers -> shapes
shape是一个形状图层的数组，他可以通过path(UIBezierPath)属性做出很多神奇的效果。图层的类型描述了绘制的各种特性。如果你对UIBezierPath了解，你会发现以下的功能刚好都是它支持的全部~
| 名称 | 定义 |
|---|---|
| ty | 图层类型 |
目前ty支持的功能：
- gr图形合并
- st图形描边
- fl图形填充
- tr图形变换
- sh图形路径
- el椭圆路径
- rc矩形路径
- tm剪裁路径
下面用st和sh距离来说明配置内容，其他类似。
1. gr混合图层（ShapeGroup）
| 名称 | 定义 |
|---|---|
| it | 每个图层的json |
2. st图形描边（ShapeStroke）
| 名称 | 定义 |
|---|---|
| c | 线的颜色 |
| w | 线的宽度 |
| o | 线的不透明度 |
| lc | 线段的头尾样式：默认不添加任何形状、一半的半圆、一半的矩形 |
| lg | 线的链接类型：折线、平滑、棱角 |
| d | 线段的分割模式，数据内容为线段宽度+空白宽度 |
颜色参考下面颜色值的数据内容，宽度和不透明度都是数字，参考下面数字值的数据内容
颜色值color value
通过属性k取到内容，根据数据类型区分，有帧动画和无动画两种情况。数组&数组第一项有t属性表示有帧动画。
-
帧动画
名称 定义 t 关键帧 s 开始颜色，数据类型同无动画一致 e 结束颜色，数据类型同无动画一致 i 时间函数的参数，贝塞尔曲线内切点值 o 时间函数的参数，贝塞尔曲线外切点值 h 冻结关键帧，在结束时添加同样的值 -
无动画
4个数字分别代表rgba，生成颜色
数字值number value
通过属性k取到内容，根据数据类型区分，有帧动画和无动画两种情况。数组&数组第一项有t属性表示有帧动画。
-
帧动画
同颜色的参数类型，s/e分别表示开始和结束数字，i/o代表时间函数的参数，h代表关键帧。
-
无动画
数字即代表取值
3. fl形状填充（ShapeFill）
数据格式同st类似，没有width参数，只有颜色和不透明度
4. tr图形变换（ShapeTransform）
数据格式同st类似，但是参数多了
| 名称 | 定义 |
|---|---|
| p | 位置 |
| a | 锚点 |
| s | 缩放 |
| r | 旋转 |
| o | 不透明度 |
这里新增了两种数据类型，位置和锚点使用的坐标值，缩放使用的比例值，旋转和不透明度使用之前说到的数字值。
坐标值point value
老规矩数组有t参数表示帧动画，无动画直接用2个值生成坐标的x和y。有动画时参数同颜色类型类似，除关键帧、时间函数、开始结束值新增两个点来生成移动路径。
比例值scale value
老规矩数组有t参数表示帧动画，无动画直接用2个值作为参数生成变换矩阵。有动画时参数同颜色类型。
5. sh图形路径（ShapePath）
| 名称 | 定义 |
|---|---|
| ks | 外观信息，矢量路径描述对象 |
ks数据从其属性k取值。根据数据类型区分，有帧动画和无动画两种情况。数组&数组第一项有t属性表示有帧动画。这里仅说明图形无动画，但其所在的图层本身可能存在不透明或缩放等动画。
形状值shape value
-
帧动画
名称 定义 t 矢量图显示的关键帧 s 动画开始的矢量图，数据类型同无动画一致 e 动画结束的矢量图，数据类型同无动画一致 i 时间函数的参数，贝塞尔曲线内切点值 o 时间函数的参数，贝塞尔曲线外切点值 h 冻结关键帧，在结束时添加同样的矢量图 通过上述的参数，可以计算出关键帧，关键帧的矢量图，时间函数等，这些信息就组成了矢量图的动画。
-
无动画
名称 定义 c 结束subpath，用直线链接最后一个点和第一个点 v 顶点坐标集合 i 内切线点集合 o 外切线点集合 c 贝塞尔路径闭合 通过v，i，o三个属性可以创建一个基于矢量的路径。通过计算出4个点可以确定一条三次贝塞尔曲线或直线的路径，所有点合成在一起组成一个矢量图。具体实现方式可以参考三次贝塞尔曲线。
其他路径
数据结构基本类似，都是以上提到的类型组合
