After Effects : l'opérateur Modulo (%)

Explication détaillée de l'opérateur modulo (%) dans les expressions After Effects

L'opérateur modulo (%), également connu sous le nom d'opérateur reste, est un outil très utile dans la construction d'expressions, mais il peut ne pas être facile à comprendre pour les débutants. Cet article explique ses fonctionnalités et ses utilisations.

% est utilisé pour calculer le reste d'une équation. Par exemple :

<code>10 % 3</code>

Cette expression renvoie 1 car le quotient de 10 divisé par 3 est 3, le reste est 1.

Ceci est utile pour créer des boucles lorsque vous travaillez avec des variables temporelles.

Expression de boucle

La plupart des concepteurs qui découvrent les expressions After Effects connaissent l'expression loopOut(). Cela nous permet d'utiliser "cycle" (cycle du début à la fin), "pingpong" (cycle du début à la fin et retour au début), "offset" (répéter les images clés mais à chaque fois avec un offset de valeur pour construire l'animation) ou "continuer" (pour continuer le mouvement en utilisant la vitesse de la dernière image clé) pour parcourir les propriétés de l'image clé. Ceci est très complet et couvre tout ce dont vous avez besoin pour l’animation d’images clés.

Cependant, si vous souhaitez boucler une expression, loopOut n'est pas une solution viable. Il peut y avoir de nombreuses raisons de ne pas vouloir utiliser d'images clés, mais la principale est si une valeur doit être mise à jour de manière dynamique et constante. Il est beaucoup plus facile de mettre à jour une expression attachée à un curseur que de mettre à jour un ensemble d'images clés.

Si le mouvement est continu, alors Linéaire ou Ease suffiront. Mais pour les animations complexes nécessitant une boucle, nous pouvons utiliser l'opérateur modulo temporel pour implémenter la boucle.

Pour voir comment cela fonctionne, copiez et collez l'expression suivante dans la propriété Texte source du calque de texte :

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

Vous verrez le nombre de couches passer de 0 à 4 chaque seconde, revenant à 0 toutes les 5 secondes. En effet, le reste de l'expression change chaque seconde au fil du temps :

随时间变化的余数

1 % 5 = 1

2 % 5 = 2

3 % 5 = 3

4 % 5 = 4

5 % 5 = 0

La fonction Math.floor arrondit l'argument à un nombre entier.

À partir de là, il est facile de voir comment l'utiliser lorsque vous devez animer des nombres entre des paramètres spécifiques.

Exemple : Horloge numérique

Utilisons % pour créer une horloge numérique.

Les secondes doivent compter entre 0 et 60, et les minutes doivent être incrémentées tous les 60 intervalles. Collons à nouveau ceci dans la propriété Texte source du calque de texte :

<code>10 % 3</code>

En divisant l'expression, notre variable sec comptera de 0 à 60, et la variable minute sera incrémentée à chaque multiple de 60 (encore une fois, nous utilisons Math.floor pour arrondir les nombres). L'instruction if qui suit ajoute un 0 devant la variable sec si elle est inférieure à 10, garantissant que notre variable secondes comporte toujours deux chiffres (vous pouvez également répéter cela pour les minutes, si vous le souhaitez). Ensuite, utilisez simplement des séparateurs de temps pour les combiner.

Si vous souhaitez que le compteur fonctionne indépendamment du temps, vous pouvez obtenir le même effet en remplaçant l'heure par un curseur et en réglant sa valeur.

Vous pouvez également faire clignoter le séparateur de temps à l'aide de l'opérateur modulo et du sélecteur d'expression de texte After Effects.

Accédez au calque de texte et ajoutez l'option d'animation Opacité au calque de texte (si vous ne savez pas comment procéder, vous pouvez tout savoir à ce sujet dans cet article). Ajoutez ensuite un sélecteur d'expression et supprimez le sélecteur de plage.

Définissez l'opacité dans l'animateur sur 0 et ajoutez cette expression à la propriété Amount :

//Le séparateur d'horloge numérique clignote //Ajouter au sélecteur d'expression

minute = Math.floor(time / 60);

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

J'ai écrit une instruction conditionnelle basée sur le fait que le nombre de chiffres dans la variable minutes n'est pas fixe. Tout d’abord, je copie la variable minutes de la propriété du texte source. J'utilise ensuite ceci pour calculer la valeur textIndex du séparateur de temps. Lorsqu’il n’y a qu’un seul chiffre dans l’affichage des minutes, il sera égal à 2. Lorsque l’affichage des minutes dépasse 10, il sera 3. Les instructions conditionnelles peuvent également être écrites comme des instructions, comme indiqué ci-dessous, pour expliquer davantage ce qu'elles font :

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

Si minutes est inférieur à 10 et textIndex est égal à 2, alors Math.floor(time2 % 1.5) 100 affecte le deuxième caractère du calque de texte. Cela fera clignoter les lettres (rapport on/off 2:1) grâce à l'opérateur modulo. La fonction Math.floor arrondit le nombre et l'expression entière est finalement multipliée par 100 pour basculer entre 0 et 100, qui correspond à la plage du sélecteur d'expression.

Cependant, si les minutes sont égales ou supérieures à 10 et que textIndex est égal à 3, l'effet sera appliqué au troisième caractère du calque de texte. Ceci explique les chiffres supplémentaires dans l'affichage des minutes. Si l'affichage de vos minutes doit être supérieur à 99, vous devrez ajouter un autre paramètre pour affecter l'affichage du séparateur de temps lorsqu'il est en quatrième position.

Cependant, si l'affichage de vos minutes est réglé sur un nombre constant de chiffres, cette affirmation devient beaucoup plus simple :

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

Ça y est, vous obtenez une horloge numérique !

Après avoir montré comment l'opérateur modulo permet de créer des boucles, nous pouvons maintenant considérer comment il peut être appliqué à d'autres propriétés.

Exemple : horloge analogique

Créons maintenant une horloge analogique. Lorsque le pointeur fait un tic-tac, il ne s'agit généralement pas d'un mouvement continu mais d'un mouvement qui s'arrête et redémarre soudainement. C’est le type de boucle que l’opérateur modulo peut aider à résoudre.

Jetons un coup d'œil à l'expression suivante qui peut être collée dans la propriété de rotation du calque des aiguilles de l'horloge :

//La trotteuse tourne frames = thisComp.frameDuration;

loopTime = 1; dur = images * 6 ; force = 6;

counter = Math.floor(time/loopTime); t = temps % loopTime;

facilité(t, 0, dur, force compteur, force (compteur 1))

Tout d’abord, nous définissons quelques variables. frames est la durée d’une image dans la composition, ce qui lui permet de fonctionner sur plusieurs fréquences d’images.

Réglez loopTime sur l'heure à laquelle vous souhaitez boucler. Je veux que la boucle dure une seconde, donc je la mets à 1. dur est la durée de l'animation dans la boucle, je l'ai donc définie sur images * 6, ce qui la fait durer 6 images. la force est le changement de valeur d'animation, puisque j'anime les aiguilles de l'horloge, je la règle sur 6 pour que les aiguilles de l'horloge effectuent une rotation en 60 ticks.

Ensuite, je crée une variable compteur qui aidera à compenser ma valeur. Je l'ai créé en utilisant Math.floor(time/loopTime) , en utilisant Math.floor pour arrondir les nombres et en réglant la vitesse du compteur pour qu'elle corresponde à la boucle. Enfin, t est une variable que nous pouvons utiliser pour chronométrer des animations basées sur des expressions. Il s'agit du temps % loopTime, donc lorsque le temps atteint le nombre stocké dans loopTime, le temps boucle.

Après cela, nous pouvons animer. Dans cet exemple, j'utilise l'expression de facilité. En définissant le premier paramètre sur t, nous remappons la valeur de rotation sur notre variable de temps de boucle. Les deux paramètres suivants sont 0 et dur, les points de début et de fin de l'animation. Les deux derniers paramètres sont la force compteur et la force (compteur 1), qui est la valeur de la propriété rotation. En multipliant la force par le compteur, on peut compenser la valeur de chaque boucle, se terminant à la force* (compteur 1), prête pour la boucle suivante.

L'avantage de piloter le mouvement via des expressions plutôt que des images clés dans ce cas est si vous devez créer un modèle d'horloge pour changer les heures. La valeur statique de l'expression peut être connectée au curseur, ce qui facilite la mise à jour continue.

Vous pouvez utiliser des expressions plus avancées ou créer vos propres fonctions pour créer des animations plus personnalisées :

//La trotteuse tourne frames = thisComp.frameDuration;

loopTime = 1; dur = images * 6 ; changement = 6;

counter = Math.floor(time/loopTime); t = temps % loopTime;

fonction easyInOutBack (t, b, c, d, s) { si (s == non défini) 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)

Enfin, vous pouvez créer une variable pour définir la valeur de départ et utiliser une instruction if pour ignorer la première itération de l'animation de l'aiguille des minutes (et éventuellement de l'aiguille des heures) :

//Rotation de l'aiguille des minutes frames = thisComp.frameDuration;

loopTime = 60 ; dur = images * 6 ; force = 6 ; startValue = 180;

counter = Math.floor(time/loopTime); t = temps % loopTime;

fonction easyInOutBack (t, b, c, d, s) { si (s == non défini) 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 (compteur > 0) { easyInOutBack (t, startValue force * compteur, force, dur, 1,70158) } autre { valeur de départ >

À partir de là, connectez simplement le curseur à notre variable startValue. De cette façon, vous disposez d’une horloge analogique qui peut être mise à jour en modifiant simplement la valeur dans le curseur.

Conclusion

L'opérateur modulo est utile pour créer des boucles afin de faciliter les expressions dynamiques là où d'autres méthodes ne conviennent pas aux besoins du projet.

Essayez de le tester dans votre propre projet !

Des commentaires ? Y a-t-il quelque chose de flou ? Veuillez laisser un commentaire ci-dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!