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,可能有问题,不只是替换文本就行,还得动态计算背景宽度等等。
设计师的想法
光晕
波纹
一些效果
CodePen2016最佳效果:
https://zhuanlan.zhihu.com/p/24969846
炫酷:
https://codepen.io/zadvorsky/pen/PNXbGo
参考资料
中文教程:
AE通过Bodymovin导出动画: