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

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

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

<code>10 % 3</code>

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

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

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

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

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

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

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

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

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

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

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

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

秒數(shù)需要在 0 到 60 之間計(jì)數(shù)，而分鐘需要在每 60 個(gè)間隔遞增。讓我們?cè)俅螌⒋速N到文字圖層的「原始文字」屬性中：

<code>10 % 3</code>

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

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

您也可以使用取模運(yùn)算子和 After Effects 文字運(yùn)算式選擇器來讓時(shí)間分隔符號(hào)閃爍。

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

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

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

minute = Math.floor(time / 60);

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

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

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

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

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

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

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

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

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

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

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

讓我們來看看可以貼上到時(shí)鐘指標(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))

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

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

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

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

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

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

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

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

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

結(jié)論

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

嘗試在您自己的專案中測(cè)試它！

有任何意見？有什麼不清楚的地方？請(qǐng)?jiān)谙路搅粞浴?

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