2011年11月14日

[MAD View][深入談論][H04] 從零開始學習表達式 (上篇)

作者-fseerlef  /  雜誌網址-HsMaD,SKMAD,FLMAD

“叢林開始血洗運算式”
這篇文章是我N多年前的時候由於一時心血來潮而寫的。不過MS一直沒有在網上發佈過。這次受流星回天君邀請,借此機會填完次坑 (´ ∀  `)ノ 不出意外的話應該會分成上中下篇發佈。

前言
運算式是個什麼東西我也說不清楚。
但在那些想要稱霸MAD界的人中,卻幾乎沒有人不知道它的存在。
也許你想說,我根本不會javascript學個毛啊
也許你想說,我只會alt+碼錶和拖豬尾巴足夠用了
也許你想說,寫這一篇文章的人就是一傻叉

口胡結束,言規正傳,下面我就帶大家一起叢林開始血洗運算式(從零開始學習運算式),準備好了嗎?
其實也沒啥要準備的,只要打開你的AE就行了。雖然AE的運算式採用的語法和javascript很相似,但沒有javascript的基礎也照樣可以學。

第一章. 基本知識

1. 什麼是運算式?
按照我的理解,AE運算式就是以數值運算的形式來對AE進行準確的輔助控制。運算式的主要作用有控制數值的變化規律以及建立數值與數值之間的聯繫。運算式可以短到只有一個字元,也可以長到寫上幾十行。總之,學上一點我覺得肯定是只有好處沒有壞處的。當然,有些地方可以通過更簡單的手段實現的話,也沒必要非得用上運算式。比如合成嵌套,親子關係等也可以起到建立聯繫的作用。

2.初識運算式
如果你之前沒有接觸過運算式,或許會對“運算式”這一概念比較迷惑。到底運算式是什麼樣子的啊?首先,剛才也提到,運算式是用來控制數值的。也就是說,在AE中,運算式並不是像特效一樣直接建立在某一合成或某一圖層上,而是建立在某一圖層的某一屬性值上(包括特效中的屬性值)。
舉個例子來說,比如我們先建立一個新固態層,我們來給這個固態層的不透明度添加一條運算式。添加運算式的方法一般來說有兩種,其中一種是選中某數值後依次點擊上方功能表中的Animation(動畫),Add expression(添加運算式)。另一種方式是按住Alt鍵不放並用滑鼠點擊屬性值前的碼錶按鈕,這樣也可以進入編輯運算式的狀態。在編輯狀態中預覽畫面會被自動遮罩,在空白處點擊滑鼠左鍵就可以恢復預覽了。現在應該能看到transform.opacity這樣一條語句出現在右邊吧(如下圖)。




這條語句實際上就是一條運算式,但是這條默認語句目前並沒有給這個屬性下達任何的控制指令。我們來將它修改一下。選中運算式,將其修改為20+30,然後滑鼠點擊空白區域退出運算式的編輯模式。我們可以看到固態層的不透明度變成了50。而且,現在如果我們嘗試用普通的方法去修改這一屬性值,會發現這樣的修改是無效的。這就說明有運算式在的情況下,屬性值會優先服從運算式的控制,這一點特性在利用運算式建立值與值之間的關聯時是很有用的。














3.基本運算子
這些都是在建立運算式中最常用的運算子,看一遍有個印象就行了。和絕大部分程式設計語言相同的是,這些運算子不但可以用於常量,也可以用於變數。

+ 小學學過了,沒啥好說的
- 同上
* 同上
/ 同上
= 賦值,注意區別於下面的算術等號
== 算術等號,用於算數運算
< 小於 > 大於
<= 小於等於 >= 大於等於

這些運算子號的具體應用在這裡先不作探討,其他的常用符號也會在後面的教程中逐個說明。

第二章.基礎實例
與網上的其他一些教程不同,我比較傾向於在具體的例子中講解,這樣可能比較容易理解吧,例子是循序漸進的,大多用的是靜止系MAD中常見的效果。

1.連結X運算X 向量
相信大家對下面這張圖片都不陌生,capchi大大家喻戶曉啊,我們來用運算式完成紅色方框與藍色方框相反方向運動的過程


如圖在AE中建立新工程,先建立紅色方框的合成。方框的製作很簡單,用文字工具,打個“口”字,然後複製一下,連續換行+粘貼,字體幼圓,搞定。複製一份做藍色的,字體調小一點,排列成圖中的樣子。



為了準備一些前置知識,我們先來做一個兩種不同顏色的方框向相反方向轉動的效果。
由於要建立運動聯繫,可能有的人首先想到建立親子關係,但試一下你會發現,這樣只能使兩個方框向相同方向轉動



於是我們的主角運算式就要登場了,我們打開藍色方框的旋轉屬性,按著alt鍵點擊碼錶就會打開運算式的視窗,我們會在介面上看到一個類似建立親子關係時用的繩子的圖示,按著不放,將它拖至紅色方框的旋轉屬性上後鬆開,如圖


這時我們會發現在右側的運算式視窗中,出現了這樣一排文字:
thisComp.layer(“紅色方框redframes”).transform.rotation
我們將它拆分開理解:
thisComp // 指定合成,thisComp說明連結指向本合成
layer(“紅色方框redframes”) //指定層,在名稱上要表上半形雙引號,如果指向本層可以直接打thisLayer
transform //指定屬性,基本狀態屬性
rotation //指定基本狀態屬性中的旋轉值

尤其要注意的是,其中的遞進關係並不是用空格或者斜杠來,而是用半形 . 號來表示。
於是,這樣的一句運算式的意思是:
藍色方框的旋轉屬性由本合成中名叫“紅色方框redframes”的層的旋轉屬性來決定。

如果我們現在改變紅色方框的旋轉值,會發現藍色方框也會跟著轉,但是方向仍然是一致於
是我們在原來的運算式上作一點小改動,在最後加一個 *(-1),如圖




我們看到效果已經實現了。我們剛才看到的那行運算式其實代表的仍舊是一個數值,所以可
以進行任何的數學運算。現在,藍色方框的旋轉屬性值永遠等於紅色方框的旋轉屬性值的負數。於是,兩種顏色的方框的旋轉方向永遠是相反的,而且旋轉的角度的大小是相同的。
看懂了麼?看懂這個例子之後,我們就來做相反方向的位移運動。
這次我們的目標是位置屬性值。用剛才的思路進行連結,並在運算式尾部添上 *(-1)之後,發現變成了這個樣子:



藍色方框跑出了螢幕 - -!這是由於位置是向量數值,和旋轉屬性的單一數值資訊並不相同。
預設情況下,位置屬性值的x座標和y座標都會進行連結,在*(-1)之後,不但兩個圖層的y軸座標值互成負數,而且x軸座標值也會互成負數。但是這和我們所要的效果是有出入的。如果想要兩圖層的x軸座標互不影響,但是y軸座標值互成負數又應該怎麼做呢?
這裡首先要牽扯到向量的知識。
我們都知道位置座標有x軸座標和y軸座標構成,當然如果是3維的話還有z軸座標
假設我們有一個座標[a,b,c]
我們發現一個座標就擁有三個數值資訊,我們來用運算式分別表示一下:
a = position[0] b=position[1] c=position[2]
這樣一組 [a,b,c]就構成了一個向量,注意要用方括號表示,中間用逗號隔開。
所以在 *(-1)的時候,AE默認將向量的每個值都乘以-1了,所以x軸座標就瞬間變負的
了。要得到正確的結果,我們應該這樣修改運算式:



圖片上的運算式是:[position[0], thisComp.layer("紅色方框redframes").transform.position[1]*(-1)]
Position[0]表示x軸數值保持原值不變,沒有合成和圖層的話默認表示本合成本層
逗號後面的文字表示y軸數值是紅色方框層中位置座標y軸的-1倍
現在再改變紅色方框的y軸座標大小,發現效果已經正常了。
下面要做的是比較神奇的一步,我們要使兩組方框移動,且整個運動過程不打一個關鍵楨。用到的就是AE運算式中的
一個重要的參數:時間變數Time。這個參數屬於ae內置
的參數,也就是不用另行賦值的。
在紅色方框的位置屬性裡寫一句這樣的運算式
[position[0],time-200]
Time變數的單位是秒,所以這句運算式的意思是,y軸座標隨時間的變化而變化,0秒時為
-200,1秒時為-199…..依此類推。但這樣的運動速度未免有點太慢了,所以我們讓時間過得
快10倍,將運算式修改為[position[0],time*10-200]
如圖



現在我們直接預覽就可以看到效果了,關鍵楨不用打了哦也。
這個例子我講的比較詳細,因為這些都是基本中的基本,後面的例子裡都會用到的,不會重
複講了。大家可以參照著圖多琢磨琢磨。

沒有留言:

張貼留言

這裡是留言欄