今天要来向大家介绍一个自动移动的表达式Math.sin,
这篇教学会利用Math.sin和index指令结合来制作类似波浪舞的效果!
- Math.sin简介
- 一般图形Wave效果
- 文字Wave效果
1.Math.sin简介
首先先用图形工具建立一个圆形当作Math.sin的对象。
在圆形的Position中Alt + 左键点击小码表Icon叫出表达式视窗。
先输入
x = ;
y = ;
value+[x,y]
输入完毕之后会出现一个惊叹号的图示表示无效指令,
那是因为我们还没替第1、2排的x、y定义,
定义完毕后,圆型的座标会随着x、y的定义来做增加。
由于我们不需要让x增加任何数值(不改变x的数),因此我们将x定义为0,
将y定义为Math.sin(time*5)*100。
这就是Math.sin的效果了:
这边的*5以及*100是可以变动的,
time*5代表频率为5,
括号外面的*100代表波幅(上下距离),
这边我们把y改为Math.sin(time*10)*50。
圆形的波动频率就变为两倍,而波幅变成一半了,
这就是Math.sin的基本使用方式了。
2.一般图形Wave效果
回到x、y定义之前,
因为波浪舞需要多个图层并且借由图层编号的变化来改变数值,
我们需要替Math.sin指令结合index。
将x定义为index*200 (每个图层会相隔200),
y定义为Math.sin(time*5+index)*100,
这边在括号中加入index是为了随着越往下的图层会有不同的波动变化,
完整表达式:
x = index*200;
y = Math.sin(time*5+index)*100;
value+[x,y]
小提醒:
如果某些单字输入了却还是跳出错误提示,
可以试着输入前几个字之后用AE的下拉选单选取,
会比较容易成功。
目前的动态长这样:
待会复制图层时圆形会往右边延伸,
因此我们要先把圆形放在画面左边。
在x = index*200后面做简单的加减就可以了!
圆形已经被移到左边囉。
接下来就只要复制图层就可以了。
随着图层的图层编号不同会改变index代表的数值,
借此达到波浪的效果:
当然你也可以在(time*5+index)中增加*2,
来改变物件和物件之间的变化剧烈程度。
同样的方法可以适用于位置、缩放、旋转及透明度等等哦。
3.文字Wave效果
接下来讲解文字的波浪方式,
首先先用文字工具打上一串文字。
接着在文字图层底下Text旁找到Animate的小箭头,
新增一个Position。
点选之后你可以直接在底下找到刚才新增的Position位于Range Selector 1底下。
在Range Selector 1上方的Animate旁点选Add > Selector > Expression。
Position就会被移至Expression底下囉!
拉动Position的数值可以看到文字依据字的位置做件层变化。
接下来点开Expression的下拉选单,
找到Amount > Expression : Amount,
找到输入表达式的地方。
将表达式改为:
Math.sin(time*5+textIndex)*100,
注意,这边的index要改成textIndex。
并调整Position的数值,就会看到文字出现波浪了!
完成之后效果如下:
你也可以在这时新增Opacity或其他动态选项,
新增之后会直接加入到Expression底下。
更改Opacity的数值。
这样就完成文字的Math.sin位移和透明度动态囉!
此教学专案档下载(cc 2018以上):