Lottie输出渐变填充研究

  • 经验类型教程
  • 经验属性原创文章
  • 经验版权署名-非商业性使用
2213 3 4 2020-06-09

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

了解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

全部评论:3

  • 太平_

    2020-07-03 16:43

    @Enter、铭: https://www.zcool.com.cn/article/ZOTYwMTc2.html这里可以看到数值修改的原理

  • Enter、铭

    2020-06-24 15:59

    看不懂啊,到最后你把数值改成什么数值了?直接输入RGB值?"颜色1位置""颜色2位置"又是什么?

  • 太平_

    2020-06-15 17:51

    @Luna629: 我win10不行

  • Luna629

    2020-06-15 16:38

    ae中的渐变属性改成拼音或英文就行了

  • 太平_

    2020-06-12 15:52

    @: 抱歉,我也是第一次写这玩意,所以不够详细

  • 2020-06-12 14:35

    太快!没看清

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票