Lottie Web SVG 动画源码浅析以及对应原生实现

© Young 2019-01-19 21:51
Welcome to My GitHub

有个加载动画如下图所示:

这个动画可以拆分三个部分;分别是灯笼上下跳动、灯光闪烁以及彩旗飘动;

灯笼上下跳动和灯光闪烁部分都比较好处理,但是彩旗那则有点麻烦;

通过 AE 的动画源文件,可以看到彩旗飘动分为两部分:

分别是路径过渡动画和旋转动画。

麻烦的地方就在于本人对 AE 不熟,没办法直接获得各个关键帧的路径数据(请教了下部门内的设计师,貌似他也不能直接获得);

这时候就想到了 Lottie;如果把彩旗飘动动画用 bodymovin 插件导出,那么岂不是在 json 文件就可以看到路径数据了?

然而事情并没有想的那么简单!

精灵图在 Lottie Web 动画中的应用文章中已经知道wh表示画布高度和宽度,而assets则表示动画所涉及的图片资源;

但是并不清楚layers中那一堆天书一样的结构是啥意思!更别说从中找到所需要的路径数据了!

而且使用导出的 json 文件实现的简单示例中彩旗没有渐变颜色!

怎么办?

重要的话只说一遍!

不要一到需要撸源码的时候就怂!

当然撸源码也是需要方法的;

首先渲染器设置为svg,因为如果选择canvas渲染器则没有办法很直观的看到结构;

其次关掉自动播放,动画没有播放数据也就不会动态变化;

完成这两个设置之后就可以看到静态数据了,然后调试代码找到静态数据的规则,就不难看懂 json 文件了,同时也能查出没有渐变颜色到底是代码 bug 还是数据缺失!

初始结构和数据如图;

需要着重注意图中红框部分的生成规则;

因为过程较复杂就不详细阐述调试过程了,只列出关键点:

  • 入口函数loadAnimation

  • layers分类处理

由此可知layers应该是对应 AE 中的图层,而其ty属性则是图层类型的意思,比如4应该是形状图层;

测试可知2表示图像图层。

  • layers变换处理

由上图可知layers.ks应该就是图层的变换属性了;

各属性分别表示如下:

o 透明度;
r 旋转;
p 位置;
a 锚点;
s 缩放;

但是这里只是创建出TransformProperty对象,然后把这些数据赋值给该对象,动画执行时会根据TransformProperty对象计算出元素真正的变换矩阵,在后边会有说明。

  • shapes图层内容分类处理

layers.shapes对应 AE 图层中内容,主要用于绘制图形;

grSVG渲染器中对应Group元素;

layers.shapes.it则承载shapes的绘制信息,包括轮廓、变换、颜色等。

  • shapes变换处理

shapes.it.ty表示shapes绘制信息的类型,tr表示变换信息;

其属性含义和layers变换基本类似;

如果某个变换类型在动画过程中会发生变化,那么其k属性值是一个数组,数组中存储了属性变化过程;

比如彩旗的旋转属性在动画过程中会发生变化;

s表示开始值,e表示结束值;

上述数据的意思是彩旗开始从正10度旋转为负10度,然后又从负10度旋转为正10度等。

  • shapes渐变颜色处理

gf表示渐变颜色信息;

g属性表示渐变颜色数组;

每四位表示渐变颜色数组中的一个元素,第一位表示该颜色的位置,比如0表示位置在0%,接着的三位分别表示该颜色的RGB值;因为颜色值范围为[0,1],那么(1,1,1)也就对应(255,255,255);同理(0,0,0)也就对应(0,0,0)

json文件中的渐变数据为从黑色渐变为白色,因此示例动画中彩旗渐变有问题,就不是 Lottie 的bug,而是数据导出异常的问题了!

至于为什么会导出异常可能是设计师使用的属性不对,毕竟 AE 中不同效果有很多种实现方式,某些方式不能被 Lottie 导出也很正常。

既然现在已经知道了渐变颜色和什么属性有关,那么也没必要修改 AE 源文件了,直接修改json文件就好了。

把对应的渐变颜色转换为[0-1]表示即可:

修改渐变颜色bug示例

  • shapes形状处理处理;

sh表示形状信息;

SVG渲染器中一般会用路径表示;

如果你对SVGPATH指令熟悉的话,也就不难看出buildShapeString方法正是生成路径指令的方法了;

需要的注意的是:

此时的路径数据和原始json文件中的路径数据并不相同,比如原始json文件起点应该是[0,0],但是代码中的起点是[24.5,-2]

原因在于原始json文件中的路径数据为相对数据,需要进行一定的变换;

io分别得加上对应位置的v

  • 执行动画

在初始化完成之后会触发DOMLoaded事件,然后执行gotoFrame方法显示出第一帧,如果初始化时设置了自动播放,那么则执行play方法,开始播放动画;

play方法中会触发_active事件;

监听函数addPlayingCount会被执行,在监听函数中则会执行activate方法;

activate方法中会使用requestionAnimationFrame机制执行动画;

requestionAnimationFrame的回调函数中会执行advanceTime函数,其中会通过setCurrentRawFrameValue计算当前帧的数据;

最终渲染某一帧时还是会执行gotoFrame函数和初始化完成之后默认显示第一帧执行的方法一样。

在后续逻辑中有两个关键方法:

一个是prepareFrame,顾名思义在这个方法中会准备当前的数据,比如根据时间实时计算变换矩阵;

processKeys函数中输出当前帧某图层的变换矩阵就可以看到数据了。

另一个则是renderFrame,暂时没有详细了解,有兴趣大家可以自己去查看。

到此为止看懂天书一般的 json 文件应该是不存在什么问题了!

那么看懂 json 文件除了解决渐变颜色缺失的问题,还有什么其它的作用呢?

原生实现

目前看来好处说大不大,说小也不小!

比如可以根据 json 文件信息,不使用 Lottie,直接使用原生 SVG 代码来实现动画。

特别是在某些情况下出于资源大小或者性价比角度考虑,不能引入 Lottie 代码库;

对于上边的彩旗动画来说,可以在源代码中输出路径信息;

然后找到关键帧所对应的路径;

然后直接使用SVG原生的animateanimateTransform标签就可以实现了!

原生SVG实现

发表评论

电子邮件地址不会被公开。 必填项已用*标注