恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Lottie输出渐变填充研究
0.0°
2020-06-09 原创文章 教程 举报 1839 15 4 3

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

了解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]内的值;


修改方法就与之前其他大神教程中是一样的,我就不多说了,主要打字太累

给个赞吧!

Powered by Froala Editor

更新:2020-06-09

收藏

15人已收藏

太平_

那就搞啊!

  • 2

    作品

  • 3

    粉丝

  • 0

    关注

  • GEX交易所 | 2.0改版

    猜你喜欢

      2020-06-09 原创文章 教程 举报 1839 15 4 3

      Lottie输出渐变填充研究

      0.0°

      你确定要举报Lottie输出渐变填充研究

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年06月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      15
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录