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

在使用Lottie输出矢量渐变图形的时候，应该有遇到过设计的渐变效果无法正常显示的问题。无论你设计的效果是什么样的，导出以后都变成了黑白渐变。那么这个问题可以修复吗？答案是肯定的。

Windows系统渐变修复

Lottie—json文件解析
打开动画json文件，找到异常代码

"g":{"p":2,"k":{"a":0,"k":[0,1,1,1,1,0,0,0],"ix":8}},
"s":{"a":0,"k":[29.855,-26.301],"ix":4}, 
"e":{"a":0,"k":[-28.663,0],"ix":5},

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

一般来说”s”，”e”属性是不会出错的，”p”表示颜色的数量，直接修改为正确的数值就行了。略显复杂的就是渐变色属性”k”了。

[位置1, 颜色1-R,颜色1-G,颜色1-B, ... 位置n, 颜色n-R,颜色n-G,颜色n-B,透明度1位置, 透明度1数值, ... 透明度n位置, 透明度n数值]

值得注意的是：k数组的取值为0到1之间的浮点数通常显示小数点后三位，那么颜色怎么算浮点数呢？

那么，如果我有一个k值
“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数值，
」

MAC系统渐变修复

此方法是在网上找到的，因为我用的是Windows系统，所以没有验证

其实在之前的文章中有提到过修复渐变的问题。对于MAC平台而言很简单，只需要修改渐变填充为Gradient即可，方法是选中渐变填充属性，点击键盘回车键即可重命名。(如果修改后还是无效，建议更新bodymovin插件为最新版)

参考文档：https://www.uisdc.com/lottie-dynamic-design-guide-4