AE表达式｜03、如何让一个小方块从左运动到右？@ time

效果预览：

敲黑板：

• 了解数组。
• 表达式time的使用。

要让一个小方块从左运动到右，只需要改变位置属性x轴的数值。Key帧的方法这里就不讨论了。

方法一：

新建形状层，绘制一个小方块。P键调出Position（位置）属性，Alt／Option ＋ left-click ,调出表达式编辑面板。小方块的位置属性有两个值，x轴的位置，和y轴的位置。我们希望小方块y轴不动，在x轴上从左往右，也就是让x轴的数值随着时间不断增加。AE里Position属性不是一个单独的数值，而是一个由x轴数值和y轴数值组成的数组。我们先来了解一下“数组”。

数组是具有相同的数据类型且按一定次序排列的一组变量的集合体，构成一个数组的这些变量称为数组的分量，也称为数组的元素。

在js语言里，通过index(索引)来获得数值的数据，索引从0开始，通过“［ ］”来定义。比如上面例子里的小方块，通过position[0]可以获得x轴的数值，通过position[1]来获得y轴的数值。如果是三维图层，position数组的第三个值就是z轴的值，可以通过position[2]来获取。

我们来看另外一个例子：

表达式可以直接输出值。新建文字图层，给Source Text 添加表达式：

"随机"

则该文字层会输出汉字“随机”。

接着我们来试一下数组：

randomText = ["随","机","文","字"] // 定义一个叫做“randomText”的数组。

randomText[0] // 获取randomText数组里顺序排在第一位的值，也就是“随”。

randomText[0] 返回值为“随”；randomText[1］返回值为“机” ；randomText[2]返回值为“文” ；randomText[3]返回值为“字”；randomText[4]则会报错。

值得说一下的是，数组之间，可以直接进行运算。

如：

A = [7,8]
B = [3,4]

A + B

则返回的值是 [10,12] 。同理，A - B 返回的值是 [4,4] 。数组在运算的时候，是第一个数值和第一个数值运算，第二个数值和第二个数值运算……以此类推。最后返回的值依然是一个数组。

回到小方块上来，我们需要的是让表达式返回一个数组，分别以x轴和y轴作为元素。

AE里位置属性都是按照x轴、y轴、z轴的顺序排列的，y轴是第二个数值，通过position[1]可以获得y轴的值。

我们这里案例里，y轴不变，依然是position[1] 。

x轴的数据加上一个随时间变化的数值。

time是非常常用的表达式，我们可以将其当成为“引擎”，可以用它来驱动很多的运动。比如这个小例子里，我们用它来驱动小方块的运动。

time是时间线上“秒”的数值，注意是单位是秒，也就是在时间线1秒的位置返回的值就是1，2秒的位置返回的值就是2……

在AE里，通常情况下因为time的值比较小，比如在我们的小方块例子里，position[0] ＋ time ，那么小方块5秒钟只会移动5个像素点，变化较小，所以ae里利用表达式time改变位置属性时候，通常会在后面乘以一个常数（数值大小根据实际项目需求）。

所以，要实现小方块从左往右移动，我们可以将表达式写成：

[position[0] + time*100,position[1]]

换一个逻辑更清晰的写法。

先定义x轴的数值，不用拼写英文单词，直接使用拾取器：

变量最好使用小驼峰命名法。个人的习惯，写AE表达式时候，大写的X、Y、Z只会用来分别代表x轴、y轴和z轴，所以没有使用驼峰命名法。

X = transform.position[0] + time*100 ;

Y = transform.position[1] ;


[X,Y]

方法二：

不想用到数组，直接增加x轴的数值也是可以的。

在位置属性上右键点击，直接把x轴和y轴的属性拆分开：

如果之间添加表达式：

time*100

小方块会从x轴为0的位置开始移动。要让小方块从当前位置开始往右移动，表达式写为：

transform.xPosition + time*100

或者：

value + time*100

注：value 是调用当前值。

< 返回目录