在用户体验界面设计中，因交互需求而发生的动效设计，例如：loading、转场、点击反馈等。现在越来越多专业化UX交互动效软件助力实现html在手机上的实时操作反馈。在ae常用的技能点有：

缓动

交互动效的初衷是为了给产品带来舒适的用户体验，那么从本质上每一个交互动效的过渡都应该遵从物理曲线与缓动原则，比如下拉的重力感、过场的缓入缓出，避免产品像机器般给用户带来生硬的感受。

AE应用

  1. 选中关键帧—-动画>关键帧辅助>缓动 | animation>keyframe assistant>easy ease （或点击关键帧右键>关键帧辅助>缓动）

  2. 图形编辑器>使视图适应所有曲线>拖动端点调整曲线 | Graph Editor > Fit all graphs to view

遮罩

遮罩功能可以解决许多你想不到的动效问题，达到一个比如魔术化的效果，也是MG动画转场常用功能之一。简单理解来说，就是将动效分为2层（底层是展示图，顶层是遮罩），通过改变的遮罩大小，我们可以看到底层展示图的不同部分。

AE应用

  1. 选中形状工具在固态层或合成的预合成 | solid 或者 Pre-compose上画一个形状（即完成该图层的遮罩mask）

  2. 下拉遮罩属性即可调整遮罩路径、大小、羽化、透明度等数值

值变

工具型APP中常用的数值变化动效，可以灵活展现数字变化的过程，在MG动画中使用也是一种数据的震撼表现方式。

AE应用

  1. 新建文本层并选中—-效果>文本>数字 | Effect>texts>numbers

  2. 参数设置

空间3D翻转

设置3D属性可以让物体拥有XY轴空间，立体化表达物体概念。

AE应用

1.打开图层3D图层属性 | 3D layer
2.设置XY轴属性

毛玻璃效果

iOS源生的毛玻璃效果在很多动效软件上都受到限制，当然AE是无所不能的。这里单独作为一个技能点来和大家分享还因为AE中毛玻璃效果的制作还会牵扯到一个关键点——“调节层”的使用，通过毛玻璃的应用大家应该可以举一反三出它的更多用法。

AE应用

  1. 图层>新建>调节层 | layer>new>adjustment layer (注意该图层需要位于需要被模糊的图层与毛玻璃遮罩图层之间）

  2. 选中调节层—-效果>模糊与锐化>高斯模糊

  3. 建立一个遮罩图层（遮罩形状大小调整为毛玻璃展现区域形状大小）

  4. Ctrl+C复制遮罩图层路径>Ctrl+V粘贴到调整层

  5. 按照需求调节遮罩图层的透明度属性即可看到毛玻璃效果咯

修剪路径（开放式）

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

AE应用

  1. 形状图层>添加>修剪路径 | shape layer>add>Trim Paths

  2. 设置结束、开始属性，完成路径动效

融合

图形的融合变换，有很多种做法，这里介绍效果最好的一种。

AE应用

  1. 新建调节层—-效果>快速模糊 | Effect>fast blur

效果>色阶 | Effect>levels

  1. 参数调整

抖动

缓慢抖动是常在动态mockup中见到的效果，这里应用到“表达式”的使用，也是属于可以举一反三应用于多种地方的重要技能点。其中可以使用表达式的除了抖动效果，还有头尾相接的无限循环等。

AE应用

  1. alt+需要抖动图层属性关键帧小秒表>在时间轴上出现的空间里写上wiggle(数值A，数值B)

  2. 调整数值A（每秒震动次数）、B（运动范围像素值）达到自己想要的抖动效果（我一般用1,20达到一个缓动的效果）

水波纹

之前做手机清理类APP经常会涉及到的流量表达动效，虽然做起来不是很简单，但是效果非常好。这里应用的是“置换图”技能，大家同样可以使用“置换图”方法举一反三。

AE应用

  1. 新建形状图层（命名为“波浪”）>效果>扭曲>置换图 | new shape layer>effect>distort>replacement map

  2. 新建固态层>效果>无线电波 | new solid layer>effect>radio wave

  3. 将2中的固态层合成预合成，命名为“置换图”（注意转移所有属性）

  4. 将“置换图”预合成的开始点移到最左边—-效果>快速模糊 | effect>fast blur

  5. 点击”波浪“层的置换图属性，选择“置换图”预合成替换

  6. 隐藏“置换图”预合成