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

你学会了吗?
··· ··· ··· ··· ···
○ 真正做到让软件小白能从零开始掌握AE
○ 陈老师说:『除了放弃尝试以外没有失败』
○ 课程将AE x UI动效的知识点以典型案例的形式呈现

更多知识点传送门《UI动效交互案例:开启趣味之旅》课程 →
更多干货内容请继续关注站酷学习,喂饱你的求知欲~
