前端 - 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文件会将所有渐变的填充,编成黑白渐变。

目录
相关文章
|
5月前
|
人工智能 IDE 定位技术
AI IDE正式上线!通义灵码开箱即用
作为AI原生的开发环境工具,通义灵码AI IDE深度适配了最新的千问3大模型,并全面集成通义灵码插件能力,具备编程智能体、行间建议预测、行间会话等功能。
803 13
|
9月前
|
缓存 负载均衡 安全
Swift中的网络代理设置与数据传输
Swift中的网络代理设置与数据传输
|
12月前
|
存储 安全 网络协议
阿里云服务器通用型g7、通用型g8y、通用型g8i实例性能和适用场景对比与选择参考
目前阿里云在售的云服务器中,主要包含了第6代、第7代、第8代实例规格的云服务器产品,在选择云服务器实例规格时,对于需要平衡计算、存储和网络性能的应用场景来说,通用型g7、通用型g8y和通用型g8i实例是许多用户的热门选择。为了帮助大家更好地了解这三款实例的区别,并为选择提供参考,本文将详细对比它们的实例规格、CPU、内存、计算、存储、网络等方面的性能,并附上活动价格对比。让大家了解一下他们之间的不同,以供参考选择。
|
存储 安全 开发工具
oss加密的工作流程
阿里云OSS提供服务器端(SSE-KMS BYOK、SSE-KMS默认密钥)和客户端(CSE)加密。SSE-KMS通过KMS托管密钥或默认密钥在服务器端自动加密/解密对象,减轻用户负担。CSE则在客户端加密数据,使用SDK和用户密钥,灵活性高但管理复杂。两者均保障数据传输和存储的安全。用户可依据安全需求和合规性选择加密方式。
389 4
|
SQL 分布式计算 Apache
Apache Superset
Apache Superset
|
文字识别 小程序 数据安全/隐私保护
9款文字识别(OCR)工具推荐!涵盖移动端、网页端、PC端,满足您的所有需求!
9款文字识别(OCR)工具推荐!涵盖移动端、网页端、PC端,满足您的所有需求!
2747 0
|
NoSQL 算法 Java
面试官:说一下红锁RedLock的实现原理?
面试官:说一下红锁RedLock的实现原理?
385 0
|
机器学习/深度学习 存储 人工智能
AI 绘画Stable Diffusion 研究(十五)SD Embedding详解
AI 绘画Stable Diffusion 研究(十五)SD Embedding详解
1689 1
|
云安全 安全 数据安全/隐私保护
逃得过病毒查杀,逃不过云枢EDR ——“内存马缉拿记”
近期,领先的SASE安全厂商亿格云进行了重要的EDR功能更新,其中包括高级威胁行为检测、内存扫描以及终端事件审计和溯源等功能。在最新的一次客户使用过程中发现了多起安全事件,于是我们随即配合客户进行了详尽的调查。
逃得过病毒查杀,逃不过云枢EDR ——“内存马缉拿记”