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

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

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

<code>10 % 3</code>

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

在處理時(shí)間變量時(shí)，這對(duì)于創(chuàng)建循環(huán)非常有用。

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

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

但是，如果要循環(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)的復(fù)雜動(dòng)畫(huà)，我們可以使用時(shí)間對(duì)取模運(yùn)算符來(lái)實(shí)現(xiàn)該循環(huán)。

要了解其工作原理，請(qǐng)將以下表達(dá)式復(fù)制并粘貼到文本圖層的“源文本”屬性中：

<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)畫(huà)數(shù)字時(shí)使用它。

示例：數(shù)字時(shí)鐘

讓我們使用 % 來(lái)制作一個(gè)數(shù)字時(shí)鐘。

秒數(shù)需要在 0 到 60 之間計(jì)數(shù)，而分鐘需要在每 60 個(gè)間隔遞增。讓我們?cè)俅螌⒋苏迟N到文本圖層的“源文本”屬性中：

<code>10 % 3</code>

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

如果您需要計(jì)數(shù)器獨(dú)立于時(shí)間工作，可以通過(guò)將時(shí)間替換為滑塊并設(shè)置其值來(lái)實(shí)現(xiàn)相同的效果。

您還可以使用取模運(yùn)算符和 After Effects 文本表達(dá)式選擇器使時(shí)間分隔符閃爍。

轉(zhuǎn)到文本圖層，并向文本圖層添加不透明度動(dòng)畫(huà)選項(xiàng)（如果您不確定如何操作，可以查看本文中關(guān)于此的所有內(nèi)容）。然后添加表達(dá)式選擇器，并刪除范圍選擇器。

將動(dòng)畫(huà)器中的不透明度設(shè)置為 0，然后將此表達(dá)式添加到“數(shù)量”屬性：

//數(shù)字時(shí)鐘分隔符閃爍 //添加到表達(dá)式選擇器

minute = Math.floor(time / 60);

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

我編寫(xiě)了一個(gè)條件語(yǔ)句，基于分鐘變量中的位數(shù)不固定。首先，我從源文本屬性復(fù)制分鐘變量。然后，我用它來(lái)計(jì)算時(shí)間分隔符的 textIndex 值。當(dāng)分鐘顯示中只有一位數(shù)字時(shí)，它將等于 2。當(dāng)分鐘顯示超過(guò) 10 時(shí)，它將為 3。條件語(yǔ)句也可以寫(xiě)成 if 語(yǔ)句，如下所示，以進(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è)字符。這將使字母閃爍（開(kāi)/關(guān)比例為 2:1），這要?dú)w功于取模運(yùn)算符。Math.floor 函數(shù)舍入數(shù)字，而整個(gè)表達(dá)式最后乘以 100 以在 0 和 100 之間切換，這是表達(dá)式選擇器的范圍。

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

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

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

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

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

示例：模擬時(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)類(lèi)型。

讓我們來(lái)看一下可以粘貼到時(shí)鐘指針圖層旋轉(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è)置一些變量。frames 是合成中一幀的持續(xù)時(shí)間，使其能夠跨多個(gè)幀速率工作。

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

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

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

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

您可以使用更高級(jí)的表達(dá)式或構(gòu)建自己的函數(shù)來(lái)制作更定制的動(dòng)畫(huà)：

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

最后，您可以創(chuàng)建一個(gè)變量來(lái)設(shè)置起始值，并使用 if 語(yǔ)句跳過(guò)分針（可能還有時(shí)針）動(dòng)畫(huà)的第一次迭代：

//分針旋轉(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) < 1) return c/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 }

從這里開(kāi)始，只需將滑塊連接到我們的 startValue 變量即可。這樣，您就擁有了一個(gè)可以通過(guò)簡(jiǎn)單更改滑塊中的值來(lái)更新的模擬時(shí)鐘。

結(jié)論

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

嘗試在您自己的項(xiàng)目中測(cè)試它！

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

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