中文教學主要是翻譯至JJ Gifford 網站, 內容較舊(AE 5.0), 所以做了些修改, 但expression及script部分沒什麼變化.
Expressions(表達式)介紹
After Effects的動畫元素大約有5種方式
- Brute Force(暴力):直接在圖層設定keyframe, 自由度最高,但遇到複雜動畫時也最辛苦.
- Pre-composing(合成):將多圖層合而為一, 轉成一個Comp屬性的圖層, 有如其他程式的群組關係.
- Parenting(父子關聯):圖層間建立父子連接關係, 對父物件所做的變形, 會作用到子物件.
- Expressions(表達式):依附在圖層的特性(property)中,是Realtime(即時的)且live(存在的), 不同時間產生不同反應, 也可以與現有的Keyframe合作.
- Script(腳本):不同於Expression必須依附在圖層特性中,Script可獨立存在, 以視窗等獨立介面呈現, 一次性執行完畢, 產生結果.
何時使用Expressions
- 不同圖層間的特性連接例如兩個圖層間以建立父子關聯,綠色方塊為父,黃色方塊為子,parenting時,黃色跟著綠色做變化;但有時只需要跟隨位置,所以不需建立父子關聯, 僅用expression取得綠色的position(位置)特性.
- 自動化
例如底下只需讓一個特性Scale做變化,僅僅設定一個keyframe,再加上以時間做參數的expression. - 特性加入一些亂數
在原有的keyframe作用的情況下,利用expression讓原先值做變化,如底下的position加入wiggle晃動.
何時不需要使用Expression?
有一句話"不要以為有了槌子,就把每樣東西當作釘子",這句話的意思是說不要以為expression很厲害,就一直用,應該是需要用的時候才用.
撰寫Expression
選擇要加入expression的特性後,
1.從選單中Animation>Add Expression,將特性轉成expression模式
2.Alt+左鍵點擊碼表圖示.
多出來的"=",點擊可開關expression功能, 特性數值成紅色表示啟用expression, "="旁邊的圖式稍後討論, 最右邊的 tansform.rotation 為expression程式碼.
- 第1個圖形鈕用圖形顯示expression計算後的結果.
- 第2個的螺旋圖按鈕,用於幫忙抓取此Composition(也稱Comp,是一個放圖層的容器; Comp中也可放入Comp屬性的圖層)中,所有可用的特性,並轉成expression程式碼,就不需要自己打字.
- 第3個箭頭圖按鈕,提供expression中的函式庫.
什麼是Expression?
在一個圖層特性中,最簡單的expression就是一個值(expression的分號可有可無),如
6;這可能沒啥作用,若是底下這樣可能還較有用.
rotation;當執行時,會得出圖層的rotation值,若將這rotation表達式用在opacity特性中,圖層旋轉時,不透明度opacity也會跟著變化.
Expressions用JavaScript語法,網路上有很多資料可查詢.JavaScript功能相當齊全,例如opacity可做一些數學運算.
opacity*10;上式只是將圖層的opacity乘10,若opacity是100,則得出1000,若將這表達式用在rotation,則圖層旋轉1000度.
"="在哪裡呢?
比如在position中加入expression, 直接輸入[100,100],將圖層移至座標 x=100,y=100 位置,也可以用語法
position=[100,100];但若只輸入100,會發生錯誤,所以只要數值格式正確,是不需要'='.
一個expression只能控制一個特性
例如在position中加入expression,這個expression只能操作位置特性,如果想在裡面操作rotation辦不到的;若要操作rotation就在rotation特性中加入expression.
Expression可以多行程式碼
之前都只看到一行, 然而幾百行都可以, 但是expression不是AE的Script, 行數越少越好, 總不能每移到不同時間, 幾百行的expression又執行一次, 盡量簡單.以下是rotation的expression範例.
offset=30;offset是變數,程式碼中rotation是旋轉特性初始值,如果初始值為0,那加上30,所以ralph變數成為30,最後結果是30,圖層則旋轉30度,(拉黃色邊框調區塊大小)
ralph=rotation+offset;
ralph;
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
螺紋選取工具
按住螺紋按鈕, 再移到要取用的特性(屬性)文字上, 放開滑鼠左鍵即取得該特性的expression表達式
這表示Opacity(不透明度)的將取用transform.rotation的值, 因為都是同一個圖層(物件)中的特性, 直接輸入rotation也起作用.
opacity跟隨rotation變化
如果您抓取的是同個comp中的不同圖層的特性, 如下, 記得先選取要被取代的文字(藍底白字).
thisComp.layer("Yellow Solid 1").transform.opacity
thisComp : 表示目前所在Comp
layer("Yellow Solid 1") : 此Comp中的名為Yellow Solid 1的圖層.
transform.opacity : 表示Yellow Solid 1的 transform群組特性中的opacity特性.
若您改成這樣也可 thisComp.layer("Yellow Solid 1").opacity
layer("Yellow Solid 1") : 此Comp中的名為Yellow Solid 1的圖層.
transform.opacity : 表示Yellow Solid 1的 transform群組特性中的opacity特性.
若您改成這樣也可 thisComp.layer("Yellow Solid 1").opacity
Vectors, Arrays, Dimensions 與 Indexing
當你用螺紋從position連到rotation後, 會得到兩行程式碼(根據版本會有不同).
因為position必須用到x,y座標值, 所以不管程式幾行, 最後一行都必須求出 2維數值,上例用
[temp,temp]表示. 這二個或多個數值資料的組合稱為vector(向量)或array(陣列) .
Vector vs Array
Vector向量是數值的組合, 2個值是2維向量,如
[3,4]
3個值是3維向量,如
[3,4,5]
Array陣列是多個資料的組合,如
ralph=[10, thisLayer, "bob"]
ralph變數裡面就有整數值 10 , 圖層 thisLayer , 字串 "bob". 順便一提, 正常用法是不會將不同型態值放在同一陣列內.
說白了Vector也是一個Array, 只是意義不同.
Indexing(索引)
有如在一個陣列內取得某個資料, 如
position[0]
從圖層的position特性取得位置0, 也就是第一個資料, Javascript的陣列從0開始, 所以0表示第一個.
position是xyz座標值, 所以第1個也等於x座標值,
position[1] 等於y座標值
建立陣列
建立一個3維空間向量給變數myVector
myVector = [10,20,30]
myVector[1] 得到20
Dimensions維度
陣列內的數值數目等於它的維度, 如上方的myVector 是3維. 一般圖層的position是2維, 但若轉成3D圖層就是3維position. 圖層的rotation與opacity是1維,也稱純量(scalar).
修改陣列內的元件
例如 positio特性可寫成
[position[0], position[1]];
這是將position的第1及第2個值取出來, 再放入 position特性內, 結果等於直接寫 position , 這用意是說可以取用或修改陣列內的某個元件, 如下
top_of_layer=0;
[anchorPoint[0], top_of_layer];
若將以上寫入圖層anchor point(錨點)特性中, x軸不會變, 因為是取用自已anchorPoint的x值, 但是y軸會往上移到0位置.
上面範例是2維, 當轉成3維圖層, 若你沒補上第三個z值, AE會自動判斷z為0
下面例子假設你複製comp內最上方第1個圖層的position到某個圖層位置, 並修改y值,
ralph=thisComp.layer(1); //將comp內第1個圖層指定給變數ralph, 切記 layer(1) != layer[1]
[ralph.position[0], ralph.position[1]-100];
若2個圖層都轉成3D, 移動第1個圖層時, 發現第2個只跟隨第1個的xy值, 因為z軸不受expression制約. (加上camera後做圖層移動,camera不要放在最上方第一個位置)
了解陣列很重要
例如
position = 6;
AE會警告這是錯誤, 因為position必定是2維或3維, 不能給1維數值.
position=[320,240];
以上正確!
以下是一些圖層常用的特性(參數)資料表
| 圖層特性 | 維度 | 單位 | 範圍 | 一般範圍 |
| anchorPoint | 2* [x, y, (z)] | pixels | ±無限 | 0–圖層寬高 |
| position | 2* [x, y, (z)] | pixels | ±無限 | 0–comp寬高 |
| scale | 2* [width, height, (depth)] | percentage | ±無限 | ±100 |
| rotation | 1 | degrees | ±無限 | 0–360度 |
| opacity | 1 | percentage | 0–100 | 0–100 |
| orientation (只有3D) | 3 [x, y, z] | degrees | ±無限 | 0-360度 |
| audioLevels | 2 [left, right] | decibels | -192–24 | -48–12 |
| ambient | 1 | percentage | 0–100 | 0–100 |
| diffuse | 1 | percentage | 0–100 | 0–100 |
| specular | 1 | percentage | 0–100 | 0–100 |
| shininess | 1 | percentage | 0-100 | 0-100 |
| * 當圖層是3D時,就是3維 | ||||
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
調整值的範圍
例如第一頁教學中的用rotation來變化opacity, opacity值的範圍是0~100; 但rotation是正負無窮大.
以轉1圈360度來說, 100度以上opacity就不作用, 若想要完整轉一圈來變化opacity全過程, 需做一些數學運算,
rotation / 360 = opacity / 100
上式 rotation等於0時, opacity也等於0 ; rotation為360時, opacity為100
上面程式碼再做一些變化得到下面的程式碼, 求opacity 的運算式, 其中rotation/360的值介於0~1, 那0~1之間的值乘100, 所求得的值為0~100之間. 合乎opacity範圍
opacity =(rotation / 360) * 100 //括弧()可省略, 加上是為了清楚運算順序
同以上的理, 下方例子中
圓周長:circumference
距離:distance
rotation是根據所走的距離(最長距離等於圓周長度), 來判斷旋轉度數.
distance/circumference的值會落在 0~1 之間, 再用此值去乘360, 最後所得值範圍必定為 0~360
為了使輪胎轉動, 所以 expression要放在rotation特性中, rotation 是被 position 所驅動.
一開始 expression 可能會如下
rotation=position*? //執行會出現錯誤, 因為還要替? 輸入正確變數, ?只是暫時代替
要做水平方向移動才能看到輪胎旋轉, 所以取用position的x值 position[0] 來計算輪胎圖層跑多少距離, 輪胎是從comp的左邊移到右邊, 起點跑設定在comp的最左邊(comp的座標是左上到右下), 程式碼如下.
rotation=position[0]*?
為了讓輪胎完整轉1圈, 所以要跑相當於1個圓周長距離, 轉1圈是360度. 根據所跑距離是圓周長的多少比例, 用相同比例的值來判斷輪胎轉幾度.
rotation=(position[0]/circumference)*360 //括弧()可以省略
輪胎越大, 圓周長度越大, 圖層就必須移動越遠才能轉一圈, 現在要來定義圓周長度,
diameter是直徑, 圓周長公式 diameter*PI
以前學校學的圓周長公式是2*π*r , r是半徑, 2*r是直徑 , π是圓週率(圓周長與直徑的比率,不變的值), javascript中以PI表示, 必須用 Math.PI 來存取, 或自己輸入3.14 , expression如下
circumference=width*Math.PI; //width是輪胎寬度(直徑), 等於2*r(半徑)
因為是用於rotation特性中, 所以之前的expression程式碼
rotation=(position[0]/circumference)*360
可以刪除rotation=
最後做全部程式碼整理, 得到
distance=position[0];
circumference=width*Math.PI;
distance/circumference*360;
應用此expression時, 圖層scale特性必須是100%, 若有改變要另外處理, 留給讀者自己思考.
上述效果當然也可手調, 但是若要做加速或減速時, 調不好輪胎會打滑, 還是用expression比較準確與真實.
範例檔下載 MAC Window
距離:distance
rotation是根據所走的距離(最長距離等於圓周長度), 來判斷旋轉度數.
distance/circumference的值會落在 0~1 之間, 再用此值去乘360, 最後所得值範圍必定為 0~360
為了使輪胎轉動, 所以 expression要放在rotation特性中, rotation 是被 position 所驅動.
一開始 expression 可能會如下
rotation=position*? //執行會出現錯誤, 因為還要替? 輸入正確變數, ?只是暫時代替
要做水平方向移動才能看到輪胎旋轉, 所以取用position的x值 position[0] 來計算輪胎圖層跑多少距離, 輪胎是從comp的左邊移到右邊, 起點跑設定在comp的最左邊(comp的座標是左上到右下), 程式碼如下.
rotation=position[0]*?
為了讓輪胎完整轉1圈, 所以要跑相當於1個圓周長距離, 轉1圈是360度. 根據所跑距離是圓周長的多少比例, 用相同比例的值來判斷輪胎轉幾度.
rotation=(position[0]/circumference)*360 //括弧()可以省略
輪胎越大, 圓周長度越大, 圖層就必須移動越遠才能轉一圈, 現在要來定義圓周長度,
diameter是直徑, 圓周長公式 diameter*PI
以前學校學的圓周長公式是2*π*r , r是半徑, 2*r是直徑 , π是圓週率(圓周長與直徑的比率,不變的值), javascript中以PI表示, 必須用 Math.PI 來存取, 或自己輸入3.14 , expression如下
circumference=width*Math.PI; //width是輪胎寬度(直徑), 等於2*r(半徑)
因為是用於rotation特性中, 所以之前的expression程式碼
rotation=(position[0]/circumference)*360
可以刪除rotation=
最後做全部程式碼整理, 得到
distance=position[0];
circumference=width*Math.PI;
distance/circumference*360;
應用此expression時, 圖層scale特性必須是100%, 若有改變要另外處理, 留給讀者自己思考.
上述效果當然也可手調, 但是若要做加速或減速時, 調不好輪胎會打滑, 還是用expression比較準確與真實.
範例檔下載 MAC Window
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
前面的教學, 已經知道藉由合併簡單的除法與加法來"手動"調整值的範圍. 我們也可以用同樣的方式轉換360度旋轉特性作用到opacity特性上. 但這不是唯一的方式, 因為AE提供內建的內插函式, 特別設計用來做某個特性中(如opacity)的一組數值的轉換.
linear(t, tMin, tMax, value1, value2)這些函式看起來很複雜, 其實只是參數比較多而已, 這些參數是
ease(t, tMin, tMax, value1, value2)
ease_in(...), ease_out(...)
| t | 變數名, 但輸入值必須是1維的值, 例如rotation或time變數 |
| tMin | t的最小值,可以省略.省略時,預設為0. |
| tMax | t的最大值,可以省略.省略時,預設為1. |
| value1 | 此函式輸出的最小值. 當t等於或小於tMin時, 以value1值輸出. value1可以是數字或向量 |
| value2 | 此函式輸出的最大值. 當t等於或大於tMax時, 以value2值輸出. value2可以是數字或向量 |
舉個例子
linear(time, 0, 5, 0, 360); //time是comp中的內建變數,秒為單位
根據字面解釋: 當time變數值(時間)從0 ~ 5, 以線性計算出0 ~ 360之間的值. 若將此expression運用在圖層的rotation特性中, 圖層會在0秒~5秒間旋轉360度.
到第5秒停止旋轉
如果使用這行程式, 會在第五秒自動停止旋轉. 與上一個教學所講到的技術最大不同是, 本次程式在第五秒自動停止, 前次的教學是一直執行下去(若要停止,必須在加上程式碼).
一直旋轉
除了linear()之外, 還有ease(), easeIn() 及 easeOut()等內插函式. 使用這些函式來計算出更自然的效果.
- linear() : 中間自動產生的內插值, 以線性方式變化.
- ease() : 起點與終點變化較緩慢.
- easeIn() : 緩慢離開起點.(寫成ease_in 也可)
- easeOut() : 緩慢到達終點.(寫成ease_out 也可)
範例:捲動軸動畫
這裡將建立一個簡單的捲動軸動畫, 先建立二個圖層, 一個捲動軸(右邊小方塊)圖層(左右兩條垂直線也是圖層,可忽略), 一個文字區塊圖層. 文字圖層的anchor point(軸心)將加入expression (若加在position, position就被封住) ,這樣排版時我們還可移動文字圖層的position, 但position基本是不動, 因為要驅動的是捲動文字圖層的anchor point.
必須記得, anchor point的值變化與圖層移動是相反的. 在這個例子, 要將文字圖層的anchor point往下移動, 所以文字會往上移動. 為了捲動完所有文字, 必須讓anchor point的y軸數值從0變化到文字區塊的高度值, 所以變數設定成
value1 = 0
value2 = height
其他變數tMin , tMax , 可以設定為0 及 所在comp的高度. 為了外觀好看一點, 可以做些修改, 假設尺寸為 320x240. 我們設定使用範圍從 20 到 220. 所以設定捲動軸的y軸值為
tMin=20
tMax=220
所以捲動軸的y座標值為linear函式的輸入值. 得到以下程式碼
scrollY = thisCom.layer("Scroll").position[1];
scrolledAmount = linear(scrollY, 20, 220, 0, height); //捲動多大範圍
最後將這結果scrolledAmount放入座標陣列中, 讓anchor的x軸的值不變, 完整的expression如下.
scrollY=thisComp.layer("Scroll").position[1];
scrolledAmount=linear(scrollY, 20, 220, 0, height);
[anchorPoint[0], scrolledAmount];
最後的動畫如下, 右邊小方塊是捲動軸 thisComp.layer("Scroll") , 它的y軸值將讓文字區塊移動.
水平捲動
3D旋轉捲動
必須記得, anchor point的值變化與圖層移動是相反的. 在這個例子, 要將文字圖層的anchor point往下移動, 所以文字會往上移動. 為了捲動完所有文字, 必須讓anchor point的y軸數值從0變化到文字區塊的高度值, 所以變數設定成
value1 = 0
value2 = height
其他變數tMin , tMax , 可以設定為0 及 所在comp的高度. 為了外觀好看一點, 可以做些修改, 假設尺寸為 320x240. 我們設定使用範圍從 20 到 220. 所以設定捲動軸的y軸值為
tMin=20
tMax=220
所以捲動軸的y座標值為linear函式的輸入值. 得到以下程式碼
scrollY = thisCom.layer("Scroll").position[1];
scrolledAmount = linear(scrollY, 20, 220, 0, height); //捲動多大範圍
最後將這結果scrolledAmount放入座標陣列中, 讓anchor的x軸的值不變, 完整的expression如下.
scrollY=thisComp.layer("Scroll").position[1];
scrolledAmount=linear(scrollY, 20, 220, 0, height);
[anchorPoint[0], scrolledAmount];
最後的動畫如下, 右邊小方塊是捲動軸 thisComp.layer("Scroll") , 它的y軸值將讓文字區塊移動.
當然上例是需要垂直捲動. 我們也可建立水平捲軸, 用x軸值來驅動. 更可延伸到3D旋轉捲動, 加入expression到 3D圖層的rotation特性中.
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
我們之前使用螺旋紋建立簡單的Expression, 但是只能選擇畫面中存在的物件及其特性(屬性), 例如Comp的特性frameDuration就無法選擇,因為它不存在於畫面中.
什麼是物件
物件就是一個容器,裡面可裝其他物件與特性,以及函式.
例如Comp就是AE的一個物件, 裡面包含其他物件(圖層)或是Comp本身的特性,如duration(時間)或width(寬度)等. 在AE中有物件:Comp,layer...等,及特性:opacity,duration,width...等
全域物件(Global Object)與全域特性(Global Atttribute)
不需定義,直接取用
什麼是物件
物件就是一個容器,裡面可裝其他物件與特性,以及函式.
例如Comp就是AE的一個物件, 裡面包含其他物件(圖層)或是Comp本身的特性,如duration(時間)或width(寬度)等. 在AE中有物件:Comp,layer...等,及特性:opacity,duration,width...等
全域物件(Global Object)與全域特性(Global Atttribute)
不需定義,直接取用
| 全域物件與屬性 | 物件種類 |
| thisLayer | 燈光,影像,聲音 或 攝影幾等物件 |
| thisComp | Comp 物件 |
| comp("name") | Comp 物件 |
| footage("name") | Footage 物件 |
| time | Number 屬性 |
| value | Number 屬性 |
舉 thisComp 為例:
thisComp.layer("Solid 1") 可以取得目前Comp裏面,名為"Solid 1"的layer.
還可接著往下取得特性, 例如layer圖層的rotation.
thisComp是全域物件,layer("Solid 1")是裡面的一個layer,此expression取得該layer的rotation特性.
可用拉螺旋紋到Solid 1的rotation, AE直接填入expression.
用螺旋紋時要小心,expression的欄位游標要放對, 或是被取代的字串也要選對. 底下是layer的常用特性;
預設物件
如 thisLayer, 你可以不需寫 thisLayer.opacity, 直接寫 opacity, AE會自動參考用這個 opacity 的 layer.
但若要存取其他 layer 的 opacity . 必須加上其他 layer名稱及 thisComp, 也就是用螺旋紋直接連.
方法(Method,中文或稱函式)與特性(Attributes)
以 opacity的valueAtTime 為例
還可接著往下取得特性, 例如layer圖層的rotation.
thisComp.layer("Solid 1").rotation
thisComp是全域物件,layer("Solid 1")是裡面的一個layer,此expression取得該layer的rotation特性.
可用拉螺旋紋到Solid 1的rotation, AE直接填入expression.
有transform是正規寫法,但也可忽略
用螺旋紋時要小心,expression的欄位游標要放對, 或是被取代的字串也要選對. 底下是layer的常用特性;
| 圖層特性與函式 | 值的類型 | 維度 | 單位 |
| width 寬度 | Number | 1 | pixels |
| height 高度 | Number | 1 | pixels |
| startTime 圖層開始播放時間 | Number | 1 | seconds |
| inPoint 圖層啟用時間 | Number | 1 | seconds |
| outPoint 圖層失效時間 | Number | 1 | seconds |
| hasVideo 是否有影像 | Boolean | 1 | Boolean |
| hasAudio 是否有聲音 | Boolean | 1 | Boolean |
| active 是否顯示 | Boolean | 1 | Boolean |
| audioActive 聲音是否開啟 | Boolean | 1 | Boolean |
| audioLevels 聲音層數 | Property | 2 [left, right] | decibels |
| index 圖層索引值(第幾層) | Number | 1 | Number |
| parent 父物件 | Layer, Light or Camera | ||
| source 來源(指向poject面板) | Comp or Footage | ||
| mask(index or name) 遮罩 | Mask | ||
| effect(index or name) 特效 | Effect |
存取圖層特性的小例子
預設物件
如 thisLayer, 你可以不需寫 thisLayer.opacity, 直接寫 opacity, AE會自動參考用這個 opacity 的 layer.
但若要存取其他 layer 的 opacity . 必須加上其他 layer名稱及 thisComp, 也就是用螺旋紋直接連.
方法(Method,中文或稱函式)與特性(Attributes)
- 方法(Method) : 是一組內部運算,最後得到值, 如 valueAtTime(time);
有括弧的都是"方法" - 特性 : 就是一個值, 如 width, opacity...
以 opacity的valueAtTime 為例
thisComp.layer("Shape Layer 1").opacity.valueAtTime(time)
time 是全域特性, 是時間軸的所指的時間, 以秒為單位, time作為輸入參數, 用來取得Shape Layer 1圖層的opacity 在 5秒5 的值, 如圖是52.01... , 並將此值以字串顯示在工作視窗.
