虽然AE拥有优秀的动画制作能力，但是想要用它来做界面设计稿还是很麻烦的，所以通常我们在设计UI界面设计时都是通过、、来设计的。

那么，如何将这些文件导出到AE中方便地制作动画，相信看完这篇文章你不会感到困扰。

我之前写过两篇关于如何将AI文件导出到AE的文章，如果你还没有看过，请点击传送门：

如何将文件导入AE

以其轻量、高效、易用、海量的脚本，如今成为UI设计师最常用的软件之一。 制作出日常使用的设计稿后，不仅要无缝导出和交互动画效果，有时还需要导出AE来做一些复杂的动画设计。

那么，我们来看看如何将文件导出到AE。

首先我们需要安装一个来自AEUX团队开发维护的插件（改名前命名），可以到脚本官网下载获取脚本：

或者在公众号“莫兰动效”后台回复“脚本”即可下载莫兰常用的脚本合集，包括本文中的所有脚本。

下载并解压后，您将得到两个文件，即“AEUX”。 和“AEUX.zxp”。

845b308825f2b9ae0095b24762957ae8

“艾克斯。” 是一个插件，直接双击安装即可，比较简单。 “AEUX.zxp”文件是AE扩展文件，安装方法有点麻烦，可以通过使用扩展安装程序来完成。

我们在AE中使用的其他扩展都可以使用这个安装程序来安装，比如Flow，用于动效落地&切换，安装方法是一样的。 这里我们使用AEUX作为演示案例。

AE扩展安装程序可以通过以下网址下载：

可以听说官网上都有两个系统的版本，大家可以根据自己的系统下载。

安装扩展安装程序后，打开它sketch可以导入ai吗，然后将“AEUX.zxp”文件拖到安装程序窗口中进行手动安装，或者使用快捷键“Cmd+O”打开扩展文件。

如上图所示，安装程序打开后会有提示窗口。 这里不要忽视它。 您可以单击“关闭”按钮。 完成后会出现如下提示框，说明安装成功。

之后，您可以在AE的“窗口”菜单栏的“扩展”选项中找到名为“AEUX”的扩展，并且可以从“插件（）”中下载插件。

这里有两种导出方式。 第一个是点击“”，直接将选定的视口和画板内容导出到AE。 这个过程是在后台传输的，比旧版本更快、更稳定。

第二种方式是点击“.json”，笔记本中会生成一个名为“AEUX.json”的文件。 此时，将“AEUX.json”文件推入AE中AEUX面板上方的白色区域，或者点击面板中的“ ”按钮加载“AEUX.json”文件。

两种方法没有太大区别。 第二种方法还有一个额外的目的，例如将导入的文件发送到没有该文件的笔记本。

接下来介绍一下AEUX面板中的其他功能

插件 AEUX 面板

1.

()会以预合成的形式导出到AE中。 如果出现错位和变形，可以在导出之前使用此按钮释放（组件）。

2.

AEUX支持导出布尔运算，并且在一组中混合不同的运算符（例如加和除），AE可能无法正确还原它们，因此对于更复杂的布尔运算图形，可以先单击合并布尔运算图形，然后导出到AE。

3.到

如果发现导出到AE的文件有裁剪和位移，需要点击后再导入。 AEUX 只能导入它在画板上看到的内容。 如果内部图像的一部分超出了画板的边界，它将被删除。 切。

AE 扩展 AEUX 面板

可以看到，我导出了上图首页的设计稿，视口多达168个。 这么多视口对我来说做动效设计很不方便，所以我们来看看“AEUX”面板里的参数调整到合适的动画效果。

1. 新比较

“”选项是使用该文件创建新的合成。 选择该选项后，将根据“”设置的多个图像参数，手动导出所选内容并创建新的构图。

2.

其中“”是导出当前构图中的文件。 如果已经有一个作品或者已经导出过一次，后续导出时选择“”会更方便。

3.

该选项下共有三个参数：

“es”检测形状参数。 检查后，导出的形状将保留圆角和尺寸属性。 你可以通过在AE中展开形状蒙版的“内容”来看到它。

不检查导出的形状将以路径的形式存在，且圆角属性不可修改。 两者都有各自的好处，这会在后续的AE章节中提到。

"" 创建一个组作为预合成。 经过测试发现勾选和取消勾选没有什么区别。 您无法手动将组创建到预合成中。 这可能是这个版本的一个bug，只是和下一个版本是一样的。 只有与选项“”配合使用才有效。

“”自动创建画板，勾选并点击其中的“”，AE内容将被手动创建预合成，如果不勾选，“AEUX”底部的框中​​会有文字提示” AE面板，如上图所示。 要导出的视口数量。

此时，“”选项就起作用了。 勾选后，点击底部的“”按钮，其中的组就会被创建到预合成中。 如果未选中，视口将是一个展开的列表。

4.

“”部分有四个选项：

“”：创建组合

该功能不是随意选择某个视口，一键构建新的合成，而是在视口列表中选择已经制作成引导视口的父视口，即当前视图中的视口。右图视口名称后带有红色“#”。

如果为整个合成上的所有视口创建预合成操作，则无需在 100 多个视口的列表中一一搜索。 您只需“Cmd+A”将它们全部选中，然后单击“”。 全做完了。

“Un-”：取消合成，制作视口列表

它与之前的功能正好相反。 有时可以单独编辑合成的某些内部内容。 不使用预合成更方便。 您可以选择合成并让它返回到视口列表。

""：所有父视口可一键隐藏和显示

可以看到上图中父视口后面的眼睛被照亮了，再次点击“”就可以关闭这个功能。 这个功能的好处是，如果要为父视口制作动画，可以在打开显示后选择父视口。 视口屏幕上会有一个边界框，方便动画。

因为这里的父视口，即参考线视口上有红色的“#”，虽然显示出来了sketch可以导入ai吗，但最终不会渲染导入，所以开启它不会影响最终的效果。

""：删除父视口

该功能可以一键删除合成中导出的父视口。 由于以上几个功能都是基于父视口的，所以这里请谨慎操作。

可以看到，从最初的“”到现在的“AEUX”，经过多次迭代&更新，已经变得越来越强大，动效设计的效率也得到了很大的提升。 相信“AEUX”在后续的版本更新中会更加强大。 更好更强。

最后我还对导出的文件做了一个小动画效果，嗯，就是下面这个~~

好了，明天的分享就到这里了。 如果觉得对你有帮助，不妨来一波转发、留言、关注三联~~~

更多动感设计内容，关注并star墨染动效公众号，方便您第一时间查看动态~~~

近期课程推荐课程

—

往期文章精选

—

如有侵权请联系删除！