Comment concevoir une animation

Une animation est un graphe

• Pour la concevoir, il faut pouvoir la reproduire et la composer.
• Toute animation consiste en une valeur qui change en fonction d’une entrée (temps, défilement, position de la souris, etc.), et cette variation peut être tracée sous forme de graphe.
• La forme du graphe détermine la sensation du mouvement, et l’outil qui permet de produire cette courbe comme on le souhaite, c’est les mathématiques.

Outils mathématiques

• Courbe de Bézier (easing) : expression d’une accélération et décélération avec un début et une fin définis. Le principe est que deux points de contrôle attirent la courbe comme des aimants. Elle est produite par application récursive de l’interpolation linéaire. Même pour un mouvement identique, l’impression transmise change complètement selon un ease-in ou un ease-out
• Approche exponentielle : value += (target - value) * factor permet, en une seule ligne, de suivre une cible en douceur. Cela reste naturel même si la cible change à chaque frame. Utilisé pour le suivi du curseur, les compteurs, les barres de progression, etc.
• Ressort : oscillation amortie fondée sur deux forces, la force de rappel et l’amortissement. La sensation est déterminée par deux valeurs : stiffness et damping. Contrairement à l’easing, il n’y a pas de duration, et si la cible change, la transition se fait naturellement en conservant la vitesse actuelle
• Simulation physique : combinaison de lois physiques comme la gravité, les collisions ou les frottements. L’idée clé est que « si l’on définit seulement les règles, le mouvement se crée de lui-même ». Pour des confettis, par exemple, il n’est pas nécessaire de concevoir individuellement la trajectoire de dizaines d’objets : il suffit de définir la gravité et la résistance de l’air. En revanche, comme le résultat est moins prévisible, c’est plus adapté à des effets secondaires qu’aux transitions centrales d’une UI
• atan2 : fonction qui calcule la direction entre deux points. Utile lorsqu’un élément doit faire face à sa direction de déplacement, ou pour des effets de tilt 3D où une carte s’incline en direction du curseur
• Fonctions trigonométriques : idéales pour les répétitions périodiques. En introduisant un déphasage entre plusieurs éléments, on peut créer un effet d’onde. Utiles pour les indicateurs de saisie, les arrière-plans flottants, etc.
• Onde en dents de scie : contrairement au va-et-vient fluide d’un sin, c’est une répétition unidirectionnelle qui progresse de 0 à 1 puis se réinitialise immédiatement. Utilisée pour les pulse rings, les pings, les progressions répétées, etc.

Concevoir des animations complexes

• Fonctions par segments : on découpe une courbe complexe en segments, puis on conçoit chaque morceau séparément avant de les raccorder. Cela permet des ajustements intentionnels plus fins qu’avec une simulation physique (par exemple, réduire volontairement la hauteur d’un rebond)
• Identification des dépendances : le point de départ de la conception d’une animation est la question « de quoi la valeur dépend-elle ? ». On peut classer cela en trois types : basé sur le temps (le plus courant), basé sur une valeur (défilement, position de la souris) et basé sur un événement (déclenché par un clic ou un hover)
• Pipelining : placer les différents morceaux dans l’ordre sur l’axe du temps. On combine des stratégies de disposition comme la séquence, le chevauchement, la simultanéité ou le stagger. Chaque morceau peut être modifié indépendamment
• Transition d’état : méthode qui fait passer à l’étape suivante selon une condition plutôt qu’en fonction du temps. Si l’on explicite les conditions de transition, comme lancement → explosion → dispersion → disparition pour un feu d’artifice, cela peut être géré avec une machine à états
• Séparation des propriétés : on sépare plusieurs propriétés (taille, couleur, opacité, etc.) en pistes indépendantes. Comme chaque piste n’a pas besoin de connaître les autres, il devient facile d’affiner ou d’en ajouter

Points à considérer

• Aléatoire : il faut utiliser un aléatoire contrôlé plutôt qu’un hasard complet. La clé est de définir la frontière entre « ce qui doit être contrôlé » et « ce que l’on laisse au hasard »
• Bidirectionnalité : si la direction change alors que l’animation est en cours d’apparition, il faut la concevoir de sorte qu’elle s’inverse en reprenant depuis l’état actuel afin d’éviter les sauts ou les maladresses

Limites et points forts des animations en code

• Pour des animations complexes comme des mouvements de personnages ou un morphing sophistiqué, des outils spécialisés comme Lottie, Rive ou la vidéo sont plus adaptés.
• En revanche, le point fort des animations en code réside dans les interactions en temps réel qui réagissent immédiatement aux entrées de l’utilisateur.