Animation
Il y a quatre façons de faire bouger quelque chose. Ce sont vraiment des outils différents, pas des couches d'une même chose : le premier travail est donc de choisir le bon.
| Façon | Idéale pour | Se met en place dans |
|---|---|---|
| Transition | un changement doux d'ici à là | une durée sur une étape ou un state |
| Étape d'animation | un mouvement réutilisable attaché à un événement | une étape à l'intérieur d'un événement |
| Timeline | la chorégraphie — plusieurs objets, plusieurs pistes, une horloge | l'Animation Controller |
| Clip de modèle | l'animation livrée avec un modèle importé | les réglages du modèle |
Une règle grossière : un bouton qui s'estompe est une transition, une porte qui s'ouvre au toucher est une étape d'animation, une cinématique est la timeline, et un personnage qui marche est un clip de modèle.
N'animez jamais le même objet de deux façons à la fois. La timeline écrit dans ses objets à chaque image et écrasera silencieusement une transition. Si une animation semble se battre contre elle-même, c'est pour cela.
Transitions
Donnez une durée à un changement et il s'interpole au lieu de sauter. Cela vaut pour un changement de state doté d'une durée et pour une étape d'événement qui en a une.
Une transition a une durée, un easing, et éventuellement un nombre de répétitions et un mode aller-retour. Ce qui peut s'interpoler est listé sous ce qui s'anime en douceur ; tout le reste change à la fin.
L'aller-retour commence à 2. Cela évite que d'anciens projets se mettent soudain à pulser.
Étapes d'animation
Une étape d'animation déplace, tourne, redimensionne ou fait disparaître ce que vous ciblez.
Donnez-lui une seule destination et elle s'y rend en douceur. Donnez-lui deux keyframes ou plus et elle joue toute la courbe.
| Étape | Anime |
|---|---|
| Transformation | position, rotation, échelle |
| Opacité | l'apparition et la disparition |
| Transformation d'os | un os précis |
| Matériau | copie l'aspect d'un matériau enregistré sur vos cibles |
| Jouer / arrêter une animation | démarre ou arrête un preset de timeline |
Keyframes et easing
Un keyframe est un temps et une valeur.
Pas à celui que vous quittez. Réglez l'easing sur le keyframe de destination. Pas d'easing signifie une ligne droite.
L'easing est une courbe à deux poignées, exactement comme le cubic-bezier de CSS. Les
préréglages nommés — quad, quart, circular, expo, back, chacun en In, Out ou InOut — ne sont que
des positions de poignées utiles.
| Easing | Donne l'impression de |
|---|---|
| In | démarrer lentement puis prendre de la vitesse — un départ |
| Out | arriver et se poser — le plus naturel pour une interface |
| InOut | s'adoucir aux deux bouts — bien pour les longs déplacements |
| Back | dépasser légèrement puis revenir — joueur |
| Elastic | dépasser et osciller, avec son amplitude et sa période |
| Step | tenir, puis basculer à la fin — pour commuter, pas pour glisser |
Dans le doute, Out est presque toujours le bon premier réflexe.
La timeline
L'Animation Controller sert à la chorégraphie — plusieurs choses bougeant ensemble sur une même horloge.
Sa structure a trois niveaux :
- un preset est une animation que vous pouvez jouer par son nom ;
- une barre est la partition d'un objet, posée sur une piste ;
- dans une barre, chaque propriété a ses propres keyframes.
Une barre peut aussi être une barre de lecture : au lieu d'animer quoi que ce soit, elle démarre le preset d'un autre objet quand la tête de lecture l'atteint. C'est ainsi qu'un personnage dont les membres sont des presets séparés reste synchronisé. La boucle et la vitesse se transmettent à tout ce qu'elle démarre, et arrêter un preset arrête tout ce qu'il a lancé.
Les propriétés individuelles d'une barre peuvent être coupées : une barre qui anime position et rotation peut donc voir sa rotation désactivée sans perdre ses keyframes.
L'animation livrée avec un modèle n'est pas ré-approximée : un cycle de marche importé joue exactement comme l'artiste l'a fait.
Clips de modèle
Un modèle apporte ses propres clips nommés. Choisissez-en un, puis réglez la vitesse, la boucle (une fois, un nombre de fois, ou indéfiniment) et une image de départ — comptée à 30 images par seconde quelle que soit la cadence d'origine.
Changer le clip ou l'image de départ rembobine. Mettre en pause conserve le temps courant au lieu de le remettre à zéro.
Unités, et une chose qui manque
- le temps en secondes (les durées des changements de state sont en millisecondes) ;
- la rotation en degrés partout où vous pouvez la voir ;
- les images de départ comptées à 30 ips.
Aucun des quatre mécanismes n'en fournit. Pour enchaîner sur autre chose après une animation, utilisez une étape d'attente de même durée, ou suivez le temps écoulé dans un script.
Suite : States — des instantanés nommés d'un objet.