Le guide complet de l’accélération en animation

Qu’une animation soit simple ou surréaliste, l’essentiel est qu’elle reste crédible. Ainsi, lorsque vous recréez des mouvements en animation, le public attend un certain degré d’authenticité. En animation, l’accélération désigne une méthode de transition qui modifie les mouvements pour les rendre moins prononcés et moins saccadés. Dans une application comme After Effects, Premiere Pro ou Animate, vous pouvez agir sur l’accélération via des images clés placées dans la fenêtre de montage. Nous vous montrons dans ce guide comment procéder.

Femme designer visualisant du contenu sur deux écrans

Ce que vous apprendrez : 

Qu’est-ce que l’accélération en animation ?

Dans le domaine de l’animation, l’accélération confère un mouvement naturel et authentique à l’action. Une animation linéaire (sans accélération) se déroule mécaniquement, sans variation de vitesse. Comme une telle constance n’existe pas dans la réalité, nous percevons le mouvement comme artificiel. 

 

Dans la vie réelle, les objets ne se mettent pas en mouvement et ne se maintiennent pas à la même vitesse d’un bout à l’autre de leur parcours. Ils démarrent lentement, prennent progressivement de la vitesse, puis ralentissent avant de s’arrêter. 

 

C’est un peu comme de conduire une voiture : vous quittez une position stationnaire, vous accélérez et maintenez votre vitesse pendant un certain temps, puis, à la fin du trajet, vous ralentissez jusqu’à vous immobiliser. 

 

Ces actions sont représentées par les principales fonctions d’accélération que vous êtes susceptible de rencontrer dans votre travail d’animation. Ainsi, les mouvements paraissent bien plus naturels.

 

  • L’accélération progressive (ease-in) consiste à démarrer l’animation lentement, puis à accélérer le mouvement avant qu’il ne s’arrête. 
  • À l’inverse, l’accélération dégressive (ease-out) consiste à démarrer rapidement et à ralentir à la fin.
  • L’accélération progressive-dégressive (ease-in-out) est une combinaison des deux méthodes précédentes. 
Bande dessinée représentant une femme dans trois poses différentes

Comment fonctionne l’accélération ?

Lorsque vous animez un objet, vous devez définir des marques appelées images clés pour indiquer les points de départ et d’arrivée du mouvement. 

Comme son nom l’indique, une image clé est une image importante qui définit une valeur dans le temps et permet au système de calculer comment toutes les images intermédiaires doivent fonctionner. 

En substance, les images clés donnent des instructions qui modifient la valeur de toute animation se produisant entre elles. L’accélération que vous choisissez d’utiliser influe sur le mouvement de l’objet en contrôlant son animation entre ces images clés.  

 

Quels sont les avantages de l’accélération ?

L’accélération est un moyen de modifier le mouvement pour influencer la réaction du spectateur. Voici quelques-uns des avantages de cette technique :  

 

  • C’est humain. Le mouvement linéaire n’existe pas dans la nature. Lorsqu’il est utilisé dans une animation, le rendu est plat et saccadé, et le spectateur finit par décrocher. Le réalisme et la précision sont essentiels pour que les mouvements de vos images clés soient pertinents et crédibles. 
  • C’est réaliste. L’accélération donne au spectateur le temps de comprendre ce qui se passe. Elle garantit un rythme fluide qui donne une impression de naturel et de réalisme, entretenant ainsi l’illusion du spectateur (la « suspension volontaire de son incrédulité »). 
  • C’est vivant. L’accélération peut également servir à créer un effet comique ou spectaculaire. Par exemple, les animations de type « ease-in » commencent lentement et se terminent rapidement. Imaginez Vil Coyote s’élançant d’une falaise, puis restant suspendu en l’air, avant de basculer brusquement dans le vide. Dans une animation par ordinateur, il faudrait recourir à une accélération pour obtenir un effet de ce type. 
  • C’est personnalisable. Vous pouvez utiliser toute une série d’effets d’accélération différents, certains commençant rapidement, d’autres lentement, d’autres encore décélérant à la fin. Quel que soit le résultat recherché, vous pouvez en principe créer l’effet correspondant avec une accélération.

 

Comment appliquer un effet d’accélération dans After Effects ?

After Effects est l’application idéale pour les effets spéciaux et la postproduction. Voici comment appliquer une accélération à votre animation. 

 

  1. Dans votre animation ouverte, placez le repère d’instant au début du montage. Les images clés sont définies comme images clés linéaires de base, celles qui maintiennent une vitesse constante tout au long de l’animation. 

  2. Cliquez sur la première image clé, cliquez avec le bouton droit de la souris et chioisissez Assistant d’image clé dans le menu contextuel. 

  3. Faites défiler les options jusqu’à ce que Lissage de vitesse, Lissage à l’approche et Lissage à l’éloignement s’affichent. 

  4. Lorsque vous sélectionnez l’une de ces options, l’image clé passe d’un mouvement linéaire à une accélération  et vous la voyez changer de forme. Par exemple, avec un mouvement linéaire, elle a une forme de losange, tandis qu’avec le lissage à l’éloignement, elle prend la forme d’une flèche pointée vers la gauche.

  5. Recherchez les options d’accélération adaptées à votre animation. Par exemple, vous pouvez choisir de décélérer en sortie de l’image clé de départ et d’accélérer à l’approche de l’image finale. Vous obtiendrez ainsi les mêmes effets d’accélération et de décélération réalistes qu'avec un mouvement naturel.

  6. Faites attention à l’écart de temps entre les images clés dans le panneau Montage. Plus l’intervalle de temps entre les images clés est court, plus le mouvement est rapide, car il doit se terminer avant l’image clé suivante. Si l’intervalle est plus long, le mouvement est beaucoup plus lent, car il a plus de temps pour se dérouler.

  7. Il est facile d’ajuster ce mouvement en déplaçant les images clés vers l’avant ou l’arrière dans la fenêtre de montage.

  8. Vous pouvez utiliser l’icône de l’éditeur de graphiques pour vérifier sous forme graphique ce que donne l’accélération sur les images clés. 

 

En savoir plus sur l’accélération dans After Effects

Femme utilisant une application de design sur ordinateur

Comment appliquer un effet d’accélération dans Animate ?

Dans Animate, vous pouvez même appliquer une accélération à plusieurs propriétés en même temps. Ainsi, si un objet se déplace en tournant sur lui-même, vous pouvez appliquer des taux d’accélération différents à chaque mouvement. 

 

Le principe est simple.

 

 

  1. Dans votre animation, sélectionnez une image clé dans la plage d’interpolation classique et ouvrez la section Interpolation du panneau Propriétés.
  2. Dans le menu déroulant Accélération, sélectionnez « Chaque propriété séparément ».
  3. Des champs s’affichent pour chaque propriété. Cliquez sur Accélération classique pour ouvrir le panneau des accélérations prédéfinies et sélectionnez les options d’accélération pour votre propriété.
  4. Vous pouvez également ajouter des accélérations personnalisées. Utilisez le panneau et le graphique des accélérations personnalisées pour créer une accélération parfaitement adaptée à votre image clé. Vous pouvez aisément faire glisser et personnaliser votre accélération pour obtenir le résultat souhaité.
  5. N’oubliez pas que vous pouvez également ajouter une accélération à toutes les propriétés à la fois. Il suffit pour cela de retourner au menu déroulant Accélération et de sélectionner les options souhaitées.

 

En savoir plus sur la modification des interpolations de mouvement dans Animate

Fasciné par l’univers de l’animation ?

Poursuivez la lecture avec notre guide de l’animation pour les débutants.

En savoir plus

Comment appliquer un effet d’accélération dans Premiere Pro ?

Dans Premiere Pro, vous avez le choix entre de nombreuses options d’accélération, dont Progressif, Dégressif, Par paliers, Bézier auto et Bézier continue. 

 

L’option Bézier vous permet de personnaliser le graphique d’accélération, tandis que Bézier auto vous aide à créer un rythme de changement plus fluide. 

 

Il est facile d’appliquer des fonctions d’accélération différentes à vos images clés. 
 

  1. Définissez des images clés pour votre animation.
  2. Sélectionnez une image clé et accédez au panneau Options d’effet.
  3. Sur le côté droit du panneau, cliquez sur le petit losange bleu représentant votre image clé, qui doit être linéaire par défaut.
  4. Cliquez avec le bouton droit pour afficher le menu déroulant Interpolation temporelle.
  5. Sélectionnez une option d’accélération ou utilisez des options comme Bézier pour personnaliser l’accélération. 
  6. Si vous cliquez avec le bouton droit dans la fenêtre de montage pour chaque image clé et que vous cliquez sur Afficher les images clés des éléments > Trajectoire > Position, vous pouvez modifier le graphique d’accélération de vos images clés dans la fenêtre de montage, afin de créer des transitions plus brutales ou plus fluides.  

 

En savoir plus sur l’accélération et les images clés dans Premiere Pro

 

FAQ sur l’accélération

 

À quoi sert principalement l’accélération ?

L’accélération a pour but de modifier le mouvement d’une animation afin de créer une dynamique attrayante et naturelle. Avec une accélération, l’animation ne semble plus terne ou saccadée, et le mouvement devient plus fluide, ce qui donne une dimension plus professionnelle à l’ensemble. L’accélération assouplit le début et la fin de l’animation pour atténuer le point de départ et la conclusion du mouvement.   

 

Que fait une animation CSS ?

La technique CSS (Cascading Style Sheets) est une série de commandes qui détermine le mode d’affichage de l’animation sur la page lorsqu’un objet passe d’une configuration de style CSS à une autre. Des images clés sont codées en langage CSS afin de définir les états de début et de fin du style de l’animation et de la guider tout au long du processus, le cas échéant. L’animation CSS est généralement fluide et permet de mieux maîtriser la présentation du produit final.

 

Quels sont les types de fonctions d’accélération en CSS ?

Les principaux types de fonctions d’accélération en CSS sont les suivants : linear, ease-out, ease-in et ease-in-out. Toutes ces fonctions peuvent être utilisées en CSS pour conférer un rendu plus naturel aux transitions entre images clés.  

 

Qu’est-ce qu’une transition linéaire en CSS ?

Une transition linéaire maintient la même vitesse tout au long de l’animation. La durée et la valeur de l’image clé progressent à la même vitesse. Cet effet pouvant sembler robotisé et peu naturel, les fonctions d’accélération servent à atténuer les mouvements et à les rendre plus vraisemblables.  

 

À quoi sert l’instruction ease-out en CSS ?

Les effets d’accélération dégressive, ou décélération (ease-out), commencent rapidement, puis ralentissent. Ils fonctionnent mieux sur les animations illustrant une interaction avec l’utilisateur, car la vitesse au début donne une impression de réponse rapide. Cette transition CSS peut également être utilisée pour les icônes qui étaient hors champ avant d’apparaître à l’écran, car elle donne l’illusion que l’animation vient à la rescousse.

 

À quoi sert l’instruction ease-in en CSS ?

L’accélération progressive (ease-in) est une transition moins souvent utilisée, car un démarrage lent et une fin abrupte peuvent déconcerter le spectateur. Elle est néanmoins très utile pour animer des icônes ou des images qui sortent de l’écran, surtout elles quittent complètement l’écran juste avant de s’arrêter. Les transitions de type ease-in doivent être courtes, sinon elles peuvent donner une impression de lenteur et susciter une certaine impatience chez l’utilisateur.

 

À quoi sert l’instruction ease-in-out en CSS ?

La transition d’accélération progressive/dégressive (ease-in-out) reprend des éléments des transitions ease-in et ease-out. Elle commence lentement et s’accélère en milieu de parcours. C’est la solution idéale si vous créez une animation en boucle.

 

En savoir plus sur l’animation