- 了解数组。
- 表达式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]]
换一个逻辑更清晰的写法。
变量最好使用小驼峰命名法。个人的习惯,写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 是调用当前值。
老师好厉害
Good!