比阿里犸良还强大！Lottie动效设计完全指南（导入篇）

上一篇文章《比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）》已经系统地为大家讲解了 Lottie 动效的基本知识，相信很多同学都跃跃欲试了。而在我们使用 AE 制作动效的过程中，往往会遇到很多问题，第一个大问题就是动效素材的导入。本文将以一个实际动效案例的导入流程为例，帮助大家了解高效导入设计文件的方法。

以上为本次演示的动效案例。导入文件之前我们首先要分析操作对象的特点，有哪些部分是要做动效的，哪些部分是静止的。需要运动的图层或组要单独分开，保持静止的图层可以合并。如果涉及对称结构，可以在 AE 中只做一边，预合成以后使用翻转即可。

从PS导入AE

将动效文件整理好就可以导入 AE 了，当我们将 psd 文件拖入 AE 中会有三个提示选项：

1. 素材

当我们已经导入了 psd 文件，需要从原 psd 补充素材的时候可以选择此选项，但是每次只能选择一个图层或者将所有图层合并为一个图层导入。优点是能让图层保持在 ps 中的位置，缺点是当有多个图层需要添加时需要多次导入。

2. 合成

选择此选项，所有图层都会按照画板大小导入，所以会导致很多图层有透明区域。优点是对于可以复用的元素（如小鸡仔的翅膀）可以采用翻转的方式快速复制，无需移动即可变化到对称位置。缺点是会增大文件尺寸。使用 Lottie 输出动效时不建议此方式，会增加资源。

3. 合成-保持图层大小

选择此项，优点是图层会裁切掉所有的透明区域，能够保证文件尺寸最小。缺点是翻转以后需要通过位移才能让图层和对称元素保持相同位置。可以通过先建立预合成，再一键翻转的方式，避免移动操作。使用 Lottie 制作动效时，推荐采用此方式。

从AI导入AE

从 AI 中导入 AE 相对要麻烦一些。首先我们需要将 AI 文件导入 AE 中，选中 AI 图层，然后「右键-创建-从矢量图层创建形状」。AI 文件就转换为可以在 AE 中编辑的矢量图形，但是如果我们直接将 AI 文件直接拖入 AE 中，这样会导致所有形状都在一个图层里，如下图所示。

在AI中拆分图层

所以我们需要在导入 AE 之前，先将 AI 文件拆分成多个图层。

首先还是和 PS 一样将各部分按照需要进行拆分，先不用命名。然后选中最上方图层，选择「选项卡菜单-释放到图层（顺序）」，再选中除最上方图层外的所有图层，按住鼠标并下拉。这样所有的图层就拆分开了。最后再删除掉最上方空图层即可。

完成以上步骤再对拆分开的图层进行命名。之所以没有让大家一开始就命名，是因为操作的过程中发现，释放图层以后命名好的图层名就改变了。

使用插件在AE中拆分图层

刚才提到的，导入的 AI 文件不分层，其实可以通过 Explode Shape Layers 插件解决。只需在 AE 中安装即可解决我们导入 AI 文件过程中的问题。

1. 形状一键拆分

通过该插件可以一键将 AI 图层转换为矢量形状，相对于「右键-创建-从矢量图层创建形状」要更加简单高效。转化为矢量形状后，点击第一个按钮，即可将图层拆分为单个形状。

2. 形状一键组合

使用一键拆分功能会将图层拆分成一个一个图形，但是很多时候我们不需要拆分的那么细。比如案例中的小鸡仔，有的部分是不动的，我们希望把它合并成一个图层。这个时候点击第二个按钮即可一键组合形状。

3. 删除空图层

有时候拆分 AI 图层后会出现空图层，此时选择第四个按钮即可选中这些图层，便于删除。

4. 批量选择修改填充/描边属性

使用最后两个功能可以快速选中形状层并快速修改属性，不常用。

AE与AI无缝衔接

以上说的方法都是单纯的在 AI 或者 AE 中处理素材的方法，但是我们实际工作中，经常会需要增加或者调整素材。最后介绍一款大杀器，可以无缝衔接 AI 与 AE ，不仅可以将 AI 中的元素一键导入到 AE 中，还可以将 AE 中的文件导入 AI。

Overlord 具有全面而强大的，能够满足我们导入文件的各种需要：

• 导出所选内容：AI导出到AE，或者AE导出到AI；
• 导入所选内容：AI/AE选中内容后，在AE/AI中选择导入，即可导入所选内容；
• 导出选项：分层导入所选元素、记录形状数据、保持中心点在形状中心，默认是在合成的中心、导出内容到画布中心，默认是保持原位置；
• 快速切换 AE/AI 窗口；
• 在 AI 中新建一个与 AE 合成相同尺寸的画布；
• 导入色板到 AE 中（需配合 Ray Dynamic color2 插件）；
• 将参考线导入 AE。

日常使用过程中我们只需在导出选项中，选择分层导入所选元素，即可快速将所选内容快速原位复制到 AE 合成中（需要 AI 画布与 AE 合成大小相同）。

当我们需要将几个部分导出为一个图层时，只需关闭分层导出，再将几个元素选中以后，点击导出即可。

综合对比以上几种方式，Overlord 对我们日常导入和编辑素材来说更加方便快捷，当然不同的方式也有不同的应用场景。大家按需使用。

Sketch和Figma导入AE

目前越来越多的设计师通过 Sketch 和 Figma 来设计文件了。Google 团队开发了一款插件 AEUX，可以让这两个软件和 AE 无缝打通。详情可阅读：《谷歌设计团队发布了一款动效神器，让 UI 和动效无缝打通！》

插件安装

1. 插件下载

下载链接：https://pan.baidu.com/s/1CL9LO3gA17cSBBqaIZflJQ 提取码：tmue

备用下载链接：https://share.weiyun.com/5895PQ8

2. Explode Shape Layers安装说明

将「AE脚本」文件夹复制到相应 AE 目录下即可，如下：

..Support Files/Scripts/ScriptUI Panels

该脚本将会出现在 AE 的「Window」菜单下。

2. Overlord安装说明

将 overload 文件夹分别复制到：

• C:\Program Files（x86）\Common Files\Adobe\CEP\extensions
• C:\Users\用户名\AppData\Roaming\Adobe\CEP\extensions
• C:\Users\用户名\AppData\Roaming\BattleAxe

以上路径最后面文件夹如果没有就自己手动创建。打开 AE，在拓展里打开脚本随便输入注册码。打开 AI，在拓展里打开脚本，开始使用，这个脚本也需要在 AI 打开配合使用。

使用 AE 过程中的文件导入，就讲解到这里。下一篇将带大家了解使用 AE 导出 Lottie 文件时需要注意的问题，欢迎持续关注。

欢迎关注作者的微信公众号：「懿凡设计」