Expression 2 : Loop
¡ Estoy de vuelta ! Après la fatidique période de Noël — Feliz Navidad — qui est chaque année épuisante (especialemente desde los estudios superiores) et une course contre la montre et la fatigue. Donc, après un petit passage à creux, on est reparti avec un peu d’expression.
Les loops
Le nom semble assez explicite mais les boucles sont des éléments essentiels dans le motion, permettant entre autres de créer des visuels et animations satisfaisantes ou surtout de répéter un mouvement à l’infini (ou presque). C’est l’un des éléments pour lequel même les motions designers qui n‘utilisent pas les expressions, font une exception.
En effet, il y a deux façon de faire boucler son animation. La façon a la mano qui consiste à simplement dupliquer son animation en copiant/collant les keyframes les unes à la suite des autres. Et bien sûr, cette méthode présente l’énorme désavantage de devoir modifier toutes ses clés en cas de modification, en plus d’alourdir visuellement une timeline qui peut facilement se remplir.
L’autre façon ? C’est d’utiliser des expressions qui font faire tout le gros du travail, automatiquement, en quelques lignes de code très simple.
loopOut();
C’est l’expression de loop qui permet de boucler une animation après ses keyframes. Et comme un schéma vaut mille mots :
La boucle inclue les keyframes d’animations puis s’exécute jusqu’à la fin de la durée du calque.
loopOut(“type”, numKeyframes);
Dans son écriture complète, loopOut(); prend deux arguments :
- un string indiquant le type de loop : cycle, offset, continue, pingpong
- un number : correspondant au nombre de la keyframe, en partant de la dernière keyframe, prise en compte dans la loop.
Afin de mieux comprendre le dernier argument, dans le cas où loopOut(“cycle”,2); la boucle va répéter l’animation entre la deuxième keyframe en partant de la dernière keyframe et la dernière keyframe. ¿ Entendiste ? Un petit schéma pour mieux comprendre.
La loop ne prendra en compte que l’animation comprise entre les keyframes 2 et 0 pour ensuite la répéter jusqu’à la fin de la durée du calque.
Par défaut loopOut(); équivaut à loopOut(“cycle”,0) qui prend en compte toutes les keyframes.
loopIn();
C’est l’expression miroir de loopOut(), elle permet de boucler une animation avant ses keyframes et fonctionne exactement sur le même principe.
loopIn(“type”, numKeyframes);
loopOutDuration(); loopInDuration();
C’est les jumeaux de loopOut(); et loopIn(); avec exactement le même fonctionnement. Cependant le second argument ne va pas designer un “numéro” de keyframe mais une valeur temporelle (en seconde).
Les autres types de loops
- cycle : rejoue l’animation en boucle
- pingpong : rejoue l’animation puis la “rembobine” et ainsi de suite
- offset : les valeurs des loops s’accumulent
- continue : joue l’animation puis boucle en accumulant les valeurs entre l’avant-dernière keyframe et la dernière
