页面动效制作导出json文件,所需插件及遇到的相关问题

https://www.huaweicloud.com/articles/bd85b38774ba51c70b762f0ff8b0b726.html

参考学习帖子

一、安装动效导出插件Bodymovin

所需插件,见AE插件文件,网上可直接搜索下载.

安装ZXP intall ,而后将bodymoving文件直接拖入ZXP界面中,即可完成安装.

打开AE,首选项-常规-允许脚本写入文件和访问图层.

不同AE版本,打开的“脚本和表达式”的位置不同,以下截图是我本地软件AE2020的“脚本和表达式”的位置.

二、把AI绘制好的图案导入AE文件(问题二:AI渐变图层,导入AE会丢失,变成黑白灰)——Overlord插件安装

AI文件内需分图层,并做好图层命名,英文命名.

解决方法:安装插件:OVerlord.

参考网址

https://blog.csdn.net/weixin_39961943/article/details/110566336

https://zhuanlan.zhihu.com/p/75122105

第一步,下载插件Overlord.安装包中一般包含:

第二步根据下载包中的“安装方法”进行安装,一步都不能少.

1.拷贝Overlord 文件夹到以下位置:
Win : C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\

2.mac:资源库 / Application support / Adobe / CEP / extensions /如下图:

以及 用户/用户名/资源库/Application support / Adobe / CEP / extensions /如下图:(部分电脑的资源库会被隐藏起来,可以在finder中输入“资源库”找到这个文件夹.)

以及用户 / 用户名 / 资源库 / application support / BattleAxe /，如下图：

以上三个地方是一定要复制进去的,否则安装就会有问题.

3.打开AE软件设置，勾选上*允许脚本读写和访问网络
Win：编辑-首选项-常规
Mac：After Effects CC-首选项-常规

4.在软件顶部window窗口菜单-扩展下打开Overlord脚本

5.随意乱输入注册码，然后点击UNLOCK即可。
界面会有弹窗,出现输入框,输入随意数字和字母,回车键,点击unlock,多试几次.成功时,就会弹出overlord的工具弹窗.

以上工具截图说明,是截图了知乎番茄炒蛋博主的,感谢哈~我是只用了第一个、第三个和第四个.

6.AI文件中的overlord的工具怎么打开.

注意:安装好AE插件后,需要把AI文件先关闭重启一下.点击窗口扩展功能–overlord.即可打开overlord窗口.

工具安装完成,如何使用overlord?
https://www.bilibili.com/video/av926294940

同时把AE、AI的overlord打开.到AI中,选中元素,点击插件第一个图标,AE中,就会出现这个元素啦!
如何快速选择元素呢?ctrl+a,全选,再点击第一个图标,AE中就全都打进去啦~

AI、AE软件的Overlord都打开,尝试一下,是否能来回切换,导入元素是否正常.

三、动效制作,导出json文件

AI图层导入到AE后,需要把包含渐变效果的图层命名进一步修改成英文,才能被插件识别.最好是都用英文命名.

一般是改成“Gradient Fill ……”,省略号可以是图层具体的一些描述.

重新命名时,有的图层右键是出不来的,直接点击图层,enter键,就能输入了.

文字导出时,容易出现错误,先选中文字图层,右键--创建--从文字创建形状,就会有一个“……轮廓”的图层出现了.可删掉原来的T图层.

四、导出json,检查效果.

Selected,高亮表示选中.尾部一般有一个三点符号,可以选择文件夹位置.setting中,可以设置导出的文件格式.选json.

导出的文件只有一个json文件.

将导出的json文件上传至,以下这个网站预览一下,检验一下效果.直至OK,再把json文件发给前端开发即可.

.https://lottiefiles.com/preview/animations

My Previews.预览画板.

用AI和AE制作动效,第一次没经验,遇到很多问题,多亏了网上很多博主提供了非常详尽的帖子,在这里,我把遇到的很多问题都整合到一起,希望能给自己道友一些小小的帮助.与君共勉!