After Effects: モジュロ演算子 (%)

After Effects エクスプレッションのモジュロ演算子 (%) について詳しく説明します

剰余演算子としても知られるモジュロ演算子 (%) は、式の作成に非常に便利なツールですが、初心者にとっては理解するのが簡単ではないかもしれません。この記事ではその機能と使い方について説明します。

% は、方程式の剰余を計算するために使用されます。例:

<code>10 % 3</code>

10 を 3 で割った商は 3、余り は 1 であるため、この式は 1 を返します。

これは、時間変数を操作するときにループを作成する場合に便利です。

ループ式

After Effects 式を初めて使用するほとんどのデザイナーは、loopOut() 式に精通しています。これにより、「サイクル」（開始から終了までのサイクル）、「ピンポン」（開始から終了、開始に戻るサイクル）、「オフセット」（キーフレームを繰り返しますが、毎回 のオフセットを使用します）を使用できます。 > 値を使用してアニメーションを構築する)、または「続行」(最後のキーフレームの速度を使用してモーションを継続する) を選択して、キーフレームのプロパティを循環します。これは非常に包括的で、キーフレーム アニメーションに必要なすべてをカバーしています。

ただし、

式をループしたい場合、loopOut は実行可能な解決策ではありません。キーフレームを使用したくない理由はたくさんありますが、主な理由は、値を動的かつ継続的に更新する必要がある場合です。一連のキーフレームを更新するよりも、スライダーにアタッチされたエクスプレッションを更新する方がはるかに簡単です。

モーションが連続的な場合は、Linear または Ease で十分です。ただし、ループを必要とする複雑なアニメーションの場合は、時間モジュロ演算子を使用してループを実装できます。

これがどのように機能するかを確認するには、次の式をコピーしてテキスト レイヤーのソース テキスト プロパティに貼り付けます:

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

レイヤー数が 1 秒ごとに 0 から 4 まで表示され、5 秒ごとに 0 に戻ります。これは、式の残りの部分が時間の経過とともに毎秒変化するためです。

Math.floor 関数は、引数を整数に丸めます。

これから、特定のパラメータ間の数値をアニメーション化する必要がある場合の使用方法が簡単にわかります。

例: デジタル時計

%を使ってデジタル時計を作ってみましょう。

秒は 0 ～ 60 の間でカウントする必要があり、分は 60 間隔ごとに増加する必要があります。これをテキスト レイヤーのソース テキスト プロパティに再度貼り付けてみましょう:

<code>10 % 3</code>

式を分解すると、sec 変数は 0 から 60 までカウントされ、min 変数は 60 の倍数ごとに増加します (ここでも数値を四捨五入するために Math.floor を使用します)。続く if ステートメントは、秒変数が 10 未満の場合にその前に 0 を追加し、秒変数が常に 2 桁になるようにします (必要に応じて、これを分についても繰り返すことができます)。次に、時刻区切り文字を使用してそれらを結合します。

カウンターを時間とは独立して動作させる必要がある場合は、時間をスライダーに置き換えてその値を設定することで、同じ効果を得ることができます。

モジュロ演算子と After Effects テキスト式セレクターを使用して、時間区切り文字を点滅させることもできます。

テキスト レイヤーに移動し、不透明度アニメーション オプションをテキスト レイヤーに追加します (これを行う方法がわからない場合は、この記事で詳細を確認できます)。次に、式セレクターを追加し、範囲セレクターを削除します。

アニメーターの不透明度を 0 に設定し、次の式を Amount プロパティに追加します:

//デジタルクロックセパレータが点滅します //式セレクターに追加

分 = Math.floor(時間 / 60);

分 = 10 && textIndex == 3 ? Math.floor(時間2 % 1.5) 100 : 0;

分変数の桁数が固定されていないことを踏まえて条件文を書きました。まず、ソース テキスト プロパティから minutes 変数をコピーします。次に、これを使用して時間区切り文字の textIndex 値を計算します。分表示が 1 桁の場合は 2 になります。分表示が10を超えると3になります。以下に示すように、条件ステートメントを if ステートメントとして記述して、その内容をさらに説明することもできます。

if (分 = 10 && textIndex == 3) Math.floor(時間

2 % 1.5) 100 それ以外の場合は 0

分が 10 未満で、textIndex が 2 に等しい場合、Math.floor(time

2 % 1.5) 100 はテキスト レイヤーの 2 番目の文字に影響します。これにより、モジュロ演算子のおかげで文字が点滅します (オン/オフ比 2:1)。 Math.floor 関数は数値を四捨五入し、最終的に式全体に 100 を乗算して、式セレクターの範囲である 0 と 100 の間で切り替えます。

ただし、分が 10 以上で、textIndex が 3 の場合、効果はテキスト レイヤーの 3 番目の文字に適用されます。これは分表示の余分な桁について説明しています。分の表示を 99 より長くする必要がある場合は、別のパラメーターを追加して、時間区切り記号が 4 番目の位置にあるときの表示に影響を与える必要があります。

ただし、分表示が一定の桁数に設定されている場合、このステートメントははるかに単純になります。

dividerIndex = 3; textIndex == ディバイダーインデックス ? Math.floor(time2 % 1.5) 100 : 0

それで、デジタル時計を手に入れました!

モジュロ演算子がループの作成にどのように役立つかを示した後、それを他のプロパティにどのように適用できるかを検討できます。

例: アナログ時計

それではアナログ時計を作ってみましょう。ポインタがカチカチと動くとき、それは通常、継続的な動きではなく、突然停止したり、突然始まったりします。これは、モジュロ演算子が解決に役立つタイプのループです。

時計の針レイヤーの回転プロパティに貼り付けることができる次の式を見てみましょう:

//秒針が回転します フレーム = thisComp.frameDuration;

ループ時間 = 1; dur = フレーム * 6; 強さ = 6;

カウンター = Math.floor(time/loopTime); t = 時間 % ループ時間;

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

まず、いくつかの変数を設定します。フレームはコンポジション内のフレームの継続時間であり、複数のフレーム レートで動作することができます。

loopTime をループしたい時間に設定します。ループを 1 秒継続したいので、1 に設定します。 dur はループ内のアニメーションの長さなので、フレーム * 6 に設定して、6 フレーム続くようにします。強度はアニメーション値の変化です。時計の針をアニメーション化しているので、時計の針が 60 ティックで 1 回転するように 6 に設定しました。

次に、値をオフセットするのに役立つカウンター変数を作成します。 Math.floor(time/loopTime) を使用して作成し、Math.floor を使用して数値を四捨五入し、ループに一致するようにカウンターの速度を設定しました。最後に、 t は、エクスプレッション駆動のアニメーションの時間を測定するために使用できる変数です。これは時間 % ループタイムなので、時間がループタイムに格納されている数値に達すると、時間がループします。

その後、アニメーションを作成できます。この例では、ease 式を使用します。最初のパラメータを t に設定することで、回転値をループ時間変数に再マップします。次の 2 つのパラメータは 0 と dur で、アニメーションの開始点と終了点です。最後の 2 つのパラメーターは、Strength カウンターとStrength (カウンター 1) で、これは回転プロパティの値です。強度とカウンターを乗算することで、各ループの値をオフセットし、強度 * (カウンター 1) で終了し、次のループに備えることができます。

この場合、キーフレームではなくエクスプレッションを使用してモーションを駆動する利点は、時間の変化に合わせて時計テンプレートを構築する必要がある場合です。式の静的な値をスライダーに接続できるため、継続的な更新が容易になります。

より高度な式を使用したり、独自の関数を構築して、よりカスタマイズされたアニメーションを作成したりできます:

//秒針が回転します フレーム = thisComp.frameDuration;

ループ時間 = 1; dur = フレーム * 6; 変更 = 6;

カウンター = Math.floor(time/loopTime); t = 時間 % ループ時間;

関数easeInOutBack (t, b, c, d, s) { if (s == 未定義) 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 ステートメントを使用して分針 (場合によっては時針) アニメーションの最初の繰り返しをスキップできます。

//分針の回転 フレーム = thisComp.frameDuration;

ループ時間 = 60; dur = フレーム * 6; 強さ = 6; startValue = 180;

カウンター = Math.floor(time/loopTime); t = 時間 % ループ時間;

関数easeInOutBack (t, b, c, d, s) { if (s == 未定義) 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 (カウンター > 0) { easeInOutBack(t, startValue 強度 * カウンタ, 強度, 期間, 1.70158) } それ以外 { 開始値 }

ここからは、スライダーを startValue 変数に接続するだけです。このようにして、スライダーの値を変更するだけで更新できるアナログ時計が得られます。

結論

モジュロ演算子は、他の方法がプロジェクトのニーズに適していない場合に、動的表現を支援するループを作成する場合に便利です。

独自のプロジェクトでテストしてみてください。

何かコメントはありますか？何か不明な点はありますか？以下にコメントを残してください。

以上がAfter Effects: モジュロ演算子 (%)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。