UI动效实现：擅用AE中的表达式

站酷高高手

北京/教育工作者/2年前/904浏览

版权

UI动效实现：擅用AE中的表达式

站酷高高手

欢迎来到站酷学习Gallery，5分钟的时间，看一看AE的技法分享！

听说你们最近都在苦恼UI动效制作的问题？别急，AE来拯救你们了！
它不仅提供了丰富的动画效果库和插件，还能让你轻松制作出各种UI动效，比如：按钮闪烁、下拉列表滑动、页面切换等等，只要你能想到的UI动效，AE都可以助你一臂之力。
AE的操作界面也十分友好，只需简单的拖拽和调整参数，就能轻松让你的UI设计变得更加生动有趣。还有一个好消息，如果你不懂AE的操作，别担心，这里陈出杰作老师也准备了AE教程可以供你参考，让你循序渐进地掌握AE的UI动效制作技巧。

点击观看陈老师《UI动效交互案例：开启趣味之旅》课程的宣传片 →

对了！这篇文章还给大家带来【AE表达式】的干货内容，比如大家看到的下面这张动图，只需2个关键帧，即可完成！

在开始之前，我们先来了解一些概念，包括AE表达式介绍、AE表达式类型以及linear表达式的介绍。

| AE表达式介绍
表达式是AE内部基于JS编程语言开发的编辑工具，它可以被视为一种简单的编程方式。相比于传统的编程，表达式更加简单易懂，但并不失去其强大的功能。在AE中，表达式只能添加在可以编辑的关键帧属性上，例如位置、旋转、缩放等。

表达式的使用应该根据实际情况来决定。如果关键帧已经可以实现你想要的效果，那么使用关键帧就足够了。但在许多情况下，表达式可以更加节约时间，提高工作效率。因此，在使用AE时，根据具体情况选择使用表达式或关键帧是非常重要的。

| AE表达式的类型
在AE中，不同属性的参数形式有所不同，通常可以分为三种类型：数值（例如旋转、不透明度等）、数组（例如位置、缩放等）和布尔值（例如true/false或0/1等）。对于这些属性，我们可以使用表达式来对其进行处理和控制。在AE中，有许多内置的函数命令可以直接调用，这些函数命令包括数学函数、字符串函数、时间函数等等。通过使用这些函数命令，我们可以更加便捷地编写表达式，并实现更加复杂的效果。

在AE中，表达式是非常强大的工具，它可以帮助我们实现各种各样的动画效果，提高工作效率，并且可以根据自己的需要进行自定义编写。

| linear表达式的介绍
linear是AE里非常常用的表达式。linear(t, tMin, tMax, value1, value2)。返回类型：数值或数组。参数类型：t、tMin 和 tMax 是数值，value1 和 value2 是数值或数组。当 t <= tMin 时返回 value1。当 t >= tMax 时返回 value2。当 tMin < t < tMax 时，返回 value1 和 value2之间的线性插值。

对于所有插值方法，参数 t 通常是 time 或 value，但它也可以采用其他值。如果 t 是 time，则值之间的插值会在持续时间内发生。如果 t 是 value，则表达式会将一系列值映射到新系列值。这个表达式也可以理解成为“映射”，即将tMin到tMax的值，映射成为value1到value2的值（或数组）。

虽然看起来很难，但实际上并不简单。哈哈哈哈，不要惊慌，我们结合案例来分析一下。

| 页面切换的案例分析

1. 在sketch或figma中绘制好静态图后，给每个模块命名并分组。接下来，利用第三方插件将设计稿导入AE。

2. 在AE新建一个“空”对象，作为其他界面元素的映射目标。

3、打开“空”对象的位移属性（键盘按一下字母p），然后勾选单独尺寸。

4. 在y轴的时间轴上，添加两个关键帧，让其从1012运动到812（即从下往上运动）。同时，为其添加缓动曲线。

5. 打开状态栏的不透明度属性（键盘按一下字母t），并添加以下表达式（创建一个变量x，然后将状态栏的不透明度属性映射到“空”对象的y轴位移属性上，当“空”对象的y轴从1012运动到812时，同一时间内状态栏的不透明度将从0变化到100。如果是从812运动到1012，状态栏的不透明度将从100变化到0）：
x=thisComp.layer("空 1").transform.yPosition.valueAtTime(time)
linear(x,1012,812,100,0)

6.通过上面的变化，我们不难看出linear的映射是怎么工作的。“linear(x,1012,812,100,0)”的意思就是，当x从1012到812变化时，映射出0到100的值，即x=1012时输出1012，x=812时输出812，输出的对应值就作用到了状态栏的不透明度属性上。而我们又把状态栏的不透明度属性定义给了x，所以就相当于把状态栏的不透明度映射给了“空”对象的y轴。类似地，我们可以为导航栏、标签栏、虚拟主页键和新增按钮的不透明度属性添加表达式。同样的效果，表达式有不同的格式写法。

7.打开模块1的位移属性（键盘按一下字母p），然后勾选单独尺寸。在y轴位移属性添加以下表达式（创建一个变量x，然后将模块1的y轴位移属性映射到“空”对象的y轴位移属性上，当“空”对象的y轴从1012运动到812时，隔开0.1s后模块1的y轴位移将从356变化到256。如果是从812运动到1012，隔开0.1s后模块1的y轴位移将从256变化356）：
x=thisComp.layer("空 1").transform.yPosition.valueAtTime(time-0.1)
linear(x,1012,812,256,356)

8. 打开模块1的不透明度属性（键盘按一下字母t），并添加以下表达式：
x=thisComp.layer("空 1").transform.yPosition.valueAtTime(time-0.1)
linear(x,1012,812,100,0)

9. 类似地，我们可以给不同模块的y轴位移属性和不透明度属性添加表达式。如果需要实现不同模块之间有延迟效果，则需要注意valueAtTime值的区别，并逐级减去相同的数。valueAtTime是ae中的一个表达式函数，用于获取图层在指定时间的属性值。它可以用于各种属性，例如位置、旋转、不透明度等。

10. linear表达式除了应用于基础属性（如位移、不透明度、旋转、缩放），还可用于路径修建、矩形圆角度数、矩形投影大小等其他方面。

11. 如果你比较熟悉表达式，就可以使用更加进阶的写法，比如配合跨合成、模块控制等其他方面。在这个案例中，就利用linear和颜色控制的配合，同样只需要“空”对象的关键帧即可。

12. 如果我们觉得运动的时间、运动的位移、缓动的曲线不适合，只需修改“空”对象，即可使其他元素相应地发生变化。这种方法比以往逐一为所有元素添加关键帧更加方便和简单。简单点理解，就是“谁跟谁发生变化，怎么样的变化方式”。需要注意的是，一个对象可以映射到多个对象，这意味着您可以根据自己的创意来使用这种方法。