一、导读

了解动效设计原则、掌握动效设计技巧是动效设计师必备的技能，本文章重点为大家介绍 MG 动画中常用的遵循动效设计原则的动效形式，帮助设计师创建更具吸引力和生动性的作品。教程跳过一些基础操作，适合有一定 AE 基础的同学学习。

教程难度：⭐️⭐️⭐️（进阶级）

使用软件：Adobe After Effects（动效）、PAGViewer（动效文件）

二、动效技巧及教程

1、跟随（Follow-through）

跟随是指动画元素在达到目标位置后，继续沿着运动轨迹移动一段距离，然后再回到目标位置。这个动画小细节相比直接结束动效更有趣味性、更有生命力。

无论是缩放、位移、旋转、透明度变化还是其他属性都可以尝试使用，制作方式也非常简单，在结尾关键帧之前添加一个往回的关键帧，然后按需调整动画速率即可。

叠加了位移和旋转跟随后，成品如下：

2、弹性（Easing）

弹性是指动画在开始和结束时的方向变化。通过使用缓入和缓出效果，可以让动画看起来更自然、更有活力。

在 AE 中，可手动 K 帧，通过设置多个缓入缓出的关键帧，使属性值曲线看着像波浪线般便能输出弹性动效。但更为方便快捷的方式是使用表达式对动效属性进行弹性变化设置，此处推荐以下万能弹性表达式：

freq = 2;

decay = 4;

n = 0;

if (numKeys > 0){

n = nearestKey(time).index;

if (key(n).time > time) n--;

}

if (n > 0){

t = time - key(n).time;

amp = velocityAtTime(key(n).time - .001);

w = freq*Math.PI*2;

value + amp*(Math.sin(t*w)/Math.exp(decay*t)/w);

}else

value

使用时，应注意动作结束的速度不为 0，可改变 freq 的值控制弹性频率，改变 decay 的值控制弹性幅度，而 n 为表达式生效的开始关键帧，如图：

这个表达式不仅可以作用在不同属性上，比如缩放、位移、旋转。

3、重复和循环（Repetition and Looping）

重复和循环是指动画在一定时间内重复播放。通过设置循环次数或无限循环，可以让动画保持连续的运动，增加视觉吸引力。

无缝循环的重点是第一帧和最后一帧相同，借助 gif 图默认重复播放的特性，可形成不断重复的动效。

重复和循环可以通过多种方式实现，如果重复次数少，复制粘贴关键帧是最为直接的方式，当重复次数多了之后更建议使用循环表达式，循环表达式有以下 4 个基本表达式：

loopIn(type = "cycle", numKeyframes = 0)

loopOut(type = "cycle", numKeyframes = 0)

loopInDuration(type = "cycle", duration = 0)

loopOutDuration(type = "cycle", duration = 0)

完全理解这4个表达式需要花些学习时间，会在以后的教程中给同学们讲解。其中最常使用的是 loopOut(type = "cycle", numKeyframes = 0)，表示关键帧以后的时间里循环所有关键帧的动作，如该动作属性设置了关键帧 123，呈现出来的循环即为 123，123，123，123...

4、重叠动作（Overlap）

重叠动作与前面的“重复和循环”不同之处在于重叠动作是指多个动画元素在时间上存在一定的延迟，使它们不完全同步。这种技巧可以让动画看起来更自然、更有层次感。

重叠动作重点在于合理安排延迟节奏，保持适当的速度和延迟。制作重叠动作的动效有多种技巧和方法，其中最常用的是复制图层并延迟、关联子父对象。

下面为同学们演示一下用重叠动作制作的一个 Loading 动效，原理非常简单，将动作分为 2 组，每组都有 5 个小球在绕圈运动，2 组小球首尾相接：

成品如图，有趣的 Loading 动画让等待也变得没那么焦急～

5、晃动（Wiggle）

晃动是指动画元素在无其他状态变化下，位置、大小、方向、透明度等属性保持小幅度的不规则变化，可让动画持续运动，避免呆板。

除了手动 K 帧之外，晃动效果也可以通过表达式完成，wiggle(x,y)，通常将其写在位移（单向或双向）、缩放（等比或不等比）、旋转等属性中，x表示频率，y表示幅度。下图以上升的气泡动画为例：

6、色彩变化和发光（Color Variation and Glow）

色彩变化是指在动画过程中，物体或背景的颜色发生变化。色彩变化的过程中常伴随着发光，可以是渐变、闪烁或其他形式的颜色过渡。通过改变颜色，可以引导观众的注意力，突出重要的元素或信息。同时，色彩变化可以为平面设计增加立体感和深度，使动画更具吸引力和生动感。

色彩变化的营造方式有很多种，修改颜色关键帧、叠加颜色变化的蒙版、添加发光属性、扫光插件、发光插件等等，以下为大家介绍修改颜色关键帧和运用 deepglow 发光插件这两种方式：

（deepglow 为第三方 AE 插件，需下载安装后才能使用）

三、导出动效文件

PAG 使用非常便捷，安装PAGViewer和PAG for AE插件后，即可进行动效文件导出和预览。

不同的 AE 效果可以用不同的图层关系进行 PAG 文件导出。当使用的 AE 特效都为 PAG 矢量支持的效果时，可直接导出 PAG 文件，优点是文件小、性能好，并且支持修改文本或替换图片；反之，可进行 bmp 预合成后导出，优点是支持所有 AE 效果，输出和 AE 预览视觉统一的动效文件。

1、矢量导出

以上不含表达式和发光插件的案例，都可以直接进行 PAG 文件导出：

如果合成中使用了表达式，则需将表达式转换为关键帧后再导出 PAG 文件：

矢量导出的文件非常小，这两个动效文件仅占个位数 KB。

2、BMP 导出

当合成使用了 PAG 不支持的 AE 效果或第三方插件效果，可将对应图层转化为 _bmp 预合成，再进行 PAG 文件导出：

_bmp 导出的文件相较矢量导出较大，但对比其他方案也有优势，这个发光动效，PAG 文件仅 218KB，而压缩过的 Apng 文件要 5MB。

四、总结

总结下这些技巧的使用场景：

1、跟随 - 可以用于微调或加强动画的生动性和吸引力。例如，在 logo 动画中，可以使用跟随技巧让标志元素在到达终点时有更平滑的转变，对于在屏幕上移动的任何物体，添加跟随效果都能使它们变得更加真实。

2、弹性 - 适用于按钮的按下和弹回效果，掉落物体的弹跳效果，字符文字的抖动效果等等。弹性效果不仅能让动画看起来更舒缓流畅，更能增添动画的生动性和趣味性。

3、重复和循环 - 适用于例如手机游戏中的背景循环，电子广告中的重复变换效果，应用程序的加载动画等等。通过使用重复和循环效果，设计师可以使动画更加持续平滑，增强视觉效果和吸引力。

4、重叠动作 - 适用于如运动员奔跑的重叠脚步，海浪拍打岸边的重叠效果，流水线商品动效等等。使用重叠动作效果可以增强动画的真实感和立体感，使动画元素具有更高的层次性。

5、晃动 - 适用于如水波效果、粒子无规则运动、卡通人物动作等等。通过晃动效果，设计师可以使物体看起来更自然、更有生命力。

6、色彩变化和发光 - 适用于如品牌标志、介绍视频和广告等等。使用色彩变化和发光效果可以突出重点信息并为平面设计增加立体感和深度，使动画更加吸引人眼球和生动活泼。

而 PAG 也能助你轻松在各个平台上应用这些技巧，如果对 PAG 的使用或这些进阶动效技巧有疑问，欢迎留言与我们交流。

Powered by Froala Editor