Lottie 动效设计完全指南：渐变修复

大家在使用Lottie输出矢量渐变图形的时，应该有遇到设计的渐变效果无法正常显示的问题。无论你设计的效果是什么样的，导出以变成黑白渐变。么个问题以修复吗？答案是肯定的。

MAC系统渐变修复

其实之的文章中提到过修复渐变的问题。对于MAC平台言很简单，只需修改「渐变填充」「Gradient」即可，方法选中渐变填充属性，点击键盘回车键即可重命。(如果修改后还无效，建议新bodymovin插件新版)

Windows系统渐变修复

1. 双色渐变修复

对于win系统，上的方法是，修改ae为英版，同时需要修改系统语言编码方式，历史章中有到。但是进行实操后发现，特别繁琐。而且容易导致他软件错。得偿失。这里给win系统的修复方案，由于Airbnb官方一直没有修复这个问题的打算（可歪果仁的版本就会错），只咱们自己想办法了。

知道lottie是通过json文件来描述动效的，那比对正常显示渐变的json文件和显示异常的文件就极有可能发现问题出现的因。所以针对头图中的渐变圆形，比对了一下个json文件的差异。发现问题来下下面这一行代码。

常显示的json文件中，这段码这样的

"g":{"p":2,"k":{"a":0,"k":[0,0.047,0.518,1,1,1,0,0.941],"ix":9}}

而在显示异常json文件，代码是这样婶儿

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

WTF？这谁能得懂，一脸懵逼好。别着急，咱慢慢析。首先代码不同的只有中括号中的数字。那这面的数字必然是用来控制颜色的。而知道常用的色彩模式有HSB和RGB。而本示例中的渐变参数如下，只要找对应关系就能发现其中的秘密。

考验逻辑思维的时候到了，对比面的第一行码下面的参数能找到对应关系吗？

首先我们知道无所哪种色彩模式，控制色彩的都三参数，但括中一共8参数，那么另外两就必然控制其他属性的。渐变控制器中，我们发除了色彩参数还不透明度置属性，这里我们用到不透明度那么就一用表示置的。

我们的渐变颜始位置和终止位置分别位0%和100%，么不难猜出，在上述代码中就是0和1，么0和1面的三个参数显就是表示彩的。

是不是感觉胜利在眼前？然而我穷尽了九年义务教育学到数学知识，也没有找到任何规律。后来我在网上搜素哦色模相关文档，意发现了这个

具体咱也看不太明白，反正是RGB有各不显示法。其有被称为浮数表示法。计算为分用R,G,B值除以255。然后我用色编辑值计算了下，顿时真相大白！

json代码色是过浮数来表示，需要用颜色R,G,B值分处以255，即可到浮表示色值。

因为经有除尽的情况，这里通显示小数点后位。到了这里我们就明白导致渐变现问题的原因和修复方式了。

对于双色渐变修复的方式就是在json件中搜索「”k”:[0,1,1,1,1,0,0,0]」，然后修改为「颜色1位置，R1/255,G/255，B1/255,颜色2位置，R2/255,G2/255，B2/255」即可。

这就完了吗？别急，在日常工作当中可能还会遇透度渐变或者多色渐变的情况。这个候怎通过修改json文件来解决呢？这就不详述过程了，直上干货。

多色/透明渐变修复

首先需要知道的一个事实是，当的导出的渐变不生效，通常显示的是下面的代码，也就是说不管你有种颜色，默认显示的都是黑渐变”k”:[0,1,1,1,1,0,0,0]，其实这个也给带来了一个便利，就是只要在代码编辑器查找这一段代码就可以快速定位了。

接下我们就通过一稍显复杂的案例详解渐变的终极修复方法。下图一三色渐变的圆形及其AE中的参数

首先这个渐变圆形有三种不同的颜色，然后有三个不透度控制滑块。不透度滑块1位置是0.1，不透度数值为0.5；不透度滑块2位置是0.5，不透度数值为1；不透度滑块3位置是1，不透度数值为0.

我们再对比一下，问题的码常码之间的差别。

"g":{"p":2,"k":{"a":0,"k":[0,1,1,1,1,0,0,0],"ix":9}},
 "s":{"a":0,"k":[-75,-75],"ix":5},
 "e":{"a":0,"k":[75,75],"ix":6},

"g":{"p":3,"k":{"a":0,"k":[0,0.825,0.109,1,0.5,0.412,0.116,1,1,0,0.124,
 1,0.1,0.5,0.5,1,1,0],"ix":9}},
 "s":{"a":0,"k":[-75,-75],"ix":5},
 "e":{"a":0,"k":[75,75],"ix":6},

通过对代码和AE中的参数我们大致可了解到信息

• “p”表示构成渐变色数量
• “k”表示渐变色的属性
• “s”表示渐变起始点
• “e”:表示渐变结束点

一来说”s”，”e”属性是不会出错的，”p”表示颜色的数量，直修改为正确的数值就行了。略显复杂的就是渐变色属性”k”了。当对照AE中的渐变色属性一一比对就会了解在此案例中

“k”:[0,0.825,0.109,1,0.5,0.412,0.116,1,1,0,0.124,1]=「颜色1置，R1/255,G1/255，B1/255,颜色2置，R2/255,G2/255，B2/255，颜色3置，R3/255,G3/255，B3/255，透明度1置，透明度1数，透明度2置，透明度2数，透明度3置，透明度3数，」

看似复，其只是颜和透明度属的不断重复，首先描述完所有的颜属，描述完所有的透明度属就以。

最后我们到了个过改json，复渐变问题用做法。

• 在json中搜索代码段”k”:[0,1,1,1,1,0,0,0]来定位内容（推荐使用sublime text和notepad++修改json文件）
• 改”p”后数值为正确色数量
• 修改”k”后面的参数为正确的渐变参数，一般表示为「颜色1属性，颜色2属性，……颜色n属性，透明1属性，透明1属性，……透明n属性」

备注：

• 颜色属性：颜色位置，R/255,G/255，B/255
• 透明度属性：透明度置，透明度数

欢迎关注作者公众号：「动效研究社」