如何使用 Expressions 輕鬆製作倒數與碼錶效果！
在動畫設計中，時間顯示是一個非常實用的元素。無論是用在遊戲 UI、直播計時、教學影片、轉場節奏，甚至倒數活動頁，我們常常會需要畫面上出現「00:10」或「01:05:23」這樣的格式。
透過 After Effects 強大的 表達式（Expressions）功能，你可以直接在「文字圖層」中自動產生這些時間格式，省去手動編輯的麻煩！
⏳ 倒數表達式類型
- 純數字秒數倒數
startTime = 10; // 倒數秒數
remaining = Math.max(0, startTime - time);
Math.floor(remaining);
- 倒數格式：00:00（分：秒）
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);
- 倒數格式：00:00:00（時：分：秒）
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);
- 累加格式：00:00（分：秒）
t = Math.floor(time);
min = Math.floor(t / 60);
sec = t % 60;
(min < 10 ? "0" + min : min) + ":" +
(sec < 10 ? "0" + sec : sec);
- 累加格式：00:00:00（時：分：秒）
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);
- 顯示小秒數小數點後（例如 00:03.4）
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!";
}
表達式解析：
startTime = 6;
remaining = startTime - time;
- 設定倒數的起始時間（這裡是 6 秒），
- AE 中的 time 是目前時間（單位：秒）。
if (remaining > 0){
Math.floor(remaining);
}else{
"Time's up!";
}
- 如果
remaining > 0，顯示剩餘秒數（取整數）； - 否則，顯示提示字串：「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!";
}
以上這些表達式都是 直接貼入 Text Layer 的 Source Text 欄位 就能使用的，完全不需要額外插件或特效。透過簡單幾行程式碼，就可以讓畫面更有邏輯與節奏感，大幅提升動畫的專業度與便利性。
如果你想進一步把倒數和動畫結合，例如「倒數完變色」、「秒數到時觸發動作」或「計時器跟著鏡頭移動」，我也可以提供進階整合技巧！
原始文章:https://www.jan1lab.com/blog/time-display-expression
#AfterEffects #倒數計時器 #表達式教學 #時間顯示 #MotionGraphics #AE技巧 #AE實用公式
