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

源代码 · 2024-9-17 13:48:28

动效筹划在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

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

所属分类: 问答交流

新帖推荐: 30日

推荐作品