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

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

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

<code>10 % 3</code>

此表達(dá)式傳回 1，因為 10 除以 3 商數(shù)為 3，餘數(shù)為 1。

在處理時間變數(shù)時，這對於建立循環(huán)非常有用。

循環(huán)表達(dá)式

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

但是，如果要循環(huán)一個表達(dá)式，loopOut 就不是一個可行的解?？赡苡泻芏嘣虿幌胧褂藐P(guān)鍵幀，但主要原因是如果一個值需要動態(tài)更新，並且不斷更新。更新附加到滑桿的表達(dá)式比更新一組關(guān)鍵影格要容易得多。

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

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

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

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

Math.floor 函數(shù)將參數(shù)舍入為整數(shù)。

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

範(fàn)例：數(shù)字時鐘

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

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

<code>10 % 3</code>

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

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

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

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

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

//數(shù)位時鐘分隔符號閃爍 //加入表達(dá)式選擇器

minute = Math.floor(time / 60);

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

我寫了一個條件語句，基於分鐘變數(shù)中的位數(shù)不固定。首先，我從來源文字屬性複製分鐘變數(shù)。然後，我用它來計算時間分隔符號的 textIndex 值。當(dāng)分鐘顯示中只有一位數(shù)字時，它將等於 2。當(dāng)分鐘顯示超過 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 會影響文字圖層中的第二個字元。這將使字母閃爍（開/關(guān)比例為 2:1），這要歸功於取模運算子。 Math.floor 函數(shù)舍入數(shù)字，而整個表達(dá)式最後乘以 100 以在 0 和 100 之間切換，這是表達(dá)式選擇器的範(fàn)圍。

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

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

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

就這樣，你得到了一個數(shù)字時鐘！

在顯示取模運算子如何幫助建??立循環(huán)之後，我們現(xiàn)在可以考慮如何將其應(yīng)用於其他屬性。

範(fàn)例：模擬時鐘

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

讓我們來看看可以貼上到時鐘指標(biāo)圖層旋轉(zhuǎn)屬性中的以下表達(dá)式：

//秒針旋轉(zhuǎn) 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))

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

將 loopTime 設(shè)定為您想要循環(huán)的時間。我希望循環(huán)持續(xù)一秒鐘，所以我將其設(shè)為 1。 dur 是循環(huán)內(nèi)動畫的持續(xù)時間，所以我將其設(shè)為 frames * 6，使其持續(xù) 6 幀。 strength 是動畫值的改變，因為我正在設(shè)定時鐘指標(biāo)動畫，所以我將其設(shè)為 6，因此時鐘指針將在 60 次滴答聲中完成一次旋轉(zhuǎn)。

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

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

在這種情況下，透過表達(dá)式而不是關(guān)鍵影格來驅(qū)動運動的優(yōu)點是，如果您需要為不斷變化的時間建立時鐘模板。表達(dá)式的靜態(tài)值可以連接到滑桿，從而更容易不斷更新。

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

//秒針旋轉(zhuǎn) 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)

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

//分針旋轉(zhuǎn) 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 變數(shù)即可。這樣，您就擁有了一個可以透過簡單更改滑桿中的值來更新的類比時鐘。

結(jié)論

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

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

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

以上是After Effects：模運算子 (%)的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！