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个点可以确定一条三次贝塞尔曲线或直线的路径,所有点合成在一起组成一个矢量图。具体实现方式可以参考三次贝塞尔曲线。
其他路径
数据结构基本类似,都是以上提到的类型组合