前端 - Lottie 中渐变填充的实现研究(一)

简介: 前端 - Lottie 中渐变填充的实现研究(一)

Lottie动画以制作简单,对接方便被越来越多的开发团队所接受并使用。但json文件格式也有自身的一些问题,其中比较严重的是不支持渐变效果。以下文字将为您详细说明,如何通过简单源码的修改,让你的Lottie动画支持渐变。


Lottie官网介绍

关于Lottie基础,这里不详细赘述了,请大家自行查阅。

准备工具


image.png



必备的AE和Bodymovin插件,编码器推荐VS Code(因为逻辑层级有颜色标注...),实在不行系统自带的文本编辑也可以。

在AE中制作一个渐变填充的矢量小球


image.png


为了方便讲解,这里就不加任何动效了。

使用Bodymovin生成Json文件


image.png


将.json文件拖到 Preview & Test Lottie Animations on Web, iOS and Android 官网预览效果,你会得到以下的样式。



image.png


Bodymovin默认生成的json文件会将所有渐变的填充,编成黑白渐变。

目录
相关文章
|
JavaScript 前端开发
React+html2canvas+jspdf+antd快速实现前端pdf预览及打印
文章的总结目标实际上就是一个前端pdf打印组件,由於能在往后的其他项目中得以快速上手,并能根据所在项目需要快速自定义扩展,因此組件非常简陋直白,文章是实践过程的记录产物,并不保证完全正确,仅作参考。
React+html2canvas+jspdf+antd快速实现前端pdf预览及打印
|
7月前
|
前端开发 JavaScript API
前端技术栈方向研究报告
前端技术栈方向研究报告
114 0
|
7月前
|
编解码 前端开发 JavaScript
前端技术发展趋势与应用研究
前端技术发展趋势与应用研究
108 0
|
安全 前端开发 JavaScript
前端(十六)——Web应用的安全性研究
前端(十六)——Web应用的安全性研究
297 0
|
7月前
|
JSON 前端开发 JavaScript
🌟前端使用Lottie实现炫酷的开关效果🌟
🌟前端使用Lottie实现炫酷的开关效果🌟
|
前端开发 JavaScript
微前端实现方案之iframe
微前端实现方案之iframe
微前端实现方案之iframe
|
JavaScript 算法 前端开发
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路,以及它们之间的性能比较
351 1
|
JavaScript 前端开发 IDE
如何从一台新电脑配置前端常用工具实现快速开发
如何从一台新电脑配置前端常用工具实现快速开发
如何从一台新电脑配置前端常用工具实现快速开发
|
前端开发
前端实现导出word(docxtemplater、pizzip、jszip-utils、file-saver )
docxtemplater、pizzip、jszip-utils、file-saver 前端实现导出word
1245 0
前端实现导出word(docxtemplater、pizzip、jszip-utils、file-saver )
|
存储 JSON JavaScript