Lottie-Android源码解析

airbnb 开源动画库 Github 这个动画库出来时间比较久了,前段时间做需求用到了,好奇它如何把 Json 转化到动画的就去了解了一下。

AE 相关关键词

1.图层

通过多个图层合成一个完整的图片,每个图层中的元素独立绘制,根据动画需求做缩放旋转等动画

2.关键帧

关键帧用于设置动作、效果、音频以及许多其他属性的参数,这些参数通常随时间变化。关键帧标记您为图层属性(如空间位置、不透明度或音量)指定值的时间点。可以在关键帧之间插补值。使用关键帧创建随时间推移的变化时,通常使用至少两个关键帧:一个对应于变化开始的状态,另一个对应于变化结束的新状态。

简化的例子

Alt text
对应的Json文件地址

对应的 Json 字段如下

字段 含义
v 插件版本
fr 帧率
ip 起始关键帧
op 结束关键帧
w,h 长宽
assets 如果有图片从这里取资源
layers 所有图层合集

layers 对应字段
描述包含的所有图层

字段 含义
ind 图层id
ty 数字值,图层类型:0预合成层、1 固态层、2图片层、3空层、4形状层、5位置层
ip、op 当前图层的开始和结束关键帧,决定该图层动画开始和结束的时间,使动画可以只在整个过程的某一部分产生。帧率和根图层共享

layers.ks
描述了外观信息的一些属性的变化过程

字段 含义
o opacity 不透明度
p position 位置
a anchor 锚点
s scale 缩放
r rotation 旋转

从 k 属性取值,k 分为下面两种情况

  1. 数字或者几个数字组成的数组,表示对应属性值,代表没有动画
  2. 数组类型,表示动画,数组中的每一个对象表示一个关键帧,通过如下属性表示关键帧的相关信息
    • t 起始帧
    • s 和 e 分别表示开始属性和结束属性
    • i,o,to,ti,插值器,一个(0->1)三阶贝塞尔曲线

layers.shapes
形状图层数组,通过 path 属性作出多种效果,描述了要绘制的内容 content

名称 定义
ty gr图形合并
st图形描边
fl图形填
tr图形变换
sh图形路径
el椭圆路径
rc矩形路径
tm剪裁路径

流程图

1. 基本流程图
Alt text

2. 解析 Json 简要流程图

3. 动画流程图

4. 绘制流程图

总结

所以 Lottie 最终会把 Json 的动画变换和绘制内容都解析成最基本的关键帧列表,每个关键帧都有开始属性和结束属性以及插值器,绘制的时候遍历 Layer 获取每个图层当前时间点对应的关键帧属性值,进而用 Matrix 对 Canvas 和 Path 进行变换绘制。

bilibili music