Fluidité, Easing : Le guide complet pour améliorer vos animations pivot

L'idée générale de ce tutoriel est de faire un récapitulatif des notions de base qui permettront aux débutants d'améliorer le rendu de leurs animations pivot. Je prends pivot comme cadre mais certaines notions peuvent s'appliquer quel que soit le type d'animation que vos faites.

Sommaire

1. L'easing
   • Timing et espacement
   • Améliorer ses animations grâce à l'easing
2. La fluidité
   • Notions
   • Les pauses
3. Le heavy spacing
4. Le Flow
5. Ressources

L'easing

Pour commencer à appréhender le sujet nous allons regarder des exemples.

Dans ce premier exemple, le point qui se déplace est dur à suivre, l'animation n'est pas très agréable à regarder. Alors, qu'est-ce qu'il manque ?

Ici c'est beaucoup mieux! Votre œil peut suivre le mouvement du point sans difficulté parce que celui-ci est progressif et que d'une image à l'autre, votre œil est capable d'anticiper la progression du point. La différence entre ces deux animations est ce que l'on appelle l'easing. Pour mieux comprendre cet effet et être capable de l'utiliser, nous allons étudier quelques notions simples.

Timing et espacement

Ces deux notions sont indépendantes. Prenons l'exemple d'une balle qui tombe sur le sol. Si nous décidons qu'il nous faut 10 images pour que notre balle touche le sol, c'est ça le timing. Maintenant il est possible d'animer ce mouvement de plusieurs manières : On peut décider de faire un mouvement linéaire, ou alors que la balle accélère progressivement. Le timing reste le même (10 images) mais l'espacement d'une image à l'autre ne sera pas le même. Voici une représentation graphique de la différence entre les deux mouvements :

|------|------|------|------|------|

|-|--|----|--------|---------------|

Manipuler habilement le timing et les espacements, en plus de rendre votre animation plus agréable à regarder permet de donner une sensation de poids et de gravité à vos objets et d'aider le spectateur à imaginer ce que chaque élément représente.

Dans cet exemple de Suresh V. Selvaraj, on peut observer une balle verte qui rebondit, et une balle rouge qui monte et qui descend. Les deux balles mettent le même temps pour monter et pour descendre, pourtant la différence est flagrante. La balle rouge semble robotique quand la balle verte a réellement l'air de rebondir.

Améliorer ses animations grâce à l'easing

C'est un outil qui nous aide à améliorer nos espacements. Pour créer de l'easing il faut donc rendre les espaces progressivement plus petit ou plus grand, jusqu'à obtenir un mouvement plus lisse. L'easing c'est donc un changement de vitesses progressif. Voyons maintenant comment ne pas utiliser l'easing à tort. Regardons cet exemple d'easing exessif réalisé par Foley.

La balle qui est en train de tomber commence à ralentir progressivement avant de toucher le sol. Ce n'est pas logique, la gravité devrait pousser la balle à accélérer jusqu'au point d'impact. Cela pourrait être un effet de style, mais si nous nous concentrons sur le réalisme, tous les mouvements ne devraient pas avoir de l'easing. Attention à ne pas considérer l'easing comme une règle universelle à utiliser quelle que soit la situation.

La fluidité

Notions

Quelques points importants pour avoir des animations fluides : Les changements de vitesses doivent être lisses et logiques. Veillez à ce qu'un mouvement qui n'a pas de raison de changer de vitesse reste constant, vitesse constante ou accélération progressive ou ralentissement progressif, mais gardez une régularité! Pour cela veillez à avoir des espacements constants d'une image à l'autre, ou alors qui augmentent, ou baissent progressivement. Fluide:

|---|---|---|---|---|---|---|

Pas fluide et saccadé:

|--|---|-|--|----|--|-------|

Choisissez bien votre vitesse. Si tous les mouvements dans votre animation sont trop rapides, ce sera difficile à suivre pour le spectateur et ça nuira à la fluidité.

Les pauses

Les espacements doivent être accordés avec la dynamique de votre animation. Si vous utilisez de grands espacements, vous devriez aussi exagérer les pauses, si non vos mouvements seront confus. Par exemple lorsque vos faites courir un stickman, sa vitesse ne doit pas être parfaitement constante, en ralentissant légèrement le moment ou le pied se pose sur le sol, le mouvement peu parraître plus fluide. Démarrer progressivement chaque mouvement de votre stickman permet au spectateur de mieux saisir l'action. Faites attention à l'évolution entre une image et la suivante pour que vos mouvements soient correctement amorcés.

Le heavy spacing

Faire de l'heavy space est assez simple, mais cela peux varier avec le genre d'animations que vous souhaitez. Beaucoup de gens font de l'heavy spacing sans s'en rendre compte! Il faut faire des mouvements brusques qui ne collent pas vraiment à la réalité. Ces mouvements donnent une impression de puissance si ils sont bien réalisés. Voici un exemple d'heavy spacing sur une course :

Animation tirée du "noob guide" de Droidz.

Le Flow

Alors le Flow qu'est-ce que c'est? Lorsque vous allez animer une série de mouvements, il y a ce moment où vous devez connecter un mouvement avec le suivant. La façon la plus simple d'enchainer des mouvements est le "stop and go" qui consiste à terminer complètement un mouvement avant d'en commencer un autre. À l'opposé le Flow consiste à amorcer le nouveau mouvement avec la fin du précédent. Cet effet permet d'éviter que votre animation ne ressemble à une suite de mouvements séparés, et donc le résultat est plus agréable à regarder. Encore une fois tout cela dépend de votre style et du contexte de vos mouvements.

Conclusion

J'espère que ce guide vous a permis d'appréhender ces quelques notions de bases utiles pour progresser lorsque l'on débute en animation pivot. N'hésitez pas à vous exercer et à envoyer vos animations sur le forum pour avoir des retours!

Ressources

• Timing, Spacing and Poses : https://pivottube.pl/tutorial/en/
• Animation Principles in UI Design: Understanding Easing : https://medium.com/motion-in-interaction/animation-principles-in-ui-design-understanding-easing-bea05243fe3