【教程】使用After Effects制作品牌加载动画

由卡米雷特 · 发布日期 2018年9月3日 · 已更新 2018年9月3日

注：本文中对软件各选项和图层名称的翻译均取自笔者个人目前使用的语言包，实际操作可能会发现用词略有不同，不影响操作。

如今，好的视觉设计上手难度越来越低，已经很难分辨出谁是真正有才华的设计师，谁又是套模板或使用现成UI套组的专家。因此，如果你想要创造甚憾人心的视觉作品，就需要额外付出努力超出观众的预期。

让人印象最深刻的往往是细节。比如MailChimp有名的猴子吉祥物，会在你发送邮件成功的时候给出一个击掌的动画，让人印象深刻。他们没有像一般的系统那样只是告诉你“发送成功”，这个小动画是用户意料之外的，将品牌融入了产品体验中。当然，这篇教程我们不会教你做猴子爪子这样复杂的事情，而是简单的五彩缤纷的加载动画。你可以轻松地把这篇教程的技术应用到你自己的品牌上，下面就是本次的成品：

我们将会用After Effects来完成它，接下来将它导出成为视频，再导入Photoshop中编辑使之成为轻量化的GIF文件，之后你可以将这个加载动画应用在任何地方。

在开始之前，请你先选择4种品牌对应的颜色，然后找到一张小巧的、单色的、透明背景的Logo。如果你正巧想学习After Effects的使用技巧，这将是个练手的不错机会，很多基本技术和流程会被提及。

下面就是简单的制作流程。

01.创建新的视频序列

打开After Effects，然后按下ctrl/cmd+N即可打开创建序列的窗口。由于我们将要完成的作品是正方形的，因此默认的16:9的设置需要更改，你可以直接将分辨率中的宽和高均改为120px，然后点击确定。我们最终输出的将是120px宽高的图像，并会在后期处理中再生成一个60px宽高的版本。

02.整理工作区

在进一步之前，如果你是新手，建议将工作区域调整为和图片相同的排布方式。请点击上方菜单的“窗口”，选择“工作区→标准”。如此，你便可以得到和教程相同的工作区排布，当然如果你已经熟悉了各类工具，也可以用自己最舒适的排布方式完成教程。

03.绘制图形

下面我们先来创建正方形图形作为我们动画用到的色块。点击我们的画布（就是当前屏幕中央的黑色区域），按下Q，接下来按住Shift并用鼠标左键点击拖拽，画出一个正方形。正方形最好略微超出我们的视频区域。

接下来，请让正方形与屏幕中心对齐。找到位于屏幕右下方的“对齐”窗口，点击“水平中心对齐”和“垂直中心对齐”即可。

04.填充颜色

在你绘制的正方形为选中状态时，点击屏幕上方的“填充”按钮，然后根据你选择的4个颜色中的一个来填写颜色值，你可以通过HEX或RGB来精确控制颜色。另外，你还可以用吸管工具从屏幕的任何地方吸取颜色，即便是该窗口不在After Effects中，这非常方便不是吗？

05.复制图层

在屏幕下方，你会看到时间轴，左侧有当前图层的名字，默认为“图形图层1”。点击图层的名字或者右侧的蓝色时间调，然后按下ctrl/cmd+D就可以复制一份，我们需要4个额外的副本，因此你总共需要按4次。现在你可以看到我们有5个图层了，分别叫做“图形图层1”、“图形图层2”、“图形图层3”、“图形图层4”、“图形图层5”。

06.调整锚点

由于每个图层中的正方形都要从不同的方向产生动画，因此我们可以通过锚点预先让它们拥有不同的朝向，可以大大简化后续操作。首先选择图形图层2，按下Y调出锚点调整工具，然后选中锚点（看起来有点像十字准星）把它拖动到图形下方的位置即可完成旋转。对图形图层3-5进行同样的操作，方向顺时针循环。这一步我们没有修改图形图层1。

07.调整动画时间

下面请调整时间轴，让几个动画的时间错开。按下V切换到选择工具，接下来按住shift并用左键拖动图层3-5，让它们往右侧移动，图层之间相差刚好1秒，因此它们的七点应该分别是1秒、2秒和3秒。如果你发现时间轴太短不够用，可以按住alt然后下滑滚轮，这项操作将会缩小你的时间轴，让它可以显示更大的时间范围。

08.调整其他图层的颜色

接下来，进行和步骤04相同的操作，将图层2-4填充上其他3个之前准备好的颜色。你可以将播放控制器（就是下方时间轴上连着红色线的三角标）拖动到每个图层的起点位置，看看它们是否发生了改变。主意，图层5是不需要调整的，它本应和图层1是同一个颜色，这样我们的动画就可以循环起来。如果你不能理解为什么，不要着急，继续做下去。