Comment créer du motion design en ligne avec des images clés

Une composition qui fonctionne tient rarement à une technique secrète. Elle tient à une boucle de travail répétée avec méthode, et créer du motion design en ligne avec des images clés ne fait pas exception. Une propriété, deux valeurs, une durée, puis une courbe à régler.

L’éditeur motion design et VFX rassemble les outils de ce travail dans un onglet de navigateur, sans compte à créer : calques, images clés, éditeur de courbes, masques, calques de forme, animateurs de texte, expressions et caméras 3D, avec la timeline, la prévisualisation et la file de rendu.

Choisir la propriété avant la première image clé

Avant de poser quoi que ce soit, décidez quelle propriété doit bouger, et elle seule. Position, opacité, échelle, rotation, épaisseur de contour, paramètre d’un animateur de texte : chaque choix produit un mouvement différent et un nombre différent d’images clés à régler.

Un calque qui se déplace, tourne et change d’opacité en même temps demande trois jeux d’images clés, souvent désynchronisés. Commencez par une propriété, vérifiez le mouvement en lecture, puis ajoutez la suivante.

Décidez aussi de la durée et de la destination. Une boucle de trois secondes pour une interface et un carton de dix secondes pour une vidéo n’ont ni la même densité de mouvement ni le même format de sortie.

La boucle en quatre gestes

Le cycle est identique quel que soit le panneau ouvert. Placez la tête de lecture au début, activez l’image clé sur la propriété choisie, déplacez la tête de lecture à la fin, puis changez la valeur. L’éditeur inscrit la seconde image clé et interpole entre les deux.

Entre ces quatre gestes, un seul réglage compte vraiment, l’interpolation. Tant que vous ne la touchez pas, elle reste linéaire, et un mouvement linéaire trahit son réglage par défaut : rien ne ralentit à l’arrivée.

Ajoutez ensuite les images intermédiaires seulement quand le mouvement l’exige, pour un passage derrière un objet, un rebond ou une pause. Chaque image clé ajoutée devient une contrainte supplémentaire si la durée change.

Ce que la courbe change au mouvement

L’éditeur de courbes transforme l’interpolation en courbe que vous dessinez. Sur un déplacement de 0 à 800 pixels en deux secondes, l’interpolation linéaire donne 400 pixels à une seconde et 200 pixels à une demi-seconde. C’est prévisible, et c’est exactement ce qui rend le mouvement mécanique.

Avec une courbe qui accélère puis ralentit, la valeur à une seconde ne vaut plus 400. Elle dépend de la poignée que vous tirez. Le mouvement paraît plus lourd au départ et plus doux à l’arrivée, alors que la durée et la valeur finale n’ont pas changé.

Deux réflexes suffisent pour débuter : une entrée qui accélère, une sortie qui ralentit, et un palier quand l’objet doit marquer un temps.

Images clés et images par seconde

La timeline compte en images, pas en secondes. Deux secondes à 30 images par seconde représentent 60 images. Une image clé toutes les 15 images revient à quatre images clés par seconde.

Ce calcul explique beaucoup d’à-coups. Un mouvement de 0,2 seconde ne contient que six images à 30 images par seconde, ce qui laisse peu de place à une accélération crédible. Dix secondes avec deux images clés seulement demandent, à l’inverse, une courbe très travaillée.

Un maintien se règle avec une image clé de type hold, qui garde sa valeur jusqu’à la suivante sans interpolation. C’est le geste correct pour un changement d’état ou une apparition franche. Que sont les images clés en animation ? reprend la définition et le calcul du temps si la notion mérite d’être reposée avant de composer.

Trois erreurs qui coûtent du temps

La première consiste à ajouter des images clés pour corriger une courbe. Le mouvement devient plus dense et plus difficile à modifier, sans devenir plus juste.

La deuxième consiste à livrer sans avoir regardé la composition en lecture réelle, à la bonne cadence et sans les repères de la timeline. Les à-coups et les changements de rythme ne se voient pas en mode image par image.

La troisième consiste à compter sur un projet de motion design natif. L’éditeur n’ouvre pas les fichiers .aep et .aepx, et les plug-ins de ce logiciel ne s’y exécutent pas. Le projet se sauvegarde au format .ecproj et se reprend dans le même outil.

Sortir la composition

La file de rendu accepte plusieurs formats de sortie, comme MP4, WebM, GIF ou une suite d’images. L’export Lottie produit de son côté un fichier JSON vectoriel destiné à une interface.

Le choix se joue sur la destination, pas sur la préférence. Lottie, GIF ou MP4 : quel format d’animation choisir ? compare les trois sur ce terrain. Dans tous les cas, regardez le fichier produit avant de l’envoyer : une liste de sorties disponibles n’est pas une garantie de rendu identique à la prévisualisation.

Un dernier point pratique. Le service worker sert l’éditeur depuis le cache après le premier chargement, donc la page se rouvre hors ligne. Ce confort n’est pas une sauvegarde : un projet non enregistré reste non enregistré.