--- title: "Que sont les images clés en animation ?" description: "Ni des dessins, ni un storyboard : des points de mesure posés sur une propriété, dont tout l’intervalle est calculé, courbe comprise." canonical: "https://freeaigeneration.com/fr/guides/que-sont-les-images-cles-en-animation/" robots: "noindex" lang: "fr" --- # Que sont les images clés en animation ? Deux valeurs, deux instants, une règle d’interpolation. Les images clés en animation ne sont ni des dessins ni des étapes de storyboard : ce sont des points de mesure posés sur une propriété, et tout ce qui se passe entre eux est calculé. Cette définition a une conséquence pratique. Une animation ne se juge pas au nombre d’images clés qu’elle contient, mais à la façon dont les intervalles sont remplis. C’est là que se joue la différence entre un mouvement qui respire et un mouvement qui coulisse. ## Une valeur enregistrée à un instant Une image clé retient une valeur à un moment donné. Sur la position d’un calque, l’image de départ fixe le point d’origine et celle d’arrivée fixe le point final. Le logiciel lit les deux et calcule les valeurs intermédiaires, image par image. Deux images clés sont le minimum pour obtenir un mouvement. Une seule fige une valeur sans rien créer, et une propriété sans image clé garde sa valeur courante quelle que soit la durée de la composition. Le vocabulaire prête à confusion, parce que le mot « image » désigne aussi une image de film. Une image clé est un point de contrôle dans le temps. Un calque peut en porter des dizaines sans qu’aucune ne corresponde à un dessin. ## Le calcul entre deux points L’interpolation linéaire se calcule de tête, ce qui aide à diagnostiquer un mouvement trop raide. Une valeur qui passe de 0 à 100 en deux secondes avance de 50 unités par seconde. À une seconde, la valeur est 50. À une seconde et demie, elle est 75. Le raisonnement vaut pour une position en pixels, une opacité en pourcentage, une rotation en degrés ou un facteur d’échelle. Son défaut est connu. La vitesse reste constante du début à la fin, donc un objet qui démarre à pleine vitesse et s’arrête d’un coup paraît mécanique, même lorsque les valeurs et la durée sont justes. ## Accélération, maintien, cadence La correction passe par une fonction de timing, presque toujours une courbe de Bézier cubique. Deux poignées décrivent la vitesse au départ et à l’arrivée, et la valeur intermédiaire n’obéit plus à une règle de trois. Une accélération mal réglée produit un mouvement qui hésite, une accélération bien réglée produit un mouvement qui pèse. La différence se voit à la lecture, pas dans les chiffres. Le troisième réglage est le maintien. Une image clé de type hold conserve sa valeur jusqu’à la suivante, sans transition. C’est la bonne réponse pour une bascule d’état. À 24 images par seconde, un maintien de deux images dure 2 ÷ 24 = 0,083 seconde ; un maintien de deux secondes à la même cadence occupe 48 images, ce qui ne produit pas du tout le même rythme. ## Ce qu’un fichier garde de ces courbes Dans un fichier Lottie, l’interpolation n’est pas décrite en mots. Chaque segment porte des poignées de Bézier d’entrée et de sortie, plus un indicateur de maintien que le format note `h`. Un lecteur Lottie n’a donc pas à deviner la courbe, il la lit. C’est aussi pourquoi deux animations visuellement proches peuvent se comporter différemment d’un lecteur à l’autre. La courbe est une donnée, son interprétation dépend du moteur qui l’exécute. Un rendu correct dans un navigateur donné ne garantit pas le même résultat partout. ## Trois idées fausses « Plus d’images clés, plus de fluidité » est faux. La fluidité vient de la cadence et de la courbe. Multiplier les points de contrôle rapproche le mouvement d’une ligne brisée et complique chaque révision. « Les images clés animent les calques » est faux également. Elles animent des propriétés : position, échelle, opacité, couleur ou paramètre d’effet. Le calque n’est qu’un conteneur, ce sont ses propriétés qui portent le temps. « Une animation CSS et des images clés, c’est la même chose » mérite une nuance. Le vocabulaire se ressemble, le modèle diffère. Une animation d’interface est décrite de façon déclarative et exécutée par le moteur de rendu ; une composition garde ses valeurs, ses courbes et ses relations entre calques, et c’est cet ensemble qui reste éditable. ## Vérifier dans l’éditeur L’[éditeur motion design et VFX](/fr/outils/editeur-motion-vfx/) affiche les images clés sur la timeline et la courbe dans l’éditeur dédié. Il propose aussi des expressions, ce qui permet de calculer une valeur par une formule au lieu d’ajouter une seconde image clé, et d’éviter d’empiler les points de contrôle quand la relation est mathématique. Pour suivre la boucle complète, de la première propriété à la sortie du fichier, lisez [Comment créer du motion design en ligne avec des images clés](/fr/guides/comment-creer-du-motion-design-en-ligne-avec-des-images-cles/). Si l’animation est destinée à une interface, [Qu’est-ce qu’un fichier Lottie et comment fonctionne-t-il ?](/fr/guides/quest-ce-quun-fichier-lottie-et-comment-fonctionne-t-il/) montre ce que le format conserve de ces courbes. Un projet se sauvegarde au format `.ecproj`. Les images clés, les courbes et les expressions y restent modifiables ; elles deviennent des données lues par un moteur dès qu’on exporte vers un autre format.