bodymovin导出动画json结果分析

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对应的值有如下几种情况:

  1. 数字或3个数字组成的数组,表示对应属性的值,没有动画。比如锚点[62.5,46.5,0],缩放[-100,100,100],不透明度0等。
  2. 数组类型并且数字第一个对象的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支持的功能:

  1. gr图形合并
  2. st图形描边
  3. fl图形填充
  4. tr图形变换
  5. sh图形路径
  6. el椭圆路径
  7. rc矩形路径
  8. 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个点可以确定一条三次贝塞尔曲线或直线的路径,所有点合成在一起组成一个矢量图。具体实现方式可以参考三次贝塞尔曲线。

其他路径

数据结构基本类似,都是以上提到的类型组合

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容