Animation motion design : ce qui sépare un mouvement juste d'un mouvement raté

Animation et motion design : la différence, une fois pour toutes

L'animation est le terme général : toute technique qui donne l'illusion du mouvement à partir d'images fixes. Elle couvre le dessin animé, la pâte à modeler, l'animation 3D de personnages, les effets visuels.

Le motion design est une branche de l'animation, définie par son intention : transmettre une information dans un cadre professionnel. Il anime des formes, des textes, des schémas, des interfaces, rarement des personnages, et jamais pour raconter une fiction.

Conséquence concrète pour vous : les compétences ne sont pas les mêmes. Un animateur de personnages excelle dans le poids et l'anticipation d'un geste ; un motion designer excelle dans la hiérarchie de l'information et le rythme d'une démonstration. Demander à l'un le travail de l'autre donne, dans les deux sens, un résultat décevant. C'est pourquoi nous disons franchement quand un projet relève d'un studio d'animation et non du nôtre.

Six principes d'animation qui s'appliquent à l'écran

Les principes classiques de l'animation ont été formulés pour le dessin animé. Six d'entre eux gouvernent encore tout ce que nous fabriquons.

1. L'accélération et le ralentissement. Rien ne démarre ni ne s'arrête d'un coup dans le monde réel. Un mouvement à vitesse constante est immédiatement perçu comme artificiel, même par un spectateur qui ne saurait pas dire pourquoi.
2. L'anticipation. Un objet recule légèrement avant d'avancer. Deux à trois images suffisent : c'est ce qui donne l'impression que l'objet a une intention.
3. Le suivi et le chevauchement. Les parties souples d'un objet arrivent après le corps principal. Sur une interface, une carte et son ombre ne s'arrêtent pas exactement au même moment.
4. Les arcs. Un objet qui traverse l'écran suit une courbe, jamais une ligne droite parfaite, sauf s'il est mécanique — auquel cas la ligne droite raconte justement sa nature mécanique.
5. La mise en scène. Une seule chose importante bouge à la fois. Quand tout bouge, rien n'est vu.
6. L'exagération mesurée. Un mouvement légèrement dépassé puis rattrapé paraît plus naturel qu'un mouvement exact. Dépassement de 3 à 8 % : au-delà, cela devient un effet.

Les courbes d'accélération, sans jargon

Une courbe d'accélération décrit comment une valeur passe d'un point à un autre : lentement puis vite, vite puis lentement, ou régulièrement. C'est le réglage le plus important de tout le métier, et le plus invisible.

Entrée douce, sortie sèche : l'objet démarre lentement et s'arrête net. Utile pour une apparition qui doit être remarquée.

Entrée sèche, sortie douce : l'objet part vite puis se pose. C'est la courbe des interfaces, celle qui donne l'impression que le système répond immédiatement.

Les deux adoucies : la courbe la plus utilisée, celle des mouvements de caméra et des déplacements longs.

Le ressort : l'objet dépasse sa position puis revient. Excellent pour les petits éléments d'interface, insupportable au-delà de deux ou trois éléments simultanés.

Nous documentons ces courbes dans la fiche technique livrée avec chaque projet, en valeurs exploitables par vos développeurs. Une équipe technique peut ainsi reproduire les mêmes sensations dans les parties du produit que nous n'avons pas animées, ce qui donne une cohérence rare.

Les durées de référence, en millisecondes

Le timing ne se devine pas : il se mesure. Voici les valeurs que nous appliquons par défaut, avant tout ajustement.

Deux erreurs classiques : des transitions d'interface trop longues, qui donnent une impression de lenteur du produit, et des décalages de liste trop marqués, qui font attendre le dernier élément. Au-delà de 500 ms, une transition d'interface devient un obstacle.

Les sept techniques que nous employons

• L'interpolation. On fixe un état de départ et un état d'arrivée, la machine calcule le reste. C'est la base de presque tout le motion design.
• L'image par image. Chaque image est dessinée. Cher, lent, mais irremplaçable pour un trait vivant ou une texture artisanale.
• Le morphing de formes. Une forme se transforme en une autre de façon continue. Excellent pour relier deux idées sans coupure — un euro qui devient une horloge, par exemple.
• Les masques et les révélations. On dévoile progressivement un élément derrière une forme. C'est la technique la plus économique et la plus lisible pour faire apparaître du texte ou un graphique.
• Les systèmes de particules. Des centaines d'éléments animés par une règle commune. Utile pour représenter un flux, une donnée massive, une dispersion.
• La typographie cinétique. Le texte devient l'image. Pertinent quand la parole est le sujet : un manifeste, une citation, une donnée forte.
• L'animation de personnage. La plus coûteuse : il faut concevoir le personnage, préparer ses articulations, puis l'animer. Une journée de préparation avant le premier mouvement.

Animer une interface : des règles différentes

Une animation d'interface n'a pas le droit de faire attendre. Elle sert trois fonctions précises, et rien d'autre.

Confirmer. L'utilisateur a agi, le système répond. Un bouton qui se transforme en coche confirme mieux qu'un message d'alerte.

Orienter. Un panneau qui entre par la droite indique d'où il vient et où il retournera. La direction du mouvement est une information de navigation.

Faire patienter honnêtement. Une attente animée ne rend pas le système plus rapide, mais elle rend l'attente supportable — à condition qu'elle reflète un état réel. Une barre de progression qui n'avance pas vraiment est un mensonge d'interface.

Ce qui est interdit : animer pour décorer, animer deux éléments importants en même temps, dépasser 500 ms sur une transition courante, et bloquer une action pendant une animation. Les animations d'interface se livrent en fichiers légers, avec leurs durées et leurs courbes documentées.

Dans quel format une animation est livrée

Le choix se fait selon l'endroit où l'animation vivra, jamais selon l'habitude du prestataire. Une agence qui livre systématiquement des fichiers vidéo pour des micro-interactions n'a pas compris le sujet.

Mouvement réduit : une obligation, pas une option

Une partie des utilisateurs demande à leur système de limiter les animations, souvent pour des raisons médicales : troubles vestibulaires, migraines, sensibilité au défilement animé. Les navigateurs transmettent cette préférence, et il faut la respecter.

Concrètement, chaque animation que nous livrons possède un état final fixe, lisible, atteint sans mouvement. Les animations décoratives disparaissent, les animations porteuses d'information sont remplacées par une transition courte et sobre. Ce travail prend une demi-journée sur un projet complet, et il a un effet secondaire utile : il garantit que votre page reste correcte si un script ne se charge pas.

Nous évitons également les clignotements rapides et les mouvements latéraux de grande amplitude, qui peuvent provoquer un malaise. Une animation réussie n'est pas seulement belle : elle est supportable par tout le monde.

Comment juger une animation qu'on vous présente

1. Coupez le son. Si la vidéo reste compréhensible, l'animation fait son travail.
2. Regardez une seule zone de l'écran. Si plusieurs éléments importants bougent en même temps, l'attention est mal dirigée.
3. Arrêtez l'image au hasard. Chaque arrêt doit donner une composition lisible. Une image figée bancale signale une animation qui masque un défaut de mise en page.
4. Comptez les idées. Une idée toutes les quatre à six secondes. Plus dense, on décroche ; plus lent, on s'ennuie.
5. Vérifiez les arrêts. Les objets s'arrêtent-ils avec du poids, ou pilent-ils ? C'est le détail qui sépare un travail professionnel d'un travail approximatif.

Combien coûte une animation

Le contenu exact de chaque offre, les packs et les offres d'essai figurent sur la page tarif motion design.

Le son fait la moitié du mouvement

C'est l'observation la plus contre-intuitive du métier : ajouter un son court sur un mouvement le rend plus rapide, plus net et plus satisfaisant, sans toucher à une seule image. Un même déplacement de carte paraît mou sans son et précis avec un léger claquement au moment de l'arrêt.

Trois familles de sons suffisent dans une vidéo professionnelle. Les sons de mouvement, très courts, qui accompagnent un déplacement ou une apparition. Les sons de confirmation, qui marquent la fin d'une action — un clic doux, une note tenue. Les nappes d'ambiance, qui remplissent le fond et donnent une continuité entre les plans.

La règle de dosage : un son par mouvement important, jamais deux sons simultanés, et un niveau qui reste sous la voix off. Une vidéo où l'on entend consciemment le sound design est une vidéo mal mixée. Le budget correspondant représente environ 10 % du projet et une bien plus grande part de l'effet ressenti.

Dernier point, souvent oublié : la moitié des vues se fait sans son. Le sound design améliore, il ne porte jamais l'information. Si l'on perd le sens en coupant le son, le problème n'est pas le mixage, c'est l'animation.

Animer pour un écran de téléphone

Une animation conçue sur un écran de vingt-sept pouces et regardée sur six pouces perd la moitié de ce qu'elle raconte. Nous travaillons donc avec une fenêtre de contrôle à taille réelle ouverte en permanence à côté du plan de travail.

• Les tailles de texte. Un texte doit rester lisible à la taille d'une vignette. En pratique, cela interdit les paragraphes à l'écran et limite à cinq ou six mots par plan.
• Les détails fins. Une ligne d'un pixel disparaît à la compression. Les éléments graphiques sont épaissis pour les versions mobiles.
• Les mouvements rapides. Sur un petit écran, un déplacement rapide devient une tache. Les vitesses sont réduites d'environ 20 % sur les versions verticales.
• Les marges de sécurité. Les plateformes recouvrent le haut et le bas de l'image de leurs propres éléments : rien d'important ne doit s'y trouver.
• Le recadrage. Un passage automatique du 16/9 au 9/16 coupe toujours quelque chose. Chaque plan est recadré à la main.

Ce qu'est un fichier « animable »

Une grande partie du travail d'animation se joue avant l'animation, dans la préparation des éléments graphiques. Un fichier bien préparé fait gagner une journée par projet ; un fichier mal préparé la fait perdre.

Concrètement, chaque élément destiné à bouger doit être séparé des autres, nommé, et construit de façon à pouvoir être déformé sans se casser. Un personnage dont le bras doit se lever ne peut pas être dessiné d'un seul tenant. Une interface dont les cartes doivent s'assembler ne peut pas être une image aplatie. Un graphique dont la courbe doit se tracer doit être un tracé, pas une image de courbe.

C'est aussi ce qui explique une frustration fréquente : vous envoyez une belle illustration à animer, et l'animateur demande le fichier de travail. Sans lui, il faut redécouper le dessin, ce qui revient souvent à le refaire. Quand nous produisons les illustrations nous-mêmes, cette question ne se pose pas : elles sont dessinées en sachant déjà comment elles bougeront.

La carte des temps d'une vidéo de soixante secondes

Le rythme d'une vidéo ne s'improvise pas au montage : il est décidé à l'écriture et vérifié sur l'animatique. Voici la structure temporelle que nous utilisons le plus souvent.

Le point important est le silence : une à deux secondes sans mouvement ni parole, juste avant la solution. C'est la seule pause de la vidéo, et c'est le moment où l'attention remonte. Les vidéos qui enchaînent sans respiration paraissent longues même quand elles sont courtes.