用一篇文章，帮你掌握基础实用的动效技能

对今的 UX 设计师来说，点动效基本已是常规操作了。作为 UX 设计师，动效可以辅助出可以涵盖界交互动效、项目宣传 MG动画、品祥物表情、年终汇报 PPT 等等。这些技能虽然广，是需要掌握基础实用几个足以辅助我们更好装输出。

一、动效分类

首先我们先区分几个动效概念。

1. MG动画

MG动画（Motion Graphics），简单来说是图文动画意思。MG动画体运用十分广泛，其括电影开头、电视开头、栏目装、品演示、广告节目等各个领域。

为互联网设计师，我们以使用简单的 MG动画来进行 APP 展示：比 app store 的 video、官网 video 或者工汇报中的项目成果展示，总我们以把它划分在品牌设计的类别中。

2. 表情包动图

今的微信表情平台展成一个表情包行业，以让设计师自己设计的表情包供微信用户使用，其中一部分表情包是带有动效的，即逐帧动画的产物，以小 gif 的式呈现。

3. UI 交互动效

在用户验界面设计中，因互需求而生的动效设计，例如：loading、转场、击反馈等。

现在越来越业化 UX 互动效软件助力现 html 在手机上的时操反馈，就仿佛你不用代码做一个 app 出来。

二、做动效的软件

之前经常看到动效品评论里总有同学在问「大佬，哪个软件做的呀？」，里来做个统一总结。

1. Adobe After Effects

大家最熟悉不过 AE，做 UI 动效最常见软件。

优点：面向电影特效的软件，以完成的动效种类与复程度想而，灵活合 Adobe 自家的 ps、ai，提供 Lottie 动画库 Jason 文件。

缺点：入门门槛高，功能繁杂，学习本高。

导出格式：mov 视频文件。

2. Adobe Photoshop

每天都打 Adobe 家的 ps，它也可以动效的。

优点：同使用 timeline 计动效，操作较简。

缺点：可成的效效果寥寥无几，适合来成逐帧画（如表情包里的简单小 gif）。

导出格：gif  动图文件。

3. Hype 3

如果说 AE 是 UX 效届的 ps（功繁杂且全面），那么 Hype 3 应该就是 UX 效届的 sketch（针对强且易操作）。

优：易上手、需代码可以实现实时交互动效操作、原生界支持文，3.0版本后支持更多动画效。

缺点：完成动效效果有。

导出格式：gif动图/视频/png/Html，pc、mobile 实时操作。

4. Flinto/Principle

其实这2软件不太多，都是更简易版 Hype 3。

优点：操简单的一 sketch，有 sketch 插件以合使用，效率高，无需代码以现时互动效操。

缺点：可完动效效果比 Hype 3 还限。

导出格式：视频 mov，链只能在机上同步预览，可录屏。

5. Keynote

这应该设师都知道的神器，一如宣传语「让的演示文稿提神提气、出类拔萃」，比 PPT 好用一万倍。

优点：无脑操作，效果一流。

缺点：仅有有效的过渡效。

导出格：keynote 文件。

三、UI 动效常用核心技能盘点

为在座各位大部分都是 UX 设计师，所以以下着介绍下，如何用 AE 实现几个核心 UI 动效技能。

Skill Point 1：缓动

交互效的初衷是为了给产带来舒适的户体验，那么从本质上每一个交互效的过渡都应该遵从物曲线与缓原则，如：拉的重感、过场的缓入缓，避免产像机器般给户带来生硬的感受。

AE应

• 选中关键帧——动画>关键帧辅>缓动 | animation>keyframe assistant>easy ease （或点击关键帧右键>关键帧辅>缓动）；
• 图形编辑器>使视图适应所有曲线>拖动端点调整曲线 | Graph Editor > Fit all graphs to view。

Skill Point 2：遮罩

遮罩功可解决许多你想到的效问题，达到一个如魔术的效果，是 MG画转场功之一。简单来说，就是将效分为2层（层是展示图，顶层是遮罩），通过改变的遮罩大小，我们可看到层展示图的同分。

AE应

• 选中形状具固态层或合的预合 | solid 或者 Pre-compose 画一形状（即完该图层的遮罩 mask）；
• 下拉遮罩属性即可调整遮罩路径、大、羽化、透度等数值。

Skill Point 3：值变

工具 APP 中的数值变效，可灵展现数字变的过程，在 MG画中使是一种数据的震撼表现方式。

AE应

• 新建文本层并选中——效果>文本>数字 | Effect>texts>numbers；
• 参数置。

Skill Point 4：3D翻转

设置3D属性可物体拥有 XY轴空间，立体表达物体概念。

AE应

• 打图层3D图层属性 | 3D layer；
• 置 XY轴属性。

Skill Point 5：毛玻璃效果

iOS 源生的毛玻璃效果在很多效软件上都受到限制，当然 AE 是无的。这里单独作为一个技点来和大分享，还因为 AE 中毛玻璃效果的制作还会牵扯到一个键点——「调节层」的使，通过毛玻璃的应大应该可举一反它的更多法。

AE应

• 图层>新建>调节层 | layer>new>adjustment layer （注意该图层需于需被模糊的图层与毛玻璃遮罩图层之间）；
• 选中调节层——效果>模糊锐化>高斯模糊；
• 建立一个遮罩图层（遮罩形状大小调整为毛玻璃展现区域形状大小）；
• Ctrl+C 复制遮罩图层路径>Ctrl+V 粘贴到调层；
• 按照需求节遮罩图的透明度属即看到毛玻璃效果。

Skill Point 6：修剪路径（开放式）

UI 动效中高频出的径描绘动效实技能，从 LOGO 到图标都可以通过 AI 导入形状径完径描绘动效。这里只介绍比较实用的式修剪径（即线条径），封闭式修剪径应用不多（即形状径）。

AE应用

• 形状图层>添加>剪路径 | shape layer>add>Trim Paths；
• 设置结束、开始属，完成路径动效。

Skill Point 7：融合

图形的融合变换，很多种法，这里介绍效果好的一种。

AE应用

• 新调节层——效>快速模糊 | Effect>fast blur。效>色阶 | Effect>levels；
• 参数整。

Skill Point 8：抖动

缓慢抖动常动态 mockup 中见到的效果，这里应用到「表达式」的使用，也属于可以举一反三应用于多种方的重技能点。其中可以使用表达式的除了抖动效果，还尾相接的无限循环。

AE应用

• alt+需要抖动图层属性关键帧小秒表>在时轴上出现空里写上 wiggle（数值A，数值B）；
• 整数值A（每秒震动次数）、B（运动范围像素值）达到自己想要的抖动效果（我一般用1,20达到一个缓动的效果）。

Skill Point 9：水波纹

之手机清理类 APP 常会涉及到的流表达动效，虽然起不很简单，但效果非常好。

这应用的是「置换图」能，大家同可以使用「置换图」方法举一反三。

AE应用

• 新建形状图（命名为「波浪」）>效果>扭曲>置换图 | new shape layer>effect>distort>replacement map；
• 新建固态层>效果>无线电波 | new solid layer>effect>radio wave；
• 将2中的固层成预成，命名为「置换图」（注转移所有属性）；
• 将「置换图」预合成的开始点移到最左边——效果>快速模糊 | effect>fast blur；
• 击「波浪」层换图属性，选择「换图」预合成替换；
• 隐藏「置换图」预合成。

欢迎关注作者公众号：「Nana的计锦囊」

图片素材作者：Thunder Rockets