一直想要做一些关于AE动效转JSON文件的教程，今天看到UI中国已经有人进行了相关总结，但是里面有一些内容不是很全（甚至有一些错误），所以写一些经验分享给大家，进行相关补充。

以下是 腾讯动漫TCD 写的相关教程，整体流程是比较全面的。（私自放了链接，侵删），我也是基于他的内容进行了补充：

设计师轻松实现动效转lottie神器-AE插件Bodymov

https://www.ui.cn/detail/458791.html

下面是我的相关补充和纠正：

一.图层固有属性 渐变填充（gradient fill）是可以应用在JSON中的

首先要说明的是渐变填充是指形状图层的渐变，即Gradient fill，而并非AE特效里的渐变填充Gradient Ramp，后者是不能在JSON中应用的。

要实现渐变填充注意的关键点：

1.导出JSON文件一定要使用Mac机，PC机导出的JSON文件确实无法实现渐变应用；

2.尽量使用高版本AE和bodymovin插件，我使用的是AE2018cc和最新的bodymovin；

3.一个AE工程文件里，可能有多个图层使用了gradient fill属性，一定要对各个图层的该属性进行重新命名。

其中第1,2条不再赘述，重点对第三条进行说明：

如上图动效，是我做的信息加载时的缓冲动效，为了避免体积过大，所以完全是在AE中用钢笔进行绘制，没有使用图片。可以很明显看到有很多处用到了渐变，卡片，手，衣袖等，所以一定要对有应用到该属性的图层进行gradient fill的逐一命名，命名要保证Gradient Fill作为前缀，这是JSON文件识别渐变属性的关键词。例如，Gradient Fill 1，Gradient Fill 2，Gradient Fill 3····截图如下：

如果你仔细看，发现我的属性里没有Fill（填充）属性，当然你也可以保留Fill属性，但是一定要保证Gradient Fill置于Fill之上，否则渐变会被填充覆盖；但我更建议删除Fill，一是因为Fill此时是冗余属性，如果更改工程时需要，再进行添加即可，二是图层边缘可能会露出半像素Fill的颜色。

二.图层蒙版Mask属性在JSON中的应用

AE中常用的蒙版有两类，一种是图层之间的Track MATTE，此类无法用JSON导出，如下图：

另一种是图层蒙版Mask（以下都简称Mask），我说讲的就是这一类的使用，如下图所示：

下面是一些使用到Mask属性的动效

1.静态mask举例说明：

手指和手指下的光圈（即图层light）有覆盖关系，此处对光圈使用了Mask，需要说明的是光圈由多图层组成且自身有缩放等运动，所以将光圈合并为合成，下图中蓝色边框即为mask形状。如下图：

因为光圈（图层light）相对于手（图层hand）没有相对运动，将光圈和手进行父子级绑定，所以此处mask不需要进行k帧变化，静态即可，即能实现能够遮挡手指下空间的作用

2.动态mask举例说明：

由于动效要保证不能遮挡黑色图层下的UI页面，都是使用描边属性，而上层卡片在滑动时，会对下层卡片进行遮挡，如果一帧一帧去画会增加很多工作量，此时就要对下层的卡片（卡片依旧合并为合成）使用了mask。下图紫色边框即为蒙版：

区别于第一个例子里的手指和光圈，上下层卡片是有相对运动关系的，造成上层卡片对下层卡片的遮挡区域是不断变化的，所以对下层卡片的mask也需要做相对地调整，如下图，对mask path进行k帧动画：

3.关于mask需要注意的点：

mask和图层可以进行加（add）减（subtract）运算等，但是对于JSON文件，AE里用到的mask模式的add和subtract，安卓是可以读到的，但是ios无论哪种模式，都会读为add，所以在用mask的时候，只用add模式

三.bodymovin导出JSON时的一些选项设置

腾讯动漫TCD写的文章里有提及最后导出的JSON文件预览，即使用插件bodymovin自带的“preview”功能

但这个功能有个缺陷，就只能静态浏览，需要自己拖进度条，所以如果为了验证导出是否成功可以在导出时进行选项设置，勾选设置里的Demo，（第二项Glypha是默认勾选的）如下图：

这样会导出一个格式为*.html格式的demo，可以用浏览器预览效果，方便快捷：

当然如果你的动效将要放置在黑色背景，所以做成纯白色，还是要使用preview功能的。

以上就是我此次做的一些补充说明，动效学无止境，仅贡献一些自己的经验，大家可以互相学习交流。