2020-8-27 資深UI設(shè)計者
很多朋友面對AE表達(dá)式望而生畏,不過再難的東西都會有它最本質(zhì)的規(guī)則,如果你理解了基本的原理和常用的表達(dá)式命令,這也許會提高你的工作效率。我通過自己對AE表達(dá)式的理解,嘗試用最簡單的語言解釋一些看似復(fù)雜的操作,如果此篇文章能給你帶來一些啟發(fā),不勝榮幸~
表達(dá)式就是AE內(nèi)部基于JS編程語言開發(fā)的編輯工具,可以理解為簡單的編程,不過沒有編程那么復(fù)雜。其次表達(dá)式只能添加在可以編輯的關(guān)建幀的屬性上,不可以添加在其他地方;表達(dá)式的使用根據(jù)實際情況來決定,如果關(guān)鍵幀可以更好的實現(xiàn)你想要的效果,使用關(guān)鍵幀就可以啦,表達(dá)式大部分情況下是可以更節(jié)約時間,提高工作效率的。
A.表達(dá)式開關(guān) B.表達(dá)式圖表 C.表達(dá)式關(guān)聯(lián)器 D.表達(dá)式語言菜單
由于AE里不同的屬性的參數(shù)不同,常用的我們可以分為:數(shù)值(旋轉(zhuǎn)/不透明度)、數(shù)組(位置/縮放)、布爾值(true代表真、false代表假/0代表假、1代表真)這三種形式來進(jìn)行書寫表達(dá)式。對于表達(dá)式AE也有很多內(nèi)置的函數(shù)命令,直接可以在表達(dá)式語言菜單里面進(jìn)行調(diào)用。
原理:
time表示時間,以秒為單位,time*n =時間(秒數(shù))*n (若應(yīng)用于旋轉(zhuǎn)屬性,則n表示角度)
舉例:
若在旋轉(zhuǎn)屬性上設(shè)置time表達(dá)式為time*60,則圖層將通過1秒的時間旋轉(zhuǎn)60度,2秒時旋轉(zhuǎn)到120度以此類推(數(shù)值為正數(shù)時順時針旋轉(zhuǎn),為負(fù)數(shù)時逆時針旋轉(zhuǎn))
注意事項:
time只能賦予一維屬性的數(shù)據(jù)。(位置屬性可進(jìn)行單獨尺寸的分離,從而可單獨設(shè)置X或Y上的time)
wiggle(freq, amp, octaves = 1, amp_mult = 0.5, t = time)
原理:
freq=頻率(設(shè)置每秒抖動的頻率);amp=振幅(每次抖動的幅度);octaves=振幅幅度(在每次振幅的基礎(chǔ)上還會進(jìn)行一定的震幅幅度,很少用);amp_mult=頻率倍頻(默認(rèn)數(shù)值即可,數(shù)值越接近0,細(xì)節(jié)越少;越接近1,細(xì)節(jié)越多);t=持續(xù)時間(抖動時間為合成時間,一般無需修改);一般只寫前兩個數(shù)值即可
舉例:
若在一維屬性中,為位置屬性添加wiggle(10,20),則表示圖層每秒抖動10次,每次隨機(jī)波動的幅度為20;若在二維屬性中,為縮放添加n=wiggle(1,10);[n[0],n[0]],則表示圖層的縮放XY在每秒抖動10次,每次隨機(jī)波動的幅度為20;若在二維屬性中,想單獨在單維度進(jìn)行抖動,需要將屬性設(shè)置為單獨尺寸后添加wiggle(10,20),表示圖層的縮放X軸在每秒抖動10次,每次隨機(jī)波動的幅度為20。
注意事項:
可直接在現(xiàn)有屬性上運(yùn)行,包括任何關(guān)鍵幀
原理:
為每間隔多少數(shù)值來產(chǎn)生多少變化
舉例:
若為圖層1的旋轉(zhuǎn)屬性添加表達(dá)式index*5 ,則第一個圖層會旋轉(zhuǎn)5度,之后按Ctrl+D去復(fù)制多個圖層時,第2個圖層將旋轉(zhuǎn)10度,以此類推;若想第一層圖形不產(chǎn)生旋轉(zhuǎn)保持正常形態(tài),復(fù)制后的圖形以5度遞增,表達(dá)式可寫為(index-1)*5
原理:
在當(dāng)前時間輸出當(dāng)前屬性值
舉例:
若對位置屬性添加表達(dá)式為value+100,則位置會在關(guān)鍵幀數(shù)值的基礎(chǔ)上對X軸向右偏移100(正數(shù)向右側(cè),負(fù)數(shù)像左側(cè));若想控制Y軸的位置屬性,則可對位置屬性進(jìn)行單獨尺寸的分割,從而可單獨控制Y軸(正數(shù)向下,負(fù)數(shù)向上)
注意事項:
更多的使用場景是結(jié)合其他表達(dá)式一起應(yīng)用
5. random表達(dá)式(隨機(jī)表達(dá)式)
原理:
random(x,y)在數(shù)值x到y(tǒng)之間隨機(jī)進(jìn)行抽取,最小值為x,最大值為y
舉例:
若為數(shù)字源文本添加表達(dá)式random(20),則數(shù)據(jù)會隨機(jī)改變,最大值不會超過20;
若為數(shù)字源文本添加表達(dá)式random(10,100),則數(shù)據(jù)會在10<數(shù)值<100之間隨機(jī)改變; 若為數(shù)字源文本添加表達(dá)式seedRandom(5, timeless = false),random(50),則數(shù)據(jù)會在50以內(nèi)隨機(jī)改變(前面的5是種子數(shù),如一張畫面中需要多個相同區(qū)間的數(shù)值做隨機(jī)變化,就要為他們添加不同的種子數(shù),防止兩者隨機(jī)變化雷同),若希望數(shù)字隨機(jī)變化為整數(shù)則應(yīng)添加表達(dá)式為Math.round(random(2,50)),表示在2和50之間隨機(jī)改變無小數(shù)
注意事項:
隨機(jī)表達(dá)式不僅局限于數(shù)據(jù)上的使用,其他屬性也可以應(yīng)用,若數(shù)值為整數(shù)Math的M要大寫
原理:
以此類推
舉例:
如下圖gif
原理:
timeRemap*n,n以幀為單位
舉例:
將圖層設(shè)置為timeRemap*10,代表每隔10幀就抽掉1幀畫面,(根據(jù)要抽取的速率決定)
注意事項:
使用timeRemap表達(dá)式之前要啟用時間重映射,否則無法使用此表達(dá)式
原理:
舉例:
見下圖均以(time,0,3,131,1000)為例,若為數(shù)字的源文本屬性添加此表達(dá)式可以制作出倒計時的效果n=linear(time, 0, 3, 3, 0)表示從0-3秒數(shù)字從3到0,希望數(shù)字為整體需添加Math.floor()
注意事項:
倒計時的用法比較常用,整數(shù)M要大寫
原理:
degreesToRadians(degrees) 角度轉(zhuǎn)為弧度(degrees度的變量或表達(dá)式)radiansToDegrees(radians)弧度轉(zhuǎn)為角度(radians弧度的變量或表達(dá)式)
舉例:
常用語數(shù)學(xué)中的一些計算sin,cos,tan,sec,csc,cot等
原理:
layer(index)中index 是數(shù)值,按照編號檢索圖層;layer(name)中name 是一個字符串,按照名稱檢索圖層(若沒有圖層名稱,則根據(jù)源名稱);layer(otherLayer, relIndex)中otherLayer 表示圖層對象,relIndex 表示數(shù)值,檢索屬于圖層對象的數(shù)值圖層
舉例:
原理:
marker.key(index)中index 是數(shù)值;marker.key(name)中name 是一個字符串
舉例:
thisComp.marker.key(1).time表示返回第一個合成標(biāo)記的時間;thisComp.marker.key(“我叫注釋名稱”).time表示返回具有名稱”我叫注釋名稱”的合成標(biāo)記的時間
原理:
width表示返回合成寬度;height表示返回合成高度
舉例:
[thisComp.width/2, thisComp.height/2]表示寬度和高度為合成的一半也就是居中的位置
原理:
param(name)中name表示字符串;param(index)表示數(shù)值
舉例:
effect(“高斯模糊”).param(“模糊度”)效果控制點始終位于圖層空間中
原理:
復(fù)制粘貼表達(dá)式使用就可以,amp表示振幅,freq表示頻率,decay表示衰減(根據(jù)不同需求做不同的調(diào)整)
舉例:
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);
amp = .03;
freq = 2.5;
decay = 4.0;
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value;}
上述內(nèi)容復(fù)制粘貼使用即可
注意:motion2腳本也帶此功能,方法不唯一
原理:
k表示反彈最終結(jié)果,a表示反彈阻力,b表示反彈變化時間
舉例:
k=500; a=8; b=30; x=k*(1-Math.exp(-a*time)*Math.cos(b*time));[x,x](根據(jù)不同情況調(diào)節(jié)kab的數(shù)值即可)
原理:
StartNumber表示開始時的數(shù)值,EndNumber表示結(jié)束時的數(shù)值,StartTime表示開始的時間,EndTime表示結(jié)束的時間,和前面的linear表達(dá)式相對應(yīng)
舉例:
StartNumber=1;
EndNumber=20;
StartTime=0;
EndTime=3;
t=linear(time,StartTime,EndTime,StartNumber,EndNumber);Math.floor(t)
原理:
spd表示擠壓拉伸的速度,maxDev表示擠壓拉伸的大小,decay表示衰減
舉例:
spd =20;maxDev =10;
decay = 1;
t = time – inPoint;
offset = maxDev*Math.sin(t*spd)/Math.exp(t*decay);
scaleX = scale[0] + offset;scaleY = scale[1] – offset;
[scaleX,scaleY]
原理:
delay表示要延遲的幀數(shù)
舉例:
為位置屬性添加表達(dá)式delay = 0.5;
d = delay*thisComp.frameDuration*(index – 1);
thisComp.layer(1).position.valueAtTime(time – d);
如想要實現(xiàn)不透明度拖尾需為不透明度屬性添加表達(dá)式opacityFactor =.80;
Math.pow(opacityFactor,index – 1)*100(調(diào)整好一個圖層后復(fù)制多個)
文章來源:優(yōu)設(shè) 作者:凌旬
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://tweetduck.com