Lottie动画以制作简单,对接方便被越来越多的开发团队所接受并使用。但json文件格式也有自身的一些问题,其中比较严重的是不支持渐变效果。以下文字将为您详细说明,如何通过简单源码的修改,让你的Lottie动画支持渐变。
Lottie官网介绍
关于Lottie基础,这里不详细赘述了,请大家自行查阅。
准备工具
必备的AE和Bodymovin插件,编码器推荐VS Code(因为逻辑层级有颜色标注...),实在不行系统自带的文本编辑也可以。
在AE中制作一个渐变填充的矢量小球
为了方便讲解,这里就不加任何动效了。
使用Bodymovin生成Json文件
将.json文件拖到 Preview & Test Lottie Animations on Web, iOS and Android 官网预览效果,你会得到以下的样式。
Bodymovin默认生成的json文件会将所有渐变的填充,编成黑白渐变。