主要是想记录自己在工作中遇到的问题的解决办法，也是为了防止自己在下次猴年马月之后再做动效的时候能找得到
动效设计在app里的重要性，我想不用多说。懂的都懂......
设计好的动效让开发照着写代码来实现，最后得到的效果往往不尽如人意。简单动效开发可以找模版来改，复杂点的找不到模版的就很难受了。写吧，效果不行；导GIF吧，占内存又不高清……有没有什么更好的办法呢？
当然有啊，社会在进步，工具在发展……^_^
这也是我自己在网上查找资料对比总结以后得到的结果。还是要感谢那些在网上无私奉献自己知识的前辈们。整理在这也算是给自己做个笔记。作为UI设计师，动效确实不常做，本人也确实出现了反复忘记的情况。最终决定做个自己吸收后的笔记，免得下次要做的时候又忘了（熬夜加岁月不饶人，记忆力衰退了）(/ω＼)
好了，废话不多说，我也懒得编了，下面直接干货吧
设备：MAC系统（我自己的是MacBook Pro 19款）
软件：AE（网上说2017以上都可以，我自己的是2021）——因为我自己喜欢更新软件，所以常用软件基本都保持最新版本
插件（主角）：Bodymovin（5.7.7）
如果以前下载过这个插件的，记得将目录下以前的文件先从根目录移除哟
关于设备有一点需提醒～
为什么是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”...这样的命名，这样就能识别到渐变的命名了。
需要注意的是：命名不能重复。命名的位置要正确，命名一定得在色彩设置的位置，改在形状名称位置是没有效果的。
修改完成后，注意一定要保存一下工程文件再重新导出。这样就能得到想要的了。