提交需求
賽事與廣告咨詢合作,請(qǐng)?zhí)顚懶枨蟊韱危覀儠?huì)在第一時(shí)間與您聯(lián)系!
很多童鞋在學(xué)習(xí)AE的時(shí)候會(huì)覺得表達(dá)式很難,不知道如何使用。今天像素妹給大家分享一些常用的表達(dá)式用法,揭開AE表達(dá)式神秘的面紗,為你的動(dòng)效設(shè)計(jì)加速。
表達(dá)式是AE內(nèi)部基于Java Script語言開發(fā)的編輯工具,能夠通過簡潔的代碼代替復(fù)雜的關(guān)鍵幀對(duì)于動(dòng)畫屬性的控制,從而提高我們的工作效率,實(shí)現(xiàn)出更加流暢、真實(shí)的效果。
AE里可以打關(guān)鍵幀的屬性前面都會(huì)有碼表,我們按著Alt鍵+鼠標(biāo)左鍵點(diǎn)擊碼表,就可以調(diào)出來屬性的表達(dá)式輸入框,接下來在里面輸入想要添加的表達(dá)式就可以了。
1、time時(shí)間表達(dá)式
time表達(dá)式的寫法是time*n,n表示單位時(shí)間(每秒)內(nèi),屬性參數(shù)的變化量。如給圖層的旋轉(zhuǎn)屬性添加表達(dá)式:time*90,則表示該圖層每秒鐘旋轉(zhuǎn)90度,并且旋轉(zhuǎn)會(huì)一直持續(xù)下去。
了解time表達(dá)式后,我們可以嘗試著做一個(gè)時(shí)鐘,畫出外輪廓以及秒針、分針。將秒針圖層旋轉(zhuǎn)屬性添加表達(dá)式time*360,分針圖層旋轉(zhuǎn)屬性添加表達(dá)式time*6(數(shù)值可以自定義,數(shù)值大小決定了旋轉(zhuǎn)的快慢)。
我們來看一下效果:
2、wiggle抖動(dòng)表達(dá)式
wiggle是很常用的表達(dá)式,對(duì)物體實(shí)現(xiàn)隨機(jī)抖動(dòng)。寫法是wiggle(x,y),x表示每秒鐘抖動(dòng)的頻率,y表示抖動(dòng)的幅度,即每次抖動(dòng)所偏移的量。
如新建一個(gè)文本圖層,調(diào)出位置屬性P,給位置屬性添加表達(dá)式wiggle(7,40),表示每秒抖動(dòng)7次,每次抖動(dòng)40個(gè)像素單位。
除了可以給位置屬性添加wiggle表達(dá)式以外,還可以給別的屬性添加,如縮放、旋轉(zhuǎn)、不透明度等。
如果希望在單個(gè)軸向上進(jìn)行抖動(dòng),我們就需要修改一下wiggle表達(dá)式的寫法。舉個(gè)例子,想要將動(dòng)畫限制在x軸抖動(dòng),抖動(dòng)頻率3,抖動(dòng)幅度90,那么表達(dá)式為[wiggle(3,90)[0],value[1]] 。(在這里0對(duì)應(yīng)x軸,1對(duì)應(yīng)y軸)
3、loopOut循環(huán)表達(dá)式
loopOut表達(dá)式可以創(chuàng)建循環(huán)的動(dòng)畫效果,我們只需要做動(dòng)畫的開始幀、結(jié)束幀,添加表達(dá)式后動(dòng)畫就會(huì)一直循環(huán)運(yùn)動(dòng),不用再重復(fù)打關(guān)鍵幀了。
基礎(chǔ)寫法是loopOut()
接下來我們使用loopOut表達(dá)式制作一個(gè)音量播放的效果,鞏固一下。
我們?cè)贏E中繪制一個(gè)矩形,將矩形的錨點(diǎn)調(diào)整至底部中心位置,這樣就可以通過縮放屬性來控制單向的長短變化。調(diào)出縮放S,把約束比例鎖鏈去掉,然后根據(jù)矩形的高度變化來打關(guān)鍵幀(結(jié)束幀與開始幀屬性相同)。
按Alt鍵+左鍵點(diǎn)擊縮放碼表,表達(dá)式輸入框內(nèi)只需要寫loopOut()即可實(shí)現(xiàn)循環(huán)效果;
用同樣的方式做出其它矩形,我們來看一下效果:
進(jìn)階一些的用法,是在loopOut()括號(hào)里面寫內(nèi)容,如下:
loopOut(type = "cycle", numKeyframes = 0)
我們也可以在表達(dá)式語言菜單里面選擇,點(diǎn)擊表達(dá)式右側(cè)的三角箭頭——Property中進(jìn)行調(diào)用。
loopOut循環(huán)表達(dá)式的類型,最常用的是“cycle”,指的是在動(dòng)畫的最后一個(gè)關(guān)鍵幀結(jié)束,然后從第一個(gè)關(guān)鍵幀開始循環(huán)播放。
想要做動(dòng)畫播放完再反向的來回循環(huán)運(yùn)動(dòng),可以將括號(hào)里的cycle替換成pingpong
若想在當(dāng)前動(dòng)畫基礎(chǔ)上疊加循環(huán)運(yùn)動(dòng),需要將括號(hào)里的cycle替換成offset
4、慣性彈跳表達(dá)式
生活中我們見過太多自由落體反彈的例子,比如籃球、乒乓球等,我們可以通過使用表達(dá)式來代替復(fù)雜的手動(dòng)k幀。接下來以一個(gè)案例的形式,給大家分享一下慣性彈跳表達(dá)式Bounce,讓我們可以輕而易舉地實(shí)現(xiàn)彈跳動(dòng)畫。
首先我們繪制地平線,再畫一個(gè)橢圓,對(duì)橢圓小球的位置屬性做垂直方向的運(yùn)動(dòng)。
將這兩個(gè)關(guān)鍵幀變成緩動(dòng),進(jìn)入圖表編輯器中調(diào)節(jié)運(yùn)動(dòng)曲線,保證結(jié)束幀的速度不為0(因?yàn)榻Y(jié)束幀速度為0,添加的慣性彈跳表達(dá)式會(huì)失去效果)
接下來是重點(diǎn)了,Keyframe Bounce Back表達(dá)式:
e = .7;
g = 5000;
nMax = 9;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time) n--;
}
if (n > 0){
t = time - key(n).time;
v = -velocityAtTime(key(n).time - .001)*e;
vl = length(v);
if (value instanceof Array){
vu = (vl > 0) ? normalize(v) : [0,0,0];
}else{
vu = (v < 0) ? -1 : 1;
}
tCur = 0;
segDur = 2*vl/g;
tNext = segDur;
nb = 1; // number of bounces
while (tNext < t && nb <= nMax){
vl *= e;
segDur *= e;
tCur = tNext;
tNext += segDur;
nb++
}
if(nb <= nMax){
delta = t - tCur;
value + vu*delta*(vl - g*delta/2);
}else{
value
}
}else
value
你沒有看錯(cuò),這么長都是慣性彈跳表達(dá)式的內(nèi)容。表達(dá)式開頭的e是彈性,g表示重力,nMax表示最大跳動(dòng)次數(shù)。我們將這一大段表達(dá)式進(jìn)行復(fù)制,按Alt鍵點(diǎn)擊位置屬性碼表,將表達(dá)式粘貼到表達(dá)式輸入框內(nèi),彈跳的效果就做好了~(我們可以適當(dāng)調(diào)節(jié)結(jié)束幀的速度以及重力等參數(shù),會(huì)看到不一樣的效果哦)
5、random隨機(jī)表達(dá)式
random表達(dá)式,可以實(shí)現(xiàn)隨機(jī)變化的效果。寫法是random(min,max),min表示最小值,max表示最大值,添加表達(dá)式后會(huì)在最小值與最大值之間隨機(jī)取數(shù)值進(jìn)行變化(很多人容易把random與wiggle搞混,wiggle是控制兩個(gè)不同屬性參數(shù)的變化)。
比如我們給矩形圖層的不透明度屬性添加表達(dá)式,random(50,100),圖層不透明度的值會(huì)在50%~100%之間隨機(jī)變化。
我們也可以給文本添加表達(dá)式,做出數(shù)字隨機(jī)出現(xiàn)的效果。選中文本圖層,找到“源文本”屬性,按Alt鍵單擊碼表,輸入random(5,20),表示文本會(huì)在5~20之間,隨機(jī)生成數(shù)值(這時(shí)生成的數(shù)值是帶有很長的小數(shù)點(diǎn)數(shù)字)。
為了在實(shí)際工作中更加實(shí)用,我們想要得到隨機(jī)生成的整數(shù)數(shù)字,就需要使用取整表達(dá)式Math.round() ,將需要取整數(shù)的表達(dá)式放在括號(hào)內(nèi)就可以了。如剛才的案例,表達(dá)式需要寫為Math.round(random(5,20)),這樣就可以實(shí)現(xiàn)隨機(jī)的整數(shù)數(shù)值變化了。
6、index圖層編號(hào)表達(dá)式
index指的是AE圖層前面的編號(hào),使用這個(gè)表達(dá)式可以非常便捷的做出有規(guī)律的變化效果。
先舉個(gè)簡單的例子,在AE中制作一個(gè)小太陽:
繪制一個(gè)橢圓和圓角矩形,將圓角矩形錨點(diǎn)調(diào)整至圓的中心,圖中紅框所示就是圖層的編號(hào)。
選中圓角矩形圖層,調(diào)出旋轉(zhuǎn)屬性R,按Alt鍵點(diǎn)擊碼表,表達(dá)式輸入框中輸入index*45。
復(fù)制多個(gè)圓角矩形圖層,你會(huì)發(fā)現(xiàn)圖層邊復(fù)制邊旋轉(zhuǎn),轉(zhuǎn)了一圈。在這個(gè)例子中,給第一個(gè)圖層旋轉(zhuǎn)屬性添加表達(dá)式index*45,index此時(shí)為1,表示圖層旋轉(zhuǎn)了45度,那么在復(fù)制圖層的時(shí)候,第二個(gè)圖層(圖層編號(hào)2)的角度就變成了90度,以此類推。
接下來像素妹給大家分享一個(gè)很有意思的index表達(dá)式拓展內(nèi)容:在AE中制作3D展示效果。
首先我們?cè)贏E合成中導(dǎo)入一張APP效果圖,打開3D圖層屬性。新建攝像機(jī),調(diào)節(jié)攝像機(jī)的參數(shù),將圖層順序放在效果圖的下面。
調(diào)出效果圖圖層的位置屬性,點(diǎn)擊位置——右鍵——單獨(dú)尺寸,這樣就可以把x、y、z位置屬性分離。
對(duì)z位置屬性添加表達(dá)式:index*1,這樣在進(jìn)行每次復(fù)制圖層的時(shí)候,會(huì)在z軸方向往后移動(dòng)1px,從而營造出三維厚度效果。
選中效果圖圖層,菜單欄——效果——顏色校正——曝光度,添加曝光效果。
在效果控件面板,降低曝光度的參數(shù),如-0.6,使整體圖片變暗。
接下來就是重頭戲了,我們將效果圖圖層選中,復(fù)制多個(gè),然后將第一個(gè)圖層(圖層編號(hào)1)的曝光度參數(shù)調(diào)回0。神奇的3D展示效果就出現(xiàn)了,是不是很簡單方便呢?ヾ(´∀`o)
7、延遲表達(dá)式
延遲表達(dá)式在動(dòng)效設(shè)計(jì)中是用的比較多的,想要做出運(yùn)動(dòng)物體之間延遲的效果,利用錯(cuò)幀雖然可以實(shí)現(xiàn),只不過想要后續(xù)修改的話會(huì)比較麻煩,那么使用表達(dá)式來做是一個(gè)非常便捷的方法。
首先新建合成,繪制小球,對(duì)位置屬性做動(dòng)畫(0s左側(cè),1s右側(cè),2s左側(cè))
接下來我們認(rèn)識(shí)一下延遲表達(dá)式valueAtTime(t),這個(gè)表達(dá)式可以通過括號(hào)內(nèi)的參數(shù)對(duì)圖層效果作用的時(shí)間產(chǎn)生影響,實(shí)現(xiàn)延遲的效果。可以直接用Alt鍵單擊位置屬性碼表,然后在表達(dá)式輸入框中輸入,也可以在表達(dá)式語言菜單中進(jìn)行調(diào)用。
我們可以結(jié)合前面講的index表達(dá)式,配合著做延遲效果。按Alt鍵單擊位置屬性碼表后,在表達(dá)式輸入框中的內(nèi)容最右側(cè)輸入一個(gè)點(diǎn).,然后輸入表達(dá)式valueAtTime(time-(index-1)*0.08)。這個(gè)表達(dá)式的意思是,第一個(gè)圖層動(dòng)畫效果不延遲,第二個(gè)圖層相較于第一個(gè)圖層延遲0.08s,以此類推(這里的延遲時(shí)間0.08可以根據(jù)個(gè)人需要調(diào)整)。
如果想要讓圖層之間有不透明度的變化,可以手動(dòng)k幀,也可以針對(duì)于不透明度屬性,添加表達(dá)式:
opacityFactor = .75;
Math.pow(opacityFactor,index - 1)*100
將圖層復(fù)制多個(gè),延遲的效果就做好啦,非常的好用~
除了位置屬性可以添加延遲表達(dá)式,其它屬性也可以,如縮放、旋轉(zhuǎn)、不透明度等,我們可以發(fā)揮自己的想象力,做出很多有意思的效果。
8、彈性表達(dá)式
在動(dòng)效中加入彈性效果看起來會(huì)更富有趣味性,不過在AE里手動(dòng)k幀簡直是要了老命的體力活,而且效果不一定好,在這里給大家介紹一下彈性表達(dá)式:
amp = .1;
freq = 2.0;
decay = 2.0;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){n--;}
}
if (n == 0){ t = 0;}
else{t = time - key(n).time;}
if (n > 0){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}
else{value}
首先我們繪制一個(gè)圓角矩形,將大小里的寬度、高度設(shè)置為一致,圓度調(diào)大,這樣看起來就是一個(gè)圓形了。對(duì)大小、圓度屬性打關(guān)鍵幀做出基礎(chǔ)動(dòng)畫,為了視覺效果更自然,可以將大小變化的關(guān)鍵幀變?yōu)榫弰?dòng)(要注意,緩動(dòng)的結(jié)束幀速度不能為0,不然彈性表達(dá)式不起作用)。
按Alt鍵單擊大小屬性碼表,將彈性表達(dá)式粘貼至表達(dá)式輸入框中,效果就出來啦,真的是非常友好~(彈性表達(dá)式里的amp表示振幅,freq表示頻率,decay表示衰減,我們可以適當(dāng)修改參數(shù)來看一下不同的效果)
最后妹兒給大家講解一下彈性表達(dá)式與延遲表達(dá)式的綜合使用,我們?cè)谇懊鎸W(xué)習(xí)到了延遲表達(dá)式的基礎(chǔ)用法,那么如何將兩個(gè)不同表達(dá)式結(jié)合呢?接下來給大家用一個(gè)簡單的案例來說明:
我們?cè)贏E中繪制一個(gè)小球,調(diào)出位置屬性,選中位置——右鍵——單獨(dú)尺寸,將位置屬性分離為x位置、y位置兩個(gè)獨(dú)立的屬性。將小球進(jìn)行復(fù)制,把復(fù)制的小球圖層順序放在下方。
然后對(duì)小球1(圖層編號(hào)1)的x位置打關(guān)鍵幀,做水平方向的位移動(dòng)畫。選中關(guān)鍵幀變成緩動(dòng),同樣需要注意的是結(jié)束幀的速度不能為0,需要在圖表編輯器中進(jìn)行調(diào)節(jié)運(yùn)動(dòng)曲線。按著Alt鍵單擊小球1的x位置屬性碼表,將彈性表達(dá)式粘貼在表達(dá)式輸入框中。(根據(jù)個(gè)人需要可以適當(dāng)調(diào)節(jié)表達(dá)式參數(shù))
這時(shí)候我們發(fā)現(xiàn)小球2的y位置是與小球1一致的,我們想要讓它們垂直方向數(shù)值不同,可以按著Alt鍵單擊小球2的y位置碼表,在表達(dá)式輸入框內(nèi)容的后面寫:+100*(index-1)
表示當(dāng)前小球2(圖層編號(hào)2)的垂直方向會(huì)增加100,也是考慮到后期會(huì)復(fù)制圖層,所以直接采用了表達(dá)式的方式(你們應(yīng)該知道我不會(huì)手動(dòng)k幀的對(duì)吧o( ̄ε ̄*))
接下來難點(diǎn)來了,我們按Alt鍵單擊小球2的x位置碼表,然后拖拽表達(dá)式關(guān)聯(lián)器(螺旋圖標(biāo))到小球1的x位置上。這時(shí)候我們發(fā)現(xiàn)小球2的x位置表達(dá)式輸入框里的內(nèi)容就有變化了,變成了與小球1有關(guān)(此時(shí)已經(jīng)具備了彈性表達(dá)式效果)
我們想要做出延遲的效果,就直接在小球2的x位置表達(dá)式輸入框內(nèi)容的后面輸入.valueAtTime(time-(index-1)*0.05)
選中小球2圖層,復(fù)制兩層,最終的效果就完成了~是不是很簡單呢?
以上這些表達(dá)式都是一些比較基礎(chǔ)好記的,大家是不是已經(jīng)學(xué)會(huì)了呢?當(dāng)然并不是任何時(shí)候都要使用表達(dá)式,而是要根據(jù)不同的效果來選擇,我們最終的目的是要實(shí)現(xiàn)出想表達(dá)的效果。
妹兒今天的這篇文章只是起到了拋磚引玉,最重要的是要打開思維,多練多思考,慢慢的就會(huì)發(fā)現(xiàn)AE表達(dá)式其實(shí)沒有那么可怕。
感謝大家的觀看哦,我們下期再見~(?•??•?)??
Powered by Froala Editor
密碼登錄
大牛,別默默的看了,快登錄幫我點(diǎn)評(píng)一下吧!:)
登錄 立即注冊(cè)