动效设计在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
