AE+Lottie的动画方案

hi,我们接下来要在短时间做很多带有动效的组件(比如带有个性化动画的柱状图),我看网上有AE+lottie的实现方式,我记得好像之前听你说过你们有用过这种方案,因此想请教下:

这种方案:
1、支持动态改变数据么?比如柱状图的数据是根据后端接口来绘制的
2、支持动画按帧数控制么?比如可以指定跳转到某一帧(可以前进、后退)

WHW:
这两种都是可以的,lottie本身文件也是帧数信息+样式信息+资源信息的dsl,可以改dsl参数来控制数据也能像视频一样控制播放

来画就是用lottie+SVG动画的方式来实现的。

策略

两条线并行走,避免一个方案走不通。

找个人专门琢磨AE+Lottie的方案,写代码解析bodymovin导出的JSON文件。

名词概念

bodymovin

这是一个AE插件,用于导出动画

导出的JSON的数据结构:

牛逼的原理解读:

https://blog.51cto.com/u_15089766/2602196

https://www.jianshu.com/p/e41c7d826324

https://juejin.cn/post/6935677483672928287

lottie就是一个绘图库,也是分为8种基本类型进行绘制的。

数据结构

AE导出来的JSON文件有点长的,

风险点

动态数据长度

比如数值,有的情况是3位数字,有的情况是5位数字,这个通过解析AE的JSON,可能有问题,不只是替换文本就行,还得动态计算背景宽度等等。

设计师的想法

https://mp.weixin.qq.com/s?__biz=MzA5NzQ3Mzc4OQ==&mid=204269932&idx=1&sn=dff3375db7addf1ff036cfe9969c0017#rd

光晕

波纹

一些效果

CodePen2016最佳效果:

https://zhuanlan.zhihu.com/p/24969846

炫酷:

https://codepen.io/zadvorsky/pen/PNXbGo

参考资料

中文教程:

https://medium.com/as-a-product-designer/%E5%BF%83%E5%BE%97%E5%88%86%E4%BA%AB-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8lottie-%E5%B0%87%E5%AE%8C%E7%BE%8E%E5%8B%95%E7%95%AB100-%E5%91%88%E7%8F%BE%E5%9C%A8%E7%94%A2%E5%93%81%E4%B8%8A-7ac7107abfa5

AE通过Bodymovin导出动画:

https://www.youtube.com/watch?v=5XMUJdjI0L8