After Effects：模運算子 (%)

深入淺出After Effects表達式中的取模運算子(%)

取模運算子（%），也稱為餘數運算符，是表達式建構中一個非常有用的工具，但初學者可能不太容易理解。本文將解釋其功能和用途。

% 用來計算一個等式的餘數。例如：

<code>10 % 3</code>

此表達式傳回 1，因為 10 除以 3 商數為 3，餘數為 1。

在處理時間變數時，這對於建立循環非常有用。

循環表達式

大多數剛接觸 After Effects 表達式的設計師都熟悉 loopOut() 表達式。它允許我們使用"cycle"（從開始循環到結束）、"pingpong"（從開始到結束再反向回到開始）、"offset"（重複關鍵幀但每次偏移值以建立動畫）或"continue"（使用最後一個關鍵影格的速度來繼續運動）來循環關鍵影格屬性。這非常全面，涵蓋了關鍵影格動畫所需的一切。

但是，如果要循環一個表達式，loopOut 就不是一個可行的解。可能有很多原因不想使用關鍵幀，但主要原因是如果一個值需要動態更新，並且不斷更新。更新附加到滑桿的表達式比更新一組關鍵影格要容易得多。

如果運動是連續的，那麼 Linear 或 Ease 就足夠了。但對於需要循環的複雜動畫，我們可以使用時間對取模運算子來實現這個迴圈。

要了解其工作原理，請將以下表達式複製並貼上到文字圖層的「來源文字」屬性中：

<code>Math.floor(time % 5)</code>

您將看到圖層每秒計數從 0 到 4，每隔 5 秒循環回 0。這是因為隨著時間的推移，表達式的餘數會每秒改變：

随时间变化的余数

1 % 5 = 1

2 % 5 = 2

3 % 5 = 3

4 % 5 = 4

5 % 5 = 0

Math.floor 函數將參數舍入為整數。

由此，很容易看出如何在需要在特定參數之間設定動畫數字時使用它。

範例：數字時鐘

讓我們使用 % 來製作一個數位時鐘。

秒數需要在 0 到 60 之間計數，而分鐘需要在每 60 個間隔遞增。讓我們再次將此貼到文字圖層的「原始文字」屬性中：

<code>10 % 3</code>

分解表達式，我們的 sec 變數將從 0 到 60 計數，而 minute 變數將在每 60 的倍數時遞增（同樣，我們使用 Math.floor 來舍入數字）。其後的 if 語句在 sec 變數小於 10 時在其前面加上一個 0，確保我們的秒變數始終具有兩位數字（如果需要，也可以對分鐘重複此動作）。然後，只需使用時間分隔符號將其組合在一起即可。

如果您需要計數器獨立於時間工作，可以透過將時間替換為滑桿並設定其值來實現相同的效果。

您也可以使用取模運算子和 After Effects 文字運算式選擇器來讓時間分隔符號閃爍。

前往文字圖層，並為文字圖層新增不透明度動畫選項（如果您不確定如何操作，可以查看本文中關於此的所有內容）。然後新增表達式選擇器，並刪除範圍選擇器。

將動畫器中的不透明度設為 0，然後將此表達式新增至「數量」屬性：

//數位時鐘分隔符號閃爍 //加入表達式選擇器

minute = Math.floor(time / 60);

minute = 10 && textIndex == 3 ? Math.floor(time2 % 1.5) 100 : 0;

我寫了一個條件語句，基於分鐘變數中的位數不固定。首先，我從來源文字屬性複製分鐘變數。然後，我用它來計算時間分隔符號的 textIndex 值。當分鐘顯示中只有一位數字時，它將等於 2。當分鐘顯示超過 10 時，它將為 3。條件語句也可以寫成 if 語句，如下所示，以進一步解釋它在做什麼：

if (minute = 10 && textIndex == 3) Math.floor(time2 % 1.5) 100 else 0

如果分鐘小於 10 且 textIndex 等於 2，則 Math.floor(time2 % 1.5) 100 會影響文字圖層中的第二個字元。這將使字母閃爍（開/關比例為 2:1），這要歸功於取模運算子。 Math.floor 函數舍入數字，而整個表達式最後乘以 100 以在 0 和 100 之間切換，這是表達式選擇器的範圍。

但是，如果分鐘等於或大於 10 且 textIndex 等於 3，則該效果將應用於文字圖層中的第三個字元。這解釋了分鐘顯示中的額外數字。如果您的分鐘顯示需要超過 99，則需要新增另一個參數來影響時間分隔符號在第四個位置時的顯示。

但是，如果您的分鐘顯示設定為恆定的位數，則該語句將變得簡單得多：

dividerIndex = 3; textIndex == dividerIndex ? Math.floor(time2 % 1.5) 100 : 0

就這樣，你得到了一個數字時鐘！

在顯示取模運算子如何幫助建​​立循環之後，我們現在可以考慮如何將其應用於其他屬性。

範例：模擬時鐘

現在讓我們來做一個類比時鐘。當指針滴答作響時，它通常不是一個連續的運動，而是一個突然停止和啟動的運動。這就是取模運算子可以幫助解決的循環類型。

讓我們來看看可以貼上到時鐘指標圖層旋轉屬性中的以下表達式：

//秒針旋轉 frames = thisComp.frameDuration;

loopTime = 1; dur = frames * 6; strength = 6;

counter = Math.floor(time/loopTime); t = time % loopTime;

ease(t, 0, dur, strength counter, strength (counter 1))

首先，我們設定一些變數。 frames 是合成中一幀的持續時間，使其能夠跨多個幀速率工作。

將 loopTime 設定為您想要循環的時間。我希望循環持續一秒鐘，所以我將其設為 1。 dur 是循環內動畫的持續時間，所以我將其設為 frames * 6，使其持續 6 幀。 strength 是動畫值的改變，因為我正在設定時鐘指標動畫，所以我將其設為 6，因此時鐘指針將在 60 次滴答聲中完成一次旋轉。

接下來，我建立一個 counter 變量，它將幫助偏移我的值。我使用 Math.floor(time/loopTime) 創建它，使用 Math.floor 舍入數字並將計數器的速度設定為與循環匹配。最後，t 是我們可以用來為表達式驅動的動畫計時的一個變數。這是 time % loopTime，因此當時間達到 loopTime 中儲存的數字時，時間就會循環。

之後，我們可以製作動畫。在此範例中，我使用 ease 表達式。透過將第一個參數設為 t，我們將旋轉值重新映射到我們的循環時間變數。接下來的兩個參數是 0 和 dur，即動畫的起點和終點。最後兩個參數是 strength counter 和 strength (counter 1)，也就是旋轉屬性的值。將 strength 乘以 counter，我們可以偏移每個迴圈的值，在 strength * (counter 1) 結束，準備下一個迴圈。

在這種情況下，透過表達式而不是關鍵影格來驅動運動的優點是，如果您需要為不斷變化的時間建立時鐘模板。表達式的靜態值可以連接到滑桿，從而更容易不斷更新。

您可以使用更高級的表達式或建立自己的函數來製作更客製化的動畫：

//秒針旋轉 frames = thisComp.frameDuration;

loopTime = 1; dur = frames * 6; change = 6;

counter = Math.floor(time/loopTime); t = time % loopTime;

function easeInOutBack (t, b, c, d, s) { if (s == undefined) s = 1.70158; if ((t/=d/2) (tt(((s=(1.525)) 1)t - s) ) b; return c/2((t-=2)t(((s=(1.525)) 1)t s) 2) b; }

easeInOutBack(t, 0, change, dur, 1.70158)

最後，您可以建立一個變數來設定起始值，並使用 if 語句跳過分針（可能還有時針）動畫的第一次迭代：

//分針旋轉 frames = thisComp.frameDuration;

loopTime = 60; dur = frames * 6; strength = 6; startValue = 180;

counter = Math.floor(time/loopTime); t = time % loopTime;

function easeInOutBack (t, b, c, d, s) { if (s == undefined) s = 1.70158; if ((t/=d/2) (tt(((s=(1.525)) 1)t - s) ) b; return c/2((t-=2)t(((s=(1.525)) 1)t s) 2) b; }

if (counter > 0) { easeInOutBack(t, startValue strength * counter, strength, dur, 1.70158) } else { startValue }

從這裡開始，只需將滑桿連接到我們的 startValue 變數即可。這樣，您就擁有了一個可以透過簡單更改滑桿中的值來更新的類比時鐘。

結論

取模運算子對於建立循環以輔助動態表達式非常有用，而其他方法不適合項目的需要。

嘗試在您自己的專案中測試它！

有任何意見？有什麼不清楚的地方？請在下方留言。

以上是After Effects：模運算子 (%)的詳細內容。更多資訊請關注PHP中文網其他相關文章！