Comment modifier l’interpolation d’échelle sans déformer les proportions d’un personnage

L’échelle contrôle la taille selon chaque axe. Lorsque les axes horizontal et vertical utilisent le même multiplicateur, le personnage conserve son rapport hauteur-largeur. Lorsque ces multiplicateurs diffèrent, sa forme change. La documentation technique de MDN décrit cette distinction comme une mise à l’échelle uniforme ou non uniforme. MDN : fonction CSS scale()

L’interpolation contrôle la progression d’une valeur animée entre les images clés. Supposons que les deux axes commencent à 80 % et finissent à 100 %. Si l’échelle horizontale atteint 96 % alors que l’échelle verticale est encore à 88 %, le personnage devient temporairement plus large par rapport à sa hauteur. Les extrémités peuvent sembler correctes, alors que la transition étire visiblement le personnage.

Pour un personnage qui n’est pas déformé au départ, des valeurs d’échelle X et Y identiques tout au long de la transition préservent ses proportions. Plus généralement, conservez le rapport de référence approuvé : si un élément préparé commence volontairement avec des valeurs d’échelle différentes, multipliez-les toutes les deux par le même facteur variable. Ne remplacez pas automatiquement ces valeurs de référence par des nombres identiques.

Enregistrez une copie de travail et repérez la transformation qui contrôle l’ensemble du personnage. Pour ce guide, commencez avec un calque de personnage 2D unique dont l’apparence est déjà correcte à sa taille de référence. Si l’illustration comporte plusieurs éléments, établissez d’abord une transformation commune pour le changement de taille global ; sinon, modifier uniquement le corps peut changer sa taille par rapport au visage ou aux accessoires.

Dans After Effects, sélectionnez le calque du personnage et appuyez sur S pour afficher l’échelle. Activez Conserver les proportions, l’icône située à côté des valeurs d’échelle, lorsque vous saisissez des changements de taille proportionnels. Adobe décrit spécifiquement cette commande pour les modifications d’échelle liées. Adobe : Ajuster les propriétés des calques dans After Effects

Notez les valeurs de départ et de fin approuvées, ainsi que les heures des images clés, avant toute modification. Examinez aussi les images clés intermédiaires existantes. Considérez la commande de liaison comme une aide à l’édition et vérifiez les valeurs réelles tout au long de l’animation au lieu de supposer que son activation a corrigé les modifications précédentes.

Choisissez le point d’origine de l’agrandissement avant de peaufiner le timing. Dans After Effects, le calque est mis à l’échelle autour de son point d’ancrage. Un point d’ancrage centré convient à un agrandissement autour du centre ; un point d’ancrage en bas au centre peut convenir à un personnage qui doit rester visuellement ancré au sol pendant qu’il grandit. Adobe : Points d’ancrage des calques

Utilisez le graphique de valeurs pour examiner la taille et le graphique de vitesse pour façonner la rapidité des changements de taille. Adobe définit un graphique de valeurs comme la représentation des valeurs d’une propriété dans le temps, et un graphique de vitesse comme celle de leur taux de variation. Sélectionnez explicitement le graphique voulu dans les options de l’Éditeur de graphiques au lieu de vous fier à l’affichage par défaut. Adobe : Principes de base de l’animation dans After Effects

Dans le graphique de valeurs, examinez ensemble toutes les composantes d’échelle pertinentes. Lorsque les valeurs de référence sont identiques, leurs courbes doivent coïncider pendant toute une animation à échelle uniforme. Un écart entre elles indique qu’il faut examiner l’image correspondante. Si les valeurs de référence approuvées sont différentes, comparez les variations proportionnelles au lieu de vous attendre à ce que les courbes se superposent.

Utilisez le graphique de vitesse pour modifier l’accélération ou la stabilisation tout en conservant les mêmes tailles aux images clés. Revenez au graphique de valeurs après chaque ajustement significatif. Vous disposez ainsi de deux contrôles distincts : vérifier si le timing est satisfaisant et si le rapport de taille reste correct.

Utilisez cet exemple contrôlé : un personnage 2D aux proportions correctes passe de 80 %, 80 % à 100 %, 100 % en 12 images. Il s’agit de réglages donnés à titre d’exemple, et non d’une durée ou d’une plage de tailles imposée.

1. Sélectionnez le calque du personnage, affichez l’échelle et activez Conserver les proportions.
2. Réglez la première image clé d’échelle sur 80 %, 80 %, puis la seconde, 12 images plus tard, sur 100 %, 100 %.
3. Sélectionnez les deux images clés d’échelle et appliquez Animation > Assistant d’image clé > Lissage de vitesse.
4. Ouvrez l’Éditeur de graphiques et choisissez Modifier le graphique de vitesse.
5. Sélectionnez ensemble les clés d’échelle. Ajustez les composantes pertinentes de façon cohérente, par petites modifications des poignées.
6. Passez à Modifier le graphique de valeurs et examinez les valeurs des axes entre les clés.

Le lissage de vitesse produit une transition de départ avec une vitesse nulle aux clés sélectionnées. Pour des ajustements plus précis, utilisez Animation > Vitesse d’image clé afin de modifier la vitesse et l’influence entrantes ou sortantes. Adobe explique que déplacer horizontalement les poignées de vitesse modifie leur influence sur les clés voisines. Adobe : Appliquer et contrôler les variations de vitesse dans After Effects

Pour cet exemple, essayez un agrandissement rapide suivi d’une stabilisation plus longue. Ajustez l’influence entrante à la dernière clé, prévisualisez le résultat et comparez-le à l’original. Pour cette étape, gardez fixes les tailles aux extrémités et la durée de 12 images afin d’évaluer l’effet du seul changement d’interpolation.

Si le personnage s’étire après un ajustement, annulez cette modification et vérifiez quelles composantes étaient sélectionnées. Vérifiez à nouveau les valeurs intermédiaires et celles aux extrémités avant de poursuivre. Le tutoriel de l’Éditeur de graphiques d’Adobe montre comment sélectionner des clés, afficher leurs poignées, ajuster le graphique de vitesse et prévisualiser le résultat. Adobe : Créer un mouvement dynamique entre des images clés avec l’Éditeur de graphiques

Utilisez un test de variation proportionnelle lorsque les courbes sont difficiles à comparer. À l’image choisie, divisez l’échelle actuelle de chaque axe par sa valeur de référence approuvée. Pour un changement de taille uniforme, les résultats doivent être identiques. Ce test découle directement de l’application d’un même multiplicateur aux deux dimensions.

État	Échelle X	Échelle Y	X ÷ référence X	Y ÷ référence Y	Interprétation
Valeurs de référence approuvées	80 %	80 %	1,00	1,00	Forme de référence
Image intermédiaire correcte	92 %	92 %	1,15	1,15	Proportions préservées
Image intermédiaire déformée	96 %	88 %	1,20	1,10	La croissance horizontale est plus importante
Valeurs finales approuvées	100 %	100 %	1,25	1,25	Proportions de référence rétablies

Dans l’exemple déformé, le rapport largeur-hauteur est multiplié par 96 ÷ 88 ≈ 1,091. Le personnage est donc environ 9,1 % plus large par rapport à sa hauteur qu’aux valeurs de référence. Ces chiffres illustrent le calcul ; ils ne proviennent pas des mesures d’une animation particulière.

Avec des valeurs de référence volontairement différentes, par exemple 120 % et 100 %, un agrandissement uniforme de 1,10 donne 132 % et 110 %. Les deux axes ont augmenté de 10 %, et l’apparence approuvée est donc préservée. Remplacer ces valeurs finales par 132 % et 132 % modifierait les proportions existantes.

Avant de modifier à nouveau l’interpolation, diagnostiquez le symptôme visible. Figez une image pour distinguer un changement de forme d’un déplacement ou d’une modification des détails de l’image.

Symptôme	Prochaine vérification
La largeur et la hauteur divergent pendant la transition	Comparez les valeurs des axes, les clés intermédiaires et les poignées de courbe à cet instant.
Le personnage entier se déplace pendant qu’il grandit	Examinez le point d’ancrage et l’animation de position.
La taille relative d’une seule partie du personnage change	Examinez la transformation de cette partie et celle qui s’applique au personnage entier.
Le personnage devient plus grand que prévu avant de se stabiliser	Examinez le graphique de valeurs pour repérer un dépassement de la taille cible.
La silhouette conserve ses proportions, mais les contours deviennent pixelisés	Examinez la résolution de l’illustration source et le facteur d’agrandissement.

Un dépassement temporaire de taille peut préserver les proportions si les deux axes dépassent leur valeur cible de la même façon. Déterminez séparément si cette taille supérieure doit faire partie de l’animation. Si le brief prévoit un mouvement simple d’agrandissement suivi d’un arrêt, gardez les valeurs d’échelle dans la plage choisie entre le début et la fin.

L’agrandissement d’une image matricielle peut aussi modifier l’apparence de l’illustration sans changer ses proportions. Adobe indique qu’un agrandissement important des calques matriciels peut produire des pixels irréguliers, tandis qu’une réduction peut adoucir l’image. Modifier l’interpolation ne corrigera pas ce problème de détails de la source. Adobe : Mettre un calque à l’échelle ou le retourner

Examinez l’image de départ, plusieurs images intermédiaires, celle où la taille est maximale et l’image finale. Vérifiez plus fréquemment là où l’échelle change le plus vite ou là où la forme semble varier. L’échantillonnage d’images aide à repérer les problèmes ; l’inspection des courbes complètes permet de détecter les différences entre ces échantillons.

Prévisualisez ensuite l’animation à la cadence prévue. Le tutoriel de l’Éditeur de graphiques d’Adobe recommande de consulter le panneau Infos pour vérifier si la prévisualisation est en temps réel, car une prévisualisation incomplète peut compliquer l’évaluation du timing. Adobe : Prévisualiser et ajuster l’animation dans l’Éditeur de graphiques

Terminez lorsque le personnage atteint les tailles prévues, conserve ses proportions approuvées pendant toute la transition et accélère puis se stabilise comme souhaité. Utilisez un multiplicateur d’échelle commun comme principe directeur, servez-vous des graphiques pour examiner son timing et vérifiez la forme intermédiaire avant de valider la modification.

• Adobe — Ajuster les propriétés des calques dans After Effects
• Adobe — Principes de base de l’animation dans After Effects
• Adobe — Appliquer et contrôler les variations de vitesse dans After Effects
• Adobe — Créer un mouvement dynamique entre des images clés avec l’Éditeur de graphiques
• MDN — fonction CSS scale()