一、导读

这是 Nike Curv Studios 视觉概念的 LOGO 动效，非常适合 VI 延展设计（视觉概念设计、片头片尾 LOGO 动效、网站 LOGO 动效、UI 悬停动效等等），复刻该动效也不复杂，适合 AE 新手进行提高练习。结合我们 PAG 动效可替换占位图的功能，动效做好后可以替换 LOGO 并实时显示，做一遍动效可重复运用到不同 LOGO 中，堪称一劳永逸！

以下是制作该动效的全过程，教程包含动效教程和软件/插件推荐，正在学习动效的你可别错过～

教程难度：⭐️⭐️（入门级）

使用软件：Adobe After Effects（动效）、isparta（合成 APNG、GIF）

原作者：Jeroen Krielaars

二、设计分析

“知己知彼，百战不殆”，看到一个优秀案例之前，别着急动手学习，先分析设计要点，可以使我们在制作时节省不少时间。仔细分析该动效，咱可以将其分为 3 部分：切割（错位）、翻转、渐变。

1、切割：

LOGO 乍一看是进行 4 等份切割，仔细研究过才发现并没有这么简单，设计师根据图形特点进行了适配处理——“钩子”弯折处最宽（突出重点&保持切割后 LOGO 的动线仍然流畅），第二段次之，尾端比倒数第二段更宽些（视觉平衡），每一段都往上错位（跟随 LOGO 动势）。果然魔鬼藏在细节里，往往优秀的设计就体现在这儿～

2、翻转：

设计师在设计翻转动效上也有不少细节值得我们学习：

（1）顺序翻转

比较直观的一点是顺序翻转，整个动效无论是图形出现还是消失，都是按照从左往右的顺序，每个切割区域单独翻转，形成具有波浪感的动效节奏。

（2）改变翻转轴

图形出现的翻转轴，在整个图形中偏上的位置，相对应地，图形消失的翻转轴则处于图形偏下的位置。模拟现实生活中， 跑马灯箱纸张从后转到前，再从前转回去的状态，强化了图案翻转的立体感。

3、渐变：

贴合翻转顺序从左往右的规律，渐变色的运动也是从左往右，动线统一，增强运动感。

三、动效制作

分析完设计细节，我们可以进行动效复刻了，在平时的工作中，也可以将这些设计巧思运用到方案里去。制作的全过程按以下 8 个步骤进行，方便大家跟着学习。

1、素材准备

准备若干 LOGO 文件，ai 文件或者 png（背景透明）都可以。在这里用了两张 2k 大小的 png 图片和一个 ai 文件，建议一起练习的同学也将素材设置为尺寸 1440*1440，分辨率 72。

2、创建合成

打开 AE，Command + N (Win : Ctrl + N) 新建合成，将合成设置为：宽、高和素材尺寸一致，帧速率 25fps，持续时间 2s。

3、图形切割

将素材拖入 AE 中，并将其中一个 LOGO 文件拖入创建好的合成，我们用图层内蒙版的方式进行图形切割。顶部工具栏选择矩形工具（快捷键 Q；如果当前图案不是矩形，长按图形工具图标即可在下拉列表里选择矩形工具），在图层上随便画一个矩形，然后展开蒙版-蒙版 1，点击“形状”，在打开的窗口处输入对应的定界框坐标，顶部 0、左侧 0、右侧 424、底部 1440，即完成左一图形的切割，剩余三个同理，参数分别为：

二：顶部 0、左侧 420、右侧 724、底部 1440；

三：顶部 0、左侧 720、右侧 1024、底部 1440；

四：顶部 0、左侧 1020、右侧 1440、底部 1440。

注意事项：

（1）切割规划

切割并不是按照等宽进行，这是由于该 LOGO 图片没有左右顶边，而是留有大块透明背景，如果按照等宽分割，就会出现左右两张图片实际显示区域比较少。

（2）缝隙控制

如果切割时按照首尾相接切割，在做动效的时候会出现缝隙，尤其是打开动态模糊，缝隙比较明显，所以在做蒙版的时候，衔接处多出几个像素的重合，可以避免这一问题。

（3）调整错位

并不是所有类型的 LOGO 像 Nike 一样线条流畅简洁，在进行错位设计后，会使其辨识度下降，故在实际操作中应调整错位，必要时删去错位的设计。

4、翻转动效

我们可将整个动效分为两个翻转，翻转消失和翻转出现。消失的翻转轴向下移动，出现的翻转轴向上移动：

（1）翻转消失

鼠标点击时间轴面板，将工程里的四个图层全选（Mac : Command + A / Win : Ctrl + A），复制一次（Mac : Command + C、Command + V / Win : Ctrl + C、Ctrl + V），隐藏顶部四个图层，选中底部四个图层，点击立方体打上 3D 图层，按快捷键 R、Shift+P 打开方向属性、位置属性，在 0f 处打上关键帧，在 20f 处打上关键帧并将 Y 位置改为 920、X 方向改为 90。

（2）翻转出现

出现的动效和消失同理，区别在于运动是由无到有，所以打完 0f、20f 处的关键帧后，再修改 0f 的状态，Y 位置为 520，X 方向为 -90（即 270）。

5、速率修改

全选 8 个图层的所有关键帧（按住鼠标左键从一个角落拖拽选中全部关键帧），转化为缓动关键帧（Mac : Fn + F9 / Win : F9），点击图表编辑器-选择图表类型和选项-勾选编辑速度图表，点击使所有图表适用于查看，按住鼠标左键选中 0f 的所有关键帧，拉动小圆点往右拖拽，使速度保持为 0，影响为 75%，制作先慢后快的非线性动效。

6、调整顺序

再次点击图表编辑器，回到时间轴，选中消失动效的图层（底部 4 个图层），快捷键 T 打开透明度属性，在 17f、18f 都处打上关键帧，然后修改 18f 的不透明度为 0，完成消失效果。同理设置出现动效，在顶部 4 个图层的 05f、06f 打上关键帧，修改 05f 的不透明度为 0。

选中底部 4 个图层，从左往右按 0f、4f、8f、12f 的顺序排列图层起始点（移动当前时间指示器在对应位置后按" { "键），按住图层7的起始时间轴，往左拖拽至 0f，向前延长其显示时间，图层 5、6 同理。

切割顶部 4 个图层的时间轴（Mac : Shift + Command + D，Win : Shift + Ctrl + M），选中切出来的图层，删除这些多余的部分，然后将图层从左往右按 14f、18f、22f、1s1f 的顺序排列图层起始点。

最后全选图层，都打上运动模糊，完成动效设计。

7、渐变叠加

（以下步骤具有一定难度，不再对基本操作进行说明，适合有一些 AE 基础的同学练习，初学者可选择性地尝试）

由于 PAG 动效的 LOGO 上有图案，不适合叠加渐变动效，可以将图片替换为纯色、镂空的 LOGO 文件，再叠加渐变。

（1）替换图层

先点击选中时间轴面板上将要替换的图层，再点击项目面板上的新素材，按住鼠标左键拖拽至图层上，完成替换。

（2）渐变叠加

选中最底部图层，右键展开“图层样式-渐变叠加”，展开“渐变叠加”属性，“与图层对齐”选择“关”，角度改为 0，颜色打关键帧并进行调整（此操作需要耐心琢磨配色和运动方向，也可参考以下动图的颜色设置），必要时多加几个关键帧，确定好渐变颜色后，点击“图层样式”并复制，当前时间指示器移动至 0f，将“图层样式”粘贴至其他 3 个消失动效的图层上（使渐变动效保持一致），同理将图层样式粘贴到出现动效图层上，调整渐变动效起始点，与翻转动效一致，最后，将渐变关键帧首尾倒置，整个动效形成循环。

渐变叠加也适合在轮廓辨识度高的 LOGO 上使用，比如著名的 QQ 企鹅。

8、文件导出

将合成导出到渲染队列（ Mac : Control + Command + M，Win : Ctrl + M ），点击输出模块的“收集”，在打开到面板里设置为PNG序列，点击渲染导出PNG序列帧，再将序列帧导入到 isparta，设置帧频、输出格式、和压缩质量，点击开始，等待图片合成，导出 apng 和 gif 格式的动图。

四、PAG导出

点击文件-导出- pagfile(panel)，导出 PAG 文件。PAG 支持 3D 图层特性，可以完整显示该动效。并且由于 PAGViewer 支持实时替换和预览的功能，置入其他 LOGO 文件也能查看到效果，在预览工具中查看效果和调试性能，有效提高动效的生产效率。设计师在确认效果后，即可将 PAG 文件交付给研发，快速上线到几乎所有的主流平台。

Powered by Froala Editor