7 種常用的AE時間顯示表達式

After Effects

May 26

Written By 1st january

如何使用 Expressions 輕鬆製作倒數與碼錶效果！
在動畫設計中，時間顯示是一個非常實用的元素。無論是用在遊戲 UI、直播計時、教學影片、轉場節奏，甚至倒數活動頁，我們常常會需要畫面上出現「00:10」或「01:05:23」這樣的格式。

透過 After Effects 強大的表達式（Expressions）功能，你可以直接在「文字圖層」中自動產生這些時間格式，省去手動編輯的麻煩！

⏳ 倒數表達式類型

startTime = 10; // 倒數秒數
remaining = Math.max(0, startTime - time);
Math.floor(remaining);

startTime = 90; // 倒數 1 分 30 秒
t = Math.max(0, startTime - time);
min = Math.floor(t / 60);
sec = Math.floor(t % 60);
(min < 10 ? "0" + min : min) + ":" + 
(sec < 10 ? "0" + sec : sec);

startTime = 3600; // 倒數一小時
t = Math.max(0, startTime - time);
hrs = Math.floor(t / 3600);
min = Math.floor((t % 3600) / 60);
sec = Math.floor(t % 60);
(hrs < 10 ? "0" + hrs : hrs) + ":" + 
(min < 10 ? "0" + min : min) + ":" + 
(sec < 10 ? "0" + sec : sec);

⏱ 累加（正向計時器）表達式類型

Math.floor(time);

t = Math.floor(time);
min = Math.floor(t / 60);
sec = t % 60;
(min < 10 ? "0" + min : min) + ":" + 
(sec < 10 ? "0" + sec : sec);

t = Math.floor(time);
hrs = Math.floor(t / 3600);
min = Math.floor((t % 3600) / 60);
sec = t % 60;
(hrs < 10 ? "0" + hrs : hrs) + ":" + 
(min < 10 ? "0" + min : min) + ":" + (sec < 10 ? "0" + sec : sec);

t = time;
min = Math.floor(t / 60);
sec = Math.floor(t % 60);
ms = Math.floor((t % 1) * 10);
(min < 10 ? "0" + min : min) + ":" + 
(sec < 10 ? "0" + sec : sec) + "." + ms;

🎯 小技巧 & 延伸應用

當時間倒數結束，就會顯示文字 "Time's up!"。

startTime = 6;//設定倒數的起始時間
remaining = startTime - time;//單位：秒

if (remaining > 0){
  Math.floor(remaining);
}else{
  "Time's up!";
}

如顯示「00:00」格式 + 倒數完提示

表達式解析：

startTime = 20;
t = startTime - time;

if (t > 0){
  min = Math.floor(t / 60);
  sec = Math.floor(t % 60);
  (min < 10 ? "0" + min : min) + ":" + 
  (sec < 10 ? "0" + sec : sec);
}else{
  "Time's up!";
}

startTime = 6;

remaining = startTime - time;

設定倒數的起始時間（這裡是 6 秒），
AE 中的 time 是目前時間（單位：秒）。

if (remaining > 0){

Math.floor(remaining);

}else{

"Time's up!";

}

如果 remaining > 0，顯示剩餘秒數（取整數）；
否則，顯示提示字串：「Time's up!」

以上這些表達式都是直接貼入 Text Layer 的 Source Text 欄位就能使用的，完全不需要額外插件或特效。透過簡單幾行程式碼，就可以讓畫面更有邏輯與節奏感，大幅提升動畫的專業度與便利性。

如果你想進一步把倒數和動畫結合，例如「倒數完變色」、「秒數到時觸發動作」或「計時器跟著鏡頭移動」，我也可以提供進階整合技巧！

如果文章對你有幫助，可以支持我並取得ＡＥ原始專案檔。

After EffectsTeaching

1st january