Lottie动画目前是比较好落地的一种动画方式，通过AE的Bodymovin插件输出的json，可以提交给开发使用，对接也比较方便。但Lottie提供Bodymovin输出json文件也存在一些问题，渐变效果无法实现。通过一番研究完美的实现json的渐变效果。

这是Lottie输出支持的效果，平时我们制作的时候也可以更加清楚，尽量避免踩坑，不过踩坑也没关系，我们今天就来说说渐变吧也是我们最常用到的。我们通过修改JSON文件来完美落地。

使用工具：After Effects CC、Bodymovin、Visual Studio Code（也可以使用系统的文本编辑器）

1、在sketch/ps 里制作好带有渐变效果的的设计图，在AE中完成动画的制作后，这里注意最好对图层进行下命名方便后面修改参数的时候进行查找。我这里命名是：cs1/cs2/cs3…

2、使用Bodymovin插件生成json文件

这个时候我们生成的json文件发现和我们的设计稿完全不一样。是黑白的，无法获取渐变信息。

3、我们使用Visual Studio Code（或者系统自带的文本编辑器）打开刚刚生成的Json文件

你可能会发现打开是一堆很乱的代码，看着有点头晕的感觉。不过不用担心。我们只要改其中一两个参数即可。如果实在看着烦你就整理下格式编排。

点击左上角的搜索（放大镜图标），我就可以根据我们AE里的图层命名进行搜索了。

这样我们就可以准确的搜索到我们要修改的渐变图层了。

到这里，我们看“cs2”后面的出现的 [0,1,1,1,1,0,0,0] 数组。这就是我们的渐变为啥变成黑白的原因了。这里需要换算一下，因为这里的参数需要的的是RGB颜色值的百分数。不能直接使用RBG颜色值的整数。

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

"s":{"a":0,"k":[-3.001,0],"ix":5},

"e":{"a":0,"k":[2.981,0],"ix":6}

这样我们就可以准确的搜索到我们要修改的渐变图层了。

----------------------------------------------------------------------

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

“p”:是指“渐变数量”  “k”:是指“渐变数值”

比如 你有2个渐变值，那么 “p”值为2，3个渐变值“p”值为3。以此类推。

"k":[0,1,1,1,1,0,0,0] 颜色值：:[0,1,1,1,1,0,0,0] =:[位置,R1,G2,B3,位置,R1,G2,B3] 。第一个数为位置，后面3个数值为RGB的颜色值

所以我们这里的参数就是 [0,0.996,0.565,0.196,1,0.996,0.325,0.196]

"s":{"a":0,"k":[-3.001,0],"ix":5},       起始点

"e":{"a":0,"k":[2.981,0],"ix":6}。       结束点

同样对应着我们AE里面的起始点和结束点

改好后，保存一下。大功告成！

可以点击链接预览制作完成带有渐变的动画 https://lottiefiles.com/share/aSk6Wq

给我老铁如果觉得我的文章能给你带来帮助，解决您的问题。你就给个赞