由sketch到ae到json

一个动图gif格式和导出json文件大小的对比不言而喻，下面直接介绍由sketch到ae到json的过程（大家有简单的办法欢迎留言分享）

         

一、AE插件Bodymovin的安装

      https://www.zcool.com.cn/article/ZOTE3ODM2.html

二、文件由Sketch导入到AE

1. 在sketch文件中将需要制作动画的文件编组

2.导出编组，格式选择svg

3.点击释放到图层，确保在sketch文件中的每一个图层在ai中都是独立的一个图层（遇到打组的情况，选中组再次点击释放到图层）

里面的渐变色在ai中不用处理，因为导入到ae中变成形状的时候渐变色会消失

最后的图层是呈这种点击每一个图层里面只有一个形状就好（为了在ae中方便找图层）

4.存储成ai文件

5.将存储好的AI文件导入到AE，选择 合成—保持图层大小

6.双击合成  打开图层

7.右击图层-从矢量图层创建形状，此处可以对图层进行重命名，也可以在AI释放完图层后重命名

7.创建好形状图层后，可以把之前的删掉；形状图层下有其他路径，点开进行删除，最终保留一条纯粹的路径，然后添加渐变色；其余图层也都这样处理，之后制作动画

三、导出json文件

1. 在窗口-扩展中调出bodymovin窗口，选择保存的动画，然后选择保存地址，最后选择渲染

2.渲染完成后，点击完成

3.https://lottiefiles.com/preview  在该网址可以预览导出的json文件，但是Bodymovin默认生成的json文件会将所有渐变的填充，编成黑白渐变。

四、实现渐变色

1.用文本编辑器打开导出的json文件

2.用查找功能找到渐变色的图层，之后找出渐变填充，在往前找到"k":[0,1,1,1,1,0,0,0]的数组，对数组进行更改

[0,1,1,1,1,0,0,0]=[位置1，R1,G1,B1,位置2,R2,B2,G2]

即[0,7/255,47/255,127/255,1,18/255,73/255,160/255]=[0,0.027,0.016,0.498,1,0.07,0.286,0.627]

                

5.修改完保存后，丢到上面的网址预览

最后附上几个超有用的链接：

1. https://www.zcool.com.cn/article/ZOTE3ODM2.html(插件安装和导出)

  2.https://www.zcool.com.cn/article/ZODQ4MjA4.html（调渐变色）

  3.https://lottiefiles.com/preview（Lottie动画预览）