AE导出json文件以及渐变色问题办法

动效设计在app里的重要性，我想不用多说。懂的都懂......

设计好的动效让开发照着写代码来实现，最后得到的效果往往不尽如人意。简单动效开发可以找模版来改，复杂点的找不到模版的就很难受了。写吧，效果不行；导GIF吧，占内存又不高清……有没有什么更好的办法呢？

当然有啊，社会在进步，工具在发展……^_^

这也是我自己在网上查找资料对比总结以后得到的结果。还是要感谢那些在网上无私奉献自己知识的前辈们。整理在这也算是给自己做个笔记。作为UI设计师，动效确实不常做，本人也确实出现了反复忘记的情况。最终决定做个自己吸收后的笔记，免得下次要做的时候又忘了（熬夜加岁月不饶人，记忆力衰退了）(/ω＼)

好了，废话不多说，我也懒得编了，下面直接干货吧

设备：MAC系统（我自己的是MacBook Pro 19款）

软件：AE（网上说2017以上都可以，我自己的是2021）——因为我自己喜欢更新软件，所以常用软件基本都保持最新版本

插件（主角）：Bodymovin（5.7.6）

插件下载链接: https://pan.baidu.com/s/1ZFbJAs6mVwpZmummMsRZyw 提取码: 9081

关于设备有一点需提醒～

为什么是MAC：并非是windows系统不支持导出json文件。据交友群的A说，TA自己的win也是可以用Bodymovin插件导出json文件的。只是这效果吧……由其是在处理渐变色导出的问题上，是相当困难，怎么个困难法，在下文的渐变色问题中会给大家解释，所以推荐大家使用苹果系统。本人也使用的Mac，所以Windows的具体办法，本人懒，也没去亲测哈

导出json步骤

安装或者更新AE：详情略

安装插件Bodymovin：详情略（是真的跟着点就行）

打开插件：

窗口>>扩展>>Bodymovin(如果没找到，那一定是没安装好)

你可以得到这个界面👇 ·红色方块标记的地方表示的是选择导出项，绿色就表示你选择了这项导出·红色圆形标记的地方是导出设置·红色横线标记的地方是文件保存地址和命名建议大家在导出的时候先在需要保存的位置建一个文件夹，导出的时候把文件保存位置改成文件夹位置。这样导出很多项的时候也不会乱

重点来了，导出设置

点击设置后，默认勾选以下三项

勾选demo是为了能导出一个html文件用来检查所导出的文件效果是不是你想要的，毕竟json文件只是一堆代码，看不懂。demo选项下的background color选项不要勾选。其他选项的功能，大家可以去研究研究

勾选好后，点击“save”保存一下。一般来说，只有勾选一次，它就会记录你的选项，下次就不用再勾选了。为了以防万一，可以点击弹窗右上角的“Remember setting”记录你的勾选项。

如果你还是担心，那就关了它，再打开看看，TA有没有勾选你上次勾选的项

设置好后点击“render”开始导出，你会看到这个界面👇

进度条跑完，则导出成功。通常来说，进度条是很快的，如果超过10分钟，要么是你的项目是真的复杂，要么可能就有问题了。如果有问题建议检查一下插件是否安装正确

导出成功后，你会得到这么两个文件

后缀为“.json”的文件就是需要交付给开发的，直接引用即可，所以说动效的还原度肯定就是100%了！

demo文件中有一个“html”文件。右键用浏览器打开它，即可预览导出的实际效果。

打开后，你会发现TA是没有固定大小的。这是没问题的，开发限制大小就行。

关于渐变色导出失败变成黑白的问题

网传办法:修改代码中的渐变色的值，你需要做的是把json文件用记事本的方式打开，从中找到你的渐变色的那串代码，然后把渐变的色彩值改了，渐变位置（0，1）改了。……我挣扎过，但是改完给开发说还是黑白的，所以我也不知道我哪儿改错了

另外一个办法：

在AE工程文件中，将所有有渐变色的元素中，渐变属性的地方名字改成“Gradient Fill 1”“Gradient Fill 2”“Gradient Fill 3”...这样的命名，这样就能识别到渐变的命名了。

需要注意的是：命名不能重复。命名的位置要正确，命名一定得在色彩设置的位置，改在形状名称位置是没有效果的。

修改完成后，注意一定要保存一下工程文件再重新导出。这样就能得到想要的了。

另外提醒的是：如果AE源文件中有使用到png的素材也是可以应用这个插件导json文件的。只是除了“json”这个文件还会到处一个“image”的文件夹，这里面就是使用到的png素材，需要一并发给开发。

原文链接：https://www.zcool.com.cn/article/ZMTM0OTU2OA