如何使用AE的時間表達式

Una Hu

6 min readFeb 24, 2020

原文出處 How to Use the Time Expression in After Effects，授權翻譯自 School of Motion。 (U:為了翻譯順暢，內文有稍作修改，但意思大致上是相同的噢!)

準備好要解鎖新技能了嗎 ? 讓我們來學學怎麼使用 AE 的時間表達式吧!

我最愛的其中一個表達式就是時間表達式，雖然你可能在想你早就知道怎麼用這個東西了，但它的使用方式比表面看起來還要多得多!

什麼是時間表達式 ?

我是那種喜歡書中有一大堆圖的人，所以我們就來用 GIF 開始這篇文章吧 !

時間表達式以秒為單位與 comp 的時間連動，你只要簡單地打出 " time;” 就可以寫出時間表達式

time;

這個表達式產生的數值可以透過連動其他屬性來產生動作。在上面的範例中，我讓文字圖層 ( Text layer )顯示出時間表達式產生的數值，當 comp 在播放時，你可以看到秒數隨著經過文字圖層增加，而我所做的就只是使用簡單的時間表達式讓 AE 產生那些數字：

time.toFixed(2);

筆記：toFixed()限制數值後的小數到第幾位數

時間表達式在 AE 中是如何運作的 ?

為了讓你比較好了解我在說些什麼，我希望你可以用一個新的方式看待時間，試著把它想像成不斷生成的數字，而不是正在流逝的時間，當你能夠把時間想成數字，你就能操作它，然後你就能比較懂這個表達式在幹麼了。

舉例來說，如果我將表達式乘以二，它就會用四秒的時間跑到八秒的位置。

time*2;

為了讓你更清楚明白，我要在旋轉屬性欄加上時間表達式，現在旋轉屬性會每秒轉一度

當 comp 的時間跑一秒，就會旋轉一度，但這舉例有點無聊，而且你可能看不太出來有什麼變化，讓我們把它加快一點點!

看看那條線轉得多快 ! 在第一個範例裡是每秒轉一度，所以如果我們希望它每秒可以轉一圈，我們必須先知道一圈有幾度，沒錯，就是360度

time*360;

我們藉由乘上 360 來告訴 AE 想要整個過程變得多快，現在它在一秒內走了1*360度。

超酷的時間表達式範例

現在你已經大致上了解時間表達式在幹麼了，接下來我就介紹一些可以運用在工作中的實用範例給你吧 !

旋轉多個圖層

這是一個不同速度的旋轉迴圈範例，想像一下如果你要旋轉一大堆齒輪，或是行星帶上那些又冷又重的石頭們。

我用了時間表達式，並將它們乘上不同的數字，分享一個我在上 Parker Young 表達式課學到的一個好用技巧，以旋轉來說，先將時間乘上360，也就是轉一整圈，接著再除上你希望轉一整圈需要的秒數，表達式會長這樣：

// One full rotation every 2 seconds
time*(360/2);

來個時間旅行吧 !

時間表達式其中一個好用的方式就是置到延遲動作，我們要求AE把時間往前或是延後，為了做到這點，容我向各位介紹一個新的表達式:valueAtTime();

這個範例我要求AE參照另個圖層的X位置，並且延遲0.5秒，神奇的是這段程式碼非常的簡單，只要使用 index 就可以不斷複製出會自動根據前一個圖層延遲的新圖層。

筆記: index (索引)表達式是根據圖層在時間軸上的順序做變化 (U:可以參考這個簡單的教學影片)

thisComp.layer(index+1).transform.xPosition.valueAtTime(time — .5)

這段表達式是不是讓你覺得有點困惑呢 ? 沒關係， Zack Lovatt 最喜歡把不同的部分拆解成普通好懂的語言了，以下是拆解後的 valueAtTime :

var halfASecond = 0.5;
var now = time;
var halfASecondAgo = now — halfASecond;
valueAtTime(halfASecondAgo);

簡言之，valueAtTime 這個表達式就是告訴 AE 每個屬性(scale,position,slider,等等)要增加多少數值。

撒錢吧 !

如果你想試些有趣的玩法，我這邊提供一個簡單的專案檔給你，裡面有個跟時間綁定的金錢計數表，我在裡面放了 slider control，這樣你就可以決定錢要增加得多快，如果你想知道我是怎麼在數字前面加上金錢的符號的話，在表達式的地方有註解。

(U:這段的小標原文是 Make it rain，直翻的話是「讓它下雨」，但它其實是指不斷朝空中撒錢下錢雨，像下面這個 MV 這樣XD)

是時候多學點啦 !

希望你已經發現時間表達式的厲害之處，而且實際上還有更多我在文章中沒提到的用法 ! 如果你想要學更多AE表達式的用法，School of Motion 有一堆很棒的內容可以參考，以下是一些我很喜歡的教學：

另外，如果你真的非～常想要學習動態設計，可以到我們的課程網頁看看，我們的客製化的課程設計可以讓你在動態設計上進步神速 ! 不論你是初學者還是進階的動態設計師，我們都有一系列的課程可以提供給您。在社群網站上Tag我們( #schoolofmotion)，分享你的表達式實驗經驗吧 ! 祝福你所有的動態設計專案都能順利完成 !

U : 以下是幫助文章有效進入腦中的神奇儀式，首先把滑鼠箭頭移到左側的手掌上，按下滑鼠左鍵不放，回想剛剛文章內最有印象的是什麼，等到手掌上的數字顯示 +50，恭喜你，完成了神奇記憶儀式，並附贈鼓勵作者繼續更新效果 (ﾟ∀ﾟ)