Animation
Il existe trois façons de faire bouger un objet. Cette page vous aide à choisir la bonne et à la mettre en place.
Choisir une façon d'animer
| Façon | Idéale pour | Où la régler |
|---|---|---|
| Transition | un seul changement fluide d'un point à un autre | une durée sur l'étape Set state |
| Timeline | un mouvement avec des images clés, ou plusieurs objets qui bougent ensemble | le panneau Animation ; l'étape Play animation la lance |
| Clip de modèle | l'animation fournie avec un modèle importé | le panneau Animation, où l'import la place |
Par exemple :
- le fondu d'un bouton, ou une porte qui s'ouvre quand on la touche, est une transition vers un autre état ;
- une cinématique est une timeline ;
- un personnage qui marche est un clip de modèle.
N'animez jamais le même objet de deux façons en même temps. La timeline écrase une transition sans rien signaler. Si une animation semble lutter contre elle-même, c'est pour cette raison.
Transitions
Donnez une durée à un changement : il se fait alors en douceur au lieu de sauter d'un coup. Les étapes Set state et Override properties ont toutes deux une durée et un easing, c'est-à-dire une courbe d'accélération.
Certaines propriétés changent en douceur, les autres changent à la fin de la transition. Voir ce qui s'anime en douceur.
Dans un script, ctx.startTransition peut aussi répéter la transition et la jouer en aller-retour
(yoyo).
Pour l'aller-retour, il faut repeat: 2 ou plus.
Étapes d'animation
Les événements lancent et arrêtent les animations avec deux étapes :
| Étape | Ce qu'elle fait |
|---|---|
| Play animation | lance une animation de la timeline, sur n'importe quel objet ; vous réglez le mode de boucle, les répétitions, la vitesse et le délai |
| Stop animation | l'arrête |
Pour déplacer, faire tourner, redimensionner, faire disparaître en fondu ou changer la couleur d'un objet depuis un événement, créez une animation dans le panneau Animation et lancez-la avec Play animation. Pour un seul changement, Set state avec une durée suffit.
Les projets créés plus tôt peuvent aussi contenir les étapes Transformation, Opacity, Material, Bone transform et Built-in animation. Elles fonctionnent toujours dans ces projets, mais l'éditeur ne les propose plus. Material, par exemple, fait évoluer la couleur, l'opacité, la lueur et les réglages de surface des cibles vers un matériau enregistré, en gardant le type et les textures de chaque emplacement.
Images clés et easing
Une image clé est une valeur à un moment précis. L'easing règle la façon dont la valeur passe d'une image clé à l'autre.
L'easing appartient à l'image clé vers laquelle vous allez, pas à celle que vous quittez. Sans easing, la valeur évolue en ligne droite.
L'easing est une courbe à deux poignées, comme cubic-bezier en CSS. Les presets nommés sont des
positions de poignées toutes prêtes : quad, quart, circular, expo et back, chacun en version In,
Out ou InOut.
| Easing | Effet |
|---|---|
| In | démarre lentement puis accélère, comme quelque chose qui se met en route |
| Out | arrive puis se pose ; le choix le plus naturel pour une interface |
| InOut | lent au début et à la fin ; adapté aux longs mouvements |
| Back | dépasse un peu la fin puis revient ; effet ludique |
| Elastic | dépasse la fin et oscille ; vous réglez l'amplitude et la période |
| Step | reste en place, puis saute à la fin ; pour basculer, pas pour glisser |
Dans le doute, commencez par Out.
La timeline
Utilisez le panneau Animation quand plusieurs éléments doivent bouger ensemble, au même rythme. Le fonctionnement du panneau est expliqué dans Animation.
Une timeline a trois niveaux :
- un preset est une animation que vous pouvez lancer par son nom ;
- une barre est la partie d'un objet dans ce preset, posée sur une piste ;
- dans une barre, chaque propriété a ses propres images clés.
Une barre peut aussi être une barre de lecture. Elle n'anime rien elle-même : elle lance le preset d'un autre objet quand la tête de lecture l'atteint. Ainsi, un personnage reste synchronisé même si chaque membre a son propre preset.
- La boucle et la vitesse s'appliquent à chaque preset lancé par une barre de lecture.
- Arrêter un preset arrête tout ce qu'il a lancé.
Vous pouvez couper une seule propriété dans une barre. Par exemple, dans une barre qui anime la position et la rotation, vous pouvez désactiver la rotation. Ses images clés sont conservées.
L'animation fournie avec un modèle garde ses courbes d'origine. Un cycle de marche importé est joué exactement comme il a été créé.
Clips de modèle
Un modèle peut contenir ses propres clips, chacun avec un nom. Quand vous importez le modèle, chaque clip devient une animation de ce modèle, qui porte le nom du clip. Vous la trouvez dans le panneau Animation, comme toute animation que vous avez créée.
Pour lancer un clip depuis un événement, utilisez l'étape Play animation et choisissez cette animation.
Unités
- Le temps est en secondes. Les durées des changements d'état sont en millisecondes.
- La rotation est en degrés partout où elle s'affiche.
Aucune des trois façons ne vous signale la fin d'une animation. Pour lancer quelque chose après une animation, utilisez une étape Wait, then de la même durée, ou suivez le temps dans un script.
Suivant : États — enregistrer différentes apparences d'un objet et passer de l'une à l'autre.