Donnez vie à vos animations
Maintenant que vous commencez à saisir le principe des animations CSS, il est temps de réfléchir à comment créer des animations plus naturelles et engageantes. Ça ne veut pas dire que les animations que nous avons créées jusqu’ici sont à jeter : vous pouvez totalement les utiliser. Mais nous n’avons utilisé que les propriétés de transition les plus basiques, et laissé la plupart des valeurs par défaut pour les propriétés.
Les valeurs par défaut produisent des effets parfaitement fluides et uniformes. Or, un mouvement parfait peut justement être un peu trop parfait. En effet, la nature est chaotique. Elle ne produit pas de mouvement parfait. Les objets ont une masse, ils doivent accélérer et décélérer. Les mouvements, à une échelle ou une autre, tremblent, oscillent, changent de direction : nous sommes contraints par les lois de la physique. Ce que nos cerveaux trouvent naturels, ce sont des mouvements irréguliers. C’est pour cette raison que les valeurs par défaut de nos animations risquent de paraître lisses, artificielles ou robotiques.
On ajoute des animations à un site web dans le but d’offrir une expérience plus immersive et engageante aux utilisateurs, dont les cerveaux sont programmés pour accepter les imperfections de la nature. Pour créer une expérience satisfaisante, nous devons donc insuffler de la vie dans nos animations.
Les Neuf Sages de Disney
Pour produire les films cultes que sont Blanche-Neige et les sept nains ou Cendrillon, Disney employait un noyau dur d’animateurs, responsables du style et des techniques, qui ont fait de ces films des monuments de l’animation. Ils sont rentrés dans l'histoire sous le nom de “Neuf Sages”.
Parmi les neuf, Ollie Johnston et Frank Thomas ont coécrit un livre intitulé The Illusion of Life. Ils y détaillent leurs méthodes pour donner vie à leur création par ce qu’ils appellent les “12 principes de l’animation”. Bien que ces règles aient été établies dans le cadre de l’animation à la main traditionnelle, elles ont depuis été adaptées à pratiquement tous les autres styles d’animation, et restent parfaitement pertinentes dans le domaine de l’animation CSS.
Penchons-nous sur ces 12 principes.
Squash and Stretch (compression et étirement)
Ce principe permet de donner de la masse à un objet, en l’étirant quand il accélère, puis en l’aplatissant et en l'élargissant quand il ralentit. Imaginez une balle en caoutchouc qui rebondit sur le sol en s'aplatissant avant de rebondir.
Vous pouvez voir ici l’étirement horizontal pendant l’accélération, puis la compression au moment de la décélération à l’arrivée contre le mur.
Anticipation
Le principe de l’anticipation permet de préparer l'audience (ici, l'utilisateur) à une action à venir, lui donnant ainsi plus d'impact. Un chat qui se trémousse avant de bondir, le bras d'Astérix qui tourne avant de décocher un coup à un Romain… Les personnages animés ont besoin de mouvements préliminaires pour donner de la force à leurs actions. À l'inverse, un mouvement sans anticipation paraîtra lisse et artificiel.
Staging (mise en scène)
La mise en scène, dans le contexte de l’animation, désigne la composition. Il s’agit de guider les yeux des utilisateurs, vers les parties importantes de l’écran par l’utilisation de mouvements. Par exemple, cela peut se réaliser en faisant ressortir le bouton sur lequel nous voulons que l’utilisateur clique.
Straight Ahead and Pose to Pose (toute l'action d'un coup et partie par partie)
Straight Ahead et Pose to Pose sont deux différentes techniques qui permettent de créer des animations traditionnelles qui ne s’appliquent pas vraiment à l’animation web. Cependant, en CSS, il existe aussi deux différentes méthodes d’animation : les transitions, dont nous avons commencé à parler, et les keyframes, que nous étudierons bientôt. Les transitions sont basées sur une valeur de début et une valeur de fin, entre lesquelles le navigateur crée l’animation. Avec les keyframes, nous apprendrons à créer des animations par étapes, ou comme ci-dessous, partie par partie.
Follow Through and Overlapping Action (continuité du mouvement initial et chevauchement de deux mouvements consécutifs)
Dans le monde réel, la masse et la densité des objets ne sont pas uniformes, ils accélèrent et décélèrent donc à des vitesses différentes. Imaginez que vous êtes dans une voiture et que votre tête est plaquée à l’appuie-tête lors de l’accélération, ou qu’elle est balancée vers l’avant quand le conducteur pile. Sans follow through ou overlapping action, vous resteriez statique dans la voiture lors des changements de vitesse. Le fait de donner des vitesses différentes au différentes parties d’un objet ajoute de l’authenticité à nos animations, et contribue à lui donner une masse réaliste.
Slow in and slow out (ralentissement en début et en fin de mouvement)
Aussi connu comme "ease-in" et "ease-out" (que vous verrez dans ce cours) ce principe est basé sur le fait que les objets ne démarrent pas et ne s’arrêtent pas instantanément. Ils accélèrent et décélèrent. Slow in fait référence à l’accélération d’un objet, et slow out à la décélération. En appliquant des valeurs différentes à nos accélérations et décélérations, on peut modifier la perception de la taille ou de la masse d’un objet, rendre les mouvements plus vifs, ou plus laborieux pour un objet lourd.
Arc
La nature ne crée pas de lignes droites, et les mouvements naturels ne font pas exception à la règle. Cet exemple est un peu plus compliqué à exprimer avec une boîte en animation CSS, mais l’introduction d’arcs dans le mouvement d’un objet peut aider à le rendre plus naturel, comme ici.
Secondary Action (action secondaire)
Ajouter des animations pour séparer différentes parties d’une scène peut aider à accentuer ou renforcer les principaux éléments d’une animation.
Timing
Les objets doivent se déplacer à des vitesses crédibles par rapport à leur taille et à leur masse. Un semi-remorque accélère et décélère plus lentement et de manière plus homogène qu’une Ferrari, qui peut accélérer en un clin d’œil et s’arrêter quasiment sur place. On contrôle le timing des objets par rapport à leurs tailles relatives, ainsi que par la durée de l’animation.
Exaggeration (exagération)
Même si le but est bien de rendre les animations réalistes, trop pousser ce réalisme peut résulter en un mouvement austère et fade. Aller un peu au-delà des limites naturelles permet de donner un peu de caractère et de personnalité à une animation.
Solid Drawing (notion de volume)
Traditionnellement, ce principe fait référence à la façon de réaliser une scène en représentant correctement la perspective. Pour nous, ce principe concerne la structure du code de l’animation. Il est très important de comprendre les tenants et les aboutissants des propriétés qu’on utilise, pour s’assurer que les animations correspondent au résultat souhaité. Si on ne construit pas le code avec les animations à l’esprit, on peut facilement se retrouver avec, au lieu de quelque chose comme ça :
Une animation qui ressemblerait plutôt à ça :
Appeal (charisme)
Pour rendre nos animations plus dynamiques et plus intéressantes, on peut y ajouter quelques effets supplémentaires. Le centre de l’attention l’est parce qu’il attire tous les regards. C’est l’attrait et le charisme qui attirent l’attention, et la conservent.
Tout au long de ce cours, nous apprendrons à maîtriser les animations CSS pour incorporer des éléments de ces 12 principes dans nos propres animations, et créer une expérience utilisateur plus authentique et attirante.
En résumé
Les 12 principes de l'animation sont :
Squash and Stretch, pour compresser et étirer un élément ;
Anticipation, pour préparer l’audience à un mouvement à venir ;
Staging (mise en scène), pour guider les yeux de l’utilisateur vers les éléments importants d’une page ;
Straight Ahead and Pose to Pose (toute l'action d'un coup et partie par partie), qui correspond davantage à l'animation traditionnelle mais fait penser à la différence transitions/keyframes ;
Follow Through and Overlapping Action (continuité du mouvement initial et chevauchement de deux mouvements consécutifs), pour faire accélérer et décélérer un élément en fonction de sa masse ;
Slow in and slow out (ralentissement en début et en fin de mouvement), basé sur le fait que les objets ne démarrent pas et ne s’arrêtent pas instantanément ;
Arc, pour créer des mouvements naturels ;
Secondary Action (action secondaire), pour séparer différentes parties d’une scène dans une animation ;
Timing, pour faire se déplacer les objets à une vitesse crédible ;
Exaggeration (exagération), pour donner du caractère et de la personnalité à une animation ;
Solid Drawing (notion de volume), pour que les animations correspondent au résultat souhaité ;
Appeal (charisme), pour rendre les animations plus dynamiques.
Est-ce que vous seriez capable de les expliquer avec vos propres mots ? 🤓
Dans le prochain chapitre, vous découvrirez comment créer des transitions CSS à propriétés multiples.
