After Effects: The Modulo Operator (%)

In-depth explanation of the modulo operator (%) in After Effects expressions

The modulo operator (%), also known as the remainder operator, is a very useful tool in expression construction, but it may not be easy for beginners to understand. This article explains its functionality and uses.

% is used to calculate the remainder of an equation. For example:

<code>10 % 3</code>

This expression returns 1 because the quotient of 10 divided by 3 is 3, the remainder is 1.

This is useful for creating loops when working with time variables.

Loop expression

Most designers new to After Effects expressions are familiar with the loopOut() expression. It allows us to use "cycle" (cycle from start to end), "pingpong" (cycle from start to end and back to the start), "offset" (repeat keyframes but each time with a offset of value to build the animation) or "continue" (to continue the motion using the speed of the last keyframe) to cycle through keyframe properties. This is very comprehensive and covers everything you need for keyframe animation.

However, if you want to loop an expression, loopOut is not a viable solution. There may be many reasons for not wanting to use keyframes, but the main one is if a value needs to be updated dynamically, and constantly. It's much easier to update an expression attached to a slider than it is to update a set of keyframes.

If the motion is continuous, then Linear or Ease will suffice. But for complex animations that require looping, we can use the time modulo operator to implement the loop.

To see how this works, copy and paste the following expression into the text layer’s Source Text property:

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

You will see the layer count from 0 to 4 every second, looping back to 0 every 5 seconds. This is because the remainder of the expression changes every second as time passes:

From this, it's easy to see how to use it when you need to animate numbers between specific parameters.

Example: Digital Clock

Let’s use % to make a digital clock.

The seconds need to count between 0 and 60, and the minutes need to be incremented every 60 intervals. Let’s paste this into the text layer’s Source Text property again:

<code>10 % 3</code>

Breaking up the expression, our sec variable will count from 0 to 60, and the minute variable will be incremented on every multiple of 60 (again, we use Math.floor to round the numbers). The if statement that follows adds a 0 in front of the sec variable if it is less than 10, ensuring that our seconds variable always has two digits (you can repeat this for the minutes as well, if you want). Then just use time separators to combine them together.

If you need the counter to work independently of time, you can achieve the same effect by replacing the time with a slider and setting its value.

You can also make the time separator blink using the modulo operator and the After Effects text expression selector.

Go to the text layer and add the Opacity animation option to the text layer (if you’re not sure how to do this, you can check out all about this in this article). Then add expression selector and remove range selector.

Set the opacity in the animator to 0 and add this expression to the Amount property:

//Digital clock separator flashes //Add to expression selector

minute = Math.floor(time / 60);

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

I wrote a conditional statement based on the fact that the number of digits in the minutes variable is not fixed. First, I copy the minutes variable from the source text property. I then use this to calculate the textIndex value of the time separator. When there is only one digit in the minute display, it will equal 2. When the minutes display exceeds 10, it will be 3. Conditional statements can also be written as if statements, as shown below, to further explain what it is doing:

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

If minutes is less than 10 and textIndex is equal to 2, then Math.floor(time2 % 1.5) 100 affects the second character in the text layer. This will make the letters flash (on/off ratio 2:1) thanks to the modulo operator. The Math.floor function rounds the number, and the entire expression is finally multiplied by 100 to toggle between 0 and 100, which is the range of the expression selector.

However, if minutes is equal to or greater than 10 and textIndex is equal to 3, the effect will be applied to the third character in the text layer. This explains the extra digits in the minute display. If your minutes display needs to be longer than 99, you will need to add another parameter to affect the display of the time separator when it is in the fourth position.

However, if your minute display is set to a constant number of digits, this statement becomes much simpler:

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

That’s it, you get a digital clock!

After showing how the modulo operator helps create loops, we can now consider how it can be applied to other properties.

Example: Analog Clock

Now let’s make an analog clock. When the pointer ticks, it's usually not a continuous movement but one that stops and starts suddenly. This is the type of loop that the modulo operator can help solve.

Let’s take a look at the following expression that can be pasted into the rotation property of the clock hands layer:

//Second hand rotates 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))

First, we set some variables. frames is the duration of a frame in the composition, allowing it to work across multiple frame rates.

Set loopTime to the time you want to loop. I want the loop to last one second, so I set it to 1. dur is the duration of the animation within the loop, so I set it to frames * 6, making it last 6 frames. strength is the change in animation value, since I'm animating the clock hands I set it to 6 so the clock hands will complete one rotation in 60 ticks.

Next, I create a counter variable that will help offset my value. I created it using Math.floor(time/loopTime) , using Math.floor to round the numbers and setting the speed of the counter to match the loop. Finally, t is a variable we can use to time expression-driven animations. This is time % loopTime, so when time reaches the number stored in loopTime, time loops.

After that, we can animate. In this example, I use the ease expression. By setting the first parameter to t, we remap the rotation value to our loop time variable. The next two parameters are 0 and dur, the start and end points of the animation. The last two parameters are strength counter and strength (counter 1), which is the value of the rotation property. By multiplying strength by counter, we can offset the value of each loop, ending at strength * (counter 1), ready for the next loop.

The advantage of driving motion via expressions rather than keyframes in this case is if you need to build a clock template for changing times. The static value of the expression can be connected to the slider, making it easier to update continuously.

You can use more advanced expressions or build your own functions to create more customized animations:

//Second hand rotates 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)

Finally, you can create a variable to set the starting value and use an if statement to skip the first iteration of the minute hand (and possibly hour hand) animation:

//Minute hand rotation 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 }

From here, just connect the slider to our startValue variable. This way you have an analog clock that can be updated by simply changing the value in the slider.

Conclusion

The modulo operator is useful for creating loops to aid in dynamic expressions where other methods are not suitable for the needs of the project.

Try testing it in your own project!

Any comments? Is there anything unclear? Please leave a comment below.

The above is the detailed content of After Effects: The Modulo Operator (%). For more information, please follow other related articles on the PHP Chinese website!