Lottie输出渐变填充研究

用户头像
上海/UI设计师/6年前/1062浏览
Lottie输出渐变填充研究
用户头像
太平__

通过修改源码,实现同一渐变控制栏下,多个渐变的转换

前言

了解lottie的同学应该知道,ae制作的渐变动效通过lottie输出会变成黑白色,而根据之前诸多大神的建议,windows版本只要修改json文档里的相印值就可以了,如下图:




但上周五制作一个动效时,忽然发现我的json文档中直接搜索 “k”:[0,1,1,1,1,0,0,0] 是没搜索结果的:



重点来了

这样我就无法定位数值,一开始我不知道是我个人电脑有问题还是都是如此,私信问了各位大神也没有得到解决,直到今天我对比一下之前别人发布的教程,发现之前了一些问题:

由于无法靠之前教程上所说那样去寻找代码来进行修改颜色,我便根据大神们的推导,依靠(“p”表示构成渐变色的数量 )这个原理,我直接在文档中搜索“p”:2,后来得到以下结果:



刚好与我的动效里的确有四个形状是被赋予渐变的渐变形状的,接着我选中其中一个来查看它的整体代码,发现了这样一个语句:

{"p":2,"k":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":9,"s":[0,1,1,1,1,0,0,0]},{"t":10,"s":[0,1,1,1,1,0,0,0]}],"ix":9}}

是不是和之前这串代码有点像?

{"p":2,"k":{"a":0,"k":[0,1,1,1,1,0,0,0],"ix":9}}



 两者相比较,我发现一个最重要的元素—“t”


按照生活常识,t一般用来代替时间,于是我对比了AE文件,发件代码中"t":9," "t":10," 是我的渐变填充中两个关键帧的时间:



所以我试着修改代码中“t”后面的 "s":[0,1,1,1,1,0,0,0] 内的数值,然后预览

预览链接:https://lottiefiles.com/share/2GY3Vh



到了这一步,基本问题就解决了,相比之前的教程,其实也只不过是换汤不换药,但因为一般用到这种情况的同学可能比较少,所以这两天查遍教程也不清楚啥情况,如果以后有同学碰到这样的问题,不妨试试我这个方法,如果这个办法还不行,那就自己琢磨琢磨,还是那句话,换汤不换药。

总结:

渐变转渐变的情况下直接搜索"p":2 确定渐变数量是否一致,然后找到"t":,并修改"s":[0,1,1,1,1,0,0,0]内的值;

修改方法就与之前教程中是一样的,我就不多说了,主要打字太累https://www.zcool.com.cn/article/ZODQ4MjA4.html  网址里有


ps:有一种在写学术论文的感觉,哈哈哈哈哈哈哈




10
举报
|
13
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】会员icon
3D卡通UI界面图标可爱插画免扣素
Security Camera UI kit
【新年UI图标】汽车icon
高级表盘系列UI源文件
智能家居中心 简约 UI设计组件库
手表表盘UI系列
【新年UI图标】旅行icon
拟物风质感写实UI卡片合集源文件
【新年UI图标】30个图标
UI 登录界面设计模板包
UI界面 组件
户外旅行飞机情侣假日出行
钱包ui模板
高级感金属拟物 UI设计组件库
新拟态风格 UI设计组件库
UI通用设计素材1
3D渐变流体抽象矢量UI背景图
新能源APP应用UIKit
科技医疗透明柜UI界面设计
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】礼物/活动icon
【新年UI图标】钱包icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
你可能喜欢
相关收藏夹
大家都在看
登录注册