Faragiri
Français

Apprendre le motion designl'image et le son

Ce qui sépare un carton qui tient d'un rectangle qu'on traîne n'est ni le logiciel ni le greffon : c'est la répartition de 480 px sur douze images.

7Sections
7Min de lecture
2Profondeur

Le minutage contre la répartition

Où passent les 480 px, image par image

Deux lignes de même durée et de même distance. La seule différence est le partage de la distance, et c'est la différence entre les deux cartons.

Pixels parcourus à chaque image. Un titre qui entre sur 480 px, douze images, 25 images par seconde.

123456789101112
Linéaire404040404040404040404040
Adouci aux deux bouts102639495660605649392610

Les deux lignes totalisent 480 px. La grille ne dit pas laquelle est juste : un mécanisme entraîné par un moteur est plus proche de la ligne du haut, et l'adoucir serait la même erreur dans l'autre sens.

Un carton qui tient et un rectangle qu'on traîne peuvent contenir la même distance et durer exactement le même temps. La différence est la répartition, et c'est la seule partie du métier qu'un spectateur voit sans rien y connaître.

La médiathèque de Tourcoing annonce sa réouverture, et son titre entre par la gauche sur 480 px. Douze images à 25 images par seconde font 0,48 seconde, ce qui est court, et pourtant deux versions de ces douze images ne racontent pas la même chose.

Les mêmes douze images, partagées deux fois

La première version avance de 40 px à chaque image, c'est la version linéaire. Rien ne démarre, rien ne s'arrête, le titre apparaît en mouvement et disparaît en mouvement, et l'oeil lit un objet tiré par une ficelle. C'est le réglage par défaut de tous les logiciels et c'est pour cette raison qu'on le reconnaît partout.

La seconde répartit la même distance autrement : 10, 26, 39, 49, 56, 60, puis les six mêmes à l'envers. Les deux premières images ne parcourent que 36 px sur 480, le titre semble peser quelque chose au démarrage, il file au milieu, et il se pose au lieu de s'arrêter. Le total est identique et la durée aussi. Seule la répartition a changé.

Ce que cela apprend dépasse le carton. Un intervalle serré se lit comme lent, un intervalle large comme rapide, et c'est l'écart entre deux images qui porte la vitesse, jamais le nombre d'images. Aucune des deux versions n'a raison en soi, et le choix se fait sur ce qui bouge : un titre a une masse, un curseur de chargement n'en a pas, et une aiguille poussée par un moteur en a une qui ne ralentit jamais à l'arrivée.

Une marche, ce sont quatre dessins

Le cycle de marche est le premier exercice de tout le monde et il tient en quatre poses : contact, écrasé, passage, suspension, puis contact de nouveau. Tout ce qui se trouve entre elles est calculé par le logiciel. Un pas vif fait douze images, et les clés tombent sur 1, 4, 7 et 10.

La pose qu'on saute est toujours la même, l'écrasé, celle de l'image 4, où le corps est au plus bas et reçoit le poids. Sans elle le personnage glisse : les jambes bougent, le bassin reste à hauteur constante, et la marche devient un patinage que personne ne sait nommer mais que tout le monde voit. Au-delà de vingt images, le mouvement se lit comme lent, quelle que soit la qualité des quatre poses.

Un pas

Les quatre poses dont une marche est faite

Tout ce qui se trouve entre elles est calculé. Chacune des quatre est une décision, et celle qu'on saute est toujours la même.

douze images

  • 01ContactImage 1. Les deux pieds au sol, le poids sur le point de passer
  • 02ÉcraséImage 4. Le point le plus bas, où le poids arrive. Celle qu'on saute
  • 03PassageImage 7. La jambe libre double l'autre, le corps est à plat
  • 04SuspensionImage 10. Le point haut, poussé par la jambe qui se tend
  1. 01ContactImage 1. Les deux pieds au sol, le poids sur le point de passer
  2. 02ÉcraséImage 4. Le point le plus bas, où le poids arrive. Celle qu'on saute
  3. 03PassageImage 7. La jambe libre double l'autre, le corps est à plat
  4. 04SuspensionImage 10. Le point haut, poussé par la jambe qui se tend

Le cycle est le mobilier, pas le jeu. Un personnage peut tenir les quatre poses correctement et rester un mannequin, puisque rien dans la boucle ne dit où il va ni pourquoi.

Rien ne s'arrête d'un coup

Un objet réel a des parties, et ses parties ne sont pas d'accord. Quand le titre de la médiathèque se pose, le second élément part deux ou trois images avant que le premier soit arrêté, et le décalage suffit à sortir de la sensation de bloc. Sur un personnage la même règle s'appelle autrement : sa manche continue pendant trois images et revient en deux, et ce léger retour est ce qui donne au tissu son poids.

C'est aussi le décalage qui distingue une animation d'un diaporama de propriétés. Quatre calques qui démarrent et s'arrêtent sur la même image se lisent comme une seule forme, même s'ils sont quatre. Deux images de décalage entre eux coûtent deux images de travail et transforment la lecture.

Là où ça bloque ici : un mot de métier, un abonnement, une capitale accentuée

Motion designer est un intitulé de poste en France, avec ses annonces et ses écoles, et cela produit un blocage précis : on arrive en voulant un portfolio, donc on apprend le logiciel nommé dans les annonces, et on ne travaille jamais la répartition. Un carton magnifiquement composé dont tous les mouvements sont linéaires trahit exactement cela : le logiciel est tenu, et la répartition n'a jamais été regardée.

Le second blocage est financier et il est propre à un marché qui refuse l'abonnement. After Effects n'a aucun chemin gratuit et aucune licence perpétuelle, et beaucoup en concluent que le métier n'est pas ouvert sans cette dépense mensuelle. C'est faux, et le dire est le premier service à rendre : Fusion est livré dans la version gratuite de DaVinci Resolve et fait ce travail en entier.

Le troisième blocage est typographique et personne ne l'écrit, alors qu'il ne se pose que dans cette langue. Le titre de la médiathèque, RÉOUVERTURE DE LA MÉDIATHÈQUE, fait vingt-neuf signes contre dix-sept pour son équivalent anglais, et un carton dont le rythme a été réglé sur une maquette anglaise déborde du cadre ou lit trop vite. Trois règles couvrent la suite.

  • Une capitale accentuée dépasse la hauteur de capitale, donc un masque calé sur les capitales coupe l'accent du É.
  • La cédille du Ç descend sous la ligne de base, donc un carton qui révèle son titre par le bas fait apparaître l'accent avant la lettre.
  • Le clavier AZERTY classique n'a pas de É direct, ce qui explique la quantité de cartons français en majuscules non accentuées.

Sur quel barreau se tient la pièce en cours

Cinq barreaux suffisent à situer n'importe quelle pièce en cours, et l'intérêt n'est pas de les gravir mais de savoir sur lequel on est arrêté. Le premier est que cela bouge, une valeur à l'image 1 et une autre à l'image 12. Le deuxième est que cela démarre et s'arrête comme un objet, ce qui veut dire l'éditeur de courbes et non l'accélération par défaut. Le troisième est que les parties se désaccordent.

Les deux derniers sont ceux qui ne s'achètent avec aucun greffon : le poids, c'est-à-dire les images dépensées avant le mouvement à annoncer ce qui va arriver, puis l'intention, où l'animation cesse d'être de la physique et devient du jeu. Le quatrième barreau est celui qui sépare une animation d'un habillage, et c'est le premier que l'on remarque sans savoir le nommer. Les principes de l'animation sont l'endroit où les deux premiers barreaux se travaillent en entier.

L'ordre d'apprentissage

Cinq barreaux, et celui où la pièce en cours est bloquée

Chaque barreau suppose celui du dessous, donc une pièce au compositing impeccable et aux courbes linéaires se tient sur le premier avec des chaussures chères.

  1. 05Cela veut quelque choseOù l'animation cesse d'être de la physique et devient du jeu
  2. 04Cela pèseLes images dépensées avant le mouvement, à annoncer ce qui va arriver
  3. 03Les parties ne sont pas d'accordDeux ou trois images de décalage, et une manche qui arrive en retard
  4. 02Cela démarre et s'arrête comme un objetLa répartition, et l'éditeur de courbes plutôt que l'accélération par défaut
  5. 01Cela bougeUne valeur à l'image 1 et une autre à l'image 12

Les barreaux ne sont pas un programme et personne ne se tient sur l'un d'eux en permanence. Une même minute peut être au quatrième pour ses titres et au premier pour son personnage.

Ce qu'on ouvre en 2026

After Effects reste la référence du poste et il faut dire son prix honnêtement : abonnement mensuel en euros, aucune licence perpétuelle, et il s'arrête le mois où l'on cesse de payer. Il a remplacé les bancs de compositing matériels, ce qui explique une interface organisée autour de calques empilés plutôt que d'un graphe. After Effects détaille ce que ces calques permettent et ce qu'ils coûtent.

Fusion, livré dans DaVinci Resolve, est gratuit et raisonne par noeuds au lieu de calques, ce qui est déroutant une quinzaine de jours et plus clair ensuite sur une composition qui grossit. Lottie est gratuit lui aussi et sert autre chose : il transporte un mouvement vectoriel dans une application sous forme de données plutôt que de pixels, donc le texte reste du texte, se traduit, et une chaîne française plus longue ne déborde plus d'une image exportée. C'est le seul des trois qui règle le problème de la capitale accentuée à la source.

Par où entrer, et ce qui reste ouvert

Cinq groupes tiennent sous cette page et deux d'entre eux paient dès la première semaine. Le graphisme animé est le travail qui se vend le plus en France, parce que chaque collectivité, chaque médiathèque et chaque marque a des cartons à fabriquer. L'animation de personnage est le plus lent et le plus formateur, puisque les quatre poses ci-dessus n'y pardonnent rien.

Deux détours valent le déplacement. Les effets visuels sont l'endroit où un élément fabriqué doit se poser dans une image tournée, et cette image vient de la vidéo, dont la contrainte de deux images est exactement la même. Quand l'élément fabriqué a du volume et une lumière propre, c'est la 3D qui le produit, et elle arrive avec ses propres délais.

Reste la question que ce sujet ne peut pas trancher tout seul. Un mouvement juste dans une interface n'est pas un mouvement juste dans un carton : il doit informer d'un changement d'état en moins d'un tiers de seconde et ne jamais se faire remarquer deux fois, ce qui inverse une partie de ce qui précède. Cela se décide du côté du design d'interface, et l'oublier produit des applications où chaque bouton fait un petit spectacle. Ce que cette page laisse ouvert plus haut, ce que ces mouvements racontent ensemble, se traite dans l'image et le son.

À côté

Au-dessus