principes-d-animation

Principes du Mouvement

Décidez comment quelque chose doit bouger pour que ce soit juste — indépendamment de l'outil utilisé pour le construire. Cette compétence répond aux questions de timing, d'assouplissement, d'espacement, de poids et de rythme. Elle ne choisit pas une pile technologique ; elle produit des nombres concrets (durées, courbes cubic-bezier, décalages de stagger, configurations de ressort) prêts à être remis à n'importe quelle implémentation.

Quand l'utiliser

• Le mouvement semble rigide, flottant, mécanique, robotique ou bon marché et nécessite un diagnostic.
• Choisir la durée, la courbe d'assouplissement et le décalage de stagger d'un clip ou d'une transition.
• Vérifier si le mouvement respecte l'intuition physique (poids, suivi, arcs).
• Synchroniser les images clés sur un rythme musical ou un accent de montage.

Trois piliers — réglez-les avant tout nombre

Chaque morceau de mouvement doit répondre à trois questions avant de choisir une durée ou une courbe. Sautez-les et vous obtiendrez un mouvement techniquement correct qui ne ressemble à rien. C'est le vocabulaire partagé auquel le reste de la collection se réfère.

Pilier	La question	Ce qu'il détermine
Intention émotionnelle	Que doit ressentir le spectateur ? (joie, calme, urgence, confiance, élégance)	Assouplissement, durée, amplitude/dépassement
Récit visuel	Quelle est la micro-histoire ? Configuration → action → résolution	Séquencement, mise en scène, quoi entre quand
Savoir-faire du mouvement	Comment le rendre crédible ?	Physique, mouvement secondaire, arcs, suivi

Trois couches de mouvement — profondeur, pas de platitude

Mouvement plat = seul l'objet principal bouge. Un mouvement crédible exécute trois couches à la fois :

• Primaire — l'action principale que l'œil suit (le mouvement héroïque).
• Secondaire — la richesse de soutien qui réagit au primaire (une ombre qui se déplace, une icône qui pousse, une étiquette qui se stabilise en retard).
• Ambiant — la vie d'arrière-plan qui n'attire jamais l'attention (dérive de gradient lente, impulsion à faible contraste).

La couche de jugement (motion-art-direction) appelle ces Hero / Support / Texture — les mêmes trois couches, classées pour ce qui mérite du mouvement. Primaire≈Hero, Secondaire≈Support, Ambiant≈Texture.

Principes fondamentaux

L'assouplissement est le levier le plus important

Un mouvement linéaire semble robotique. Réservez linear pour les boucles continues (spinners, marquees, défilement infini) uniquement. Tout ce qu'un œil perçoit comme un événement discret a besoin d'accélération.

Faites correspondre la courbe à l'action :

• Entrée / apparition -> ease-out (départ rapide, atterrissage en douceur). L'objet arrive avec de l'énergie et décélère pour se stabiliser. cubic-bezier(0.16, 1, 0.3, 1).
• Sortie / disparition -> ease-in (départ doux, fin rapide). L'objet accélère pour partir. cubic-bezier(0.7, 0, 0.84, 0).
• Déplacement / repositionnement (reste à l'écran) -> ease-in-out (symétrique). cubic-bezier(0.65, 0, 0.35, 1).
• Ludique / de marque -> léger dépassement. cubic-bezier(0.34, 1.56, 0.64, 1) (le 1.56 pousse au-delà de 1.0, créant un dépassement puis un stabilisation qui se lit comme un "poids").

Règle d'or : l'œil pardonne bien moins un démarrage lent qu'une fin lente. En cas de doute, décélérez pour vous arrêter.

Façonnage manuel de l'assouplissement (After Effects). Lorsque vous créez des images clés à la main plutôt que de fournir une courbe, les mêmes principes s'appliquent à l'éditeur de graphiques : façonnez le Graphique de Vitesse pour que les extrémités s'aplatissent vers zéro, et poussez l'influence de la décélération à 80–90% pour un départ vif et une stabilisation douce. F9 (Easy Ease) n'est qu'un point de départ symétrique à 33% — rendez-le asymétrique. Voir references/easing-graph-editor.md pour la lecture de l'éditeur de graphiques, les techniques de poignée/influence, et les recettes pas à pas pour le dépassement, l'anticipation et le rebond (y compris une expression de rebond amorti).

Le timing communique le poids et l'importance

Élément	Durée
Micro-interaction (survol, bascule, retour tactile)	100-200ms
Transition UI (panneau, modale, région de page)	200-400ms
Élément héroïque / grand / plein écran	400-800ms
Mouvement de caméra cinématographique	800-2000ms

La distance et la taille modifient la durée. Une petite icône se déplaçant de 20px et un panneau pleine page se déplaçant de 800px ne DEVRAIENT PAS partager une durée — le panneau a besoin de plus de temps ou il semble sans poids. Une mise à l'échelle pratique : maintenir une vitesse perçue approximativement constante en ajoutant ~30-50% de durée lorsque la distance ou la surface double approximativement. Les objets lourds démarrent lentement et dépassent moins ; les objets légers claquent et peuvent rebondir.

L'espacement et le stagger créent le rythme

Ne révélez jamais une liste, une grille ou un groupe d'un seul coup — cela se lit comme un seul événement plat. Décalez le départ de chaque enfant.

• Listes / éléments séquentiels : 40-80ms entre les éléments.
• Grilles denses : 20-40ms (plus d'éléments, moins de délai par élément, sinon la traîne s'allonge).
• Limitez la révélation totale à environ 600-800ms pour un groupe ; si count * offset dépasse cela, réduisez l'offset ou passez à un stagger basé sur la distance (les éléments plus éloignés d'un point d'origine démarrent plus tard).
• La direction du stagger doit suivre l'œil : de haut en bas, ou en rayonnant depuis un point focal.

La Règle du 1/3 (deux formes, toutes deux universelles) :

• Distance — aucun élément ne parcourt plus d'environ 1/3 de l'écran sans une image clé intermédiaire ou un changement d'échelle/d'opacité. Les longs glissements ininterrompus se lisent comme "le modèle a bougé", pas comme "quelque chose s'est passé".
• Simultanéité — avec 3 éléments ou plus, ne gardez pas plus d'environ 1/3 en mouvement actif à la fois. Le reste tient ou bouge comme ambiant. Tout bouger ensemble = bruit sans point focal.

L'anticipation et le suivi vendent le mouvement physique

• Anticipation : un tout petit contre-mouvement avant l'action principale (un bouton s'abaisse à scale 0.95 avant d'apparaître, un personnage s'accroupit avant de sauter). 60-120ms suffisent.
• Suivi / action qui se chevauche : les parties qui suivent continuent de bouger après l'arrêt du corps principal (une carte héroïque atterrit, puis son ombre et son étiquette se stabilisent 40-80ms plus tard). Décalez la stabilisation des éléments attachés plutôt que de tout arrêter sur la même image.
• Arcs : les courbes de mouvement naturelles ; la translation en ligne droite pure d'un objet organique semble mécanique. Ajoutez un léger arc en x/y ou animez un chemin.

Synchronisation sur le rythme et rythme visuel

Lorsque le mouvement accompagne l'audio, placez les images clés d'impact (un coup, une coupe, une révélation) sur le temps, pas entre les temps. À 120 BPM, un temps est de 500ms ; une grille de croches est de 250ms. Quantifiez les moments clés sur cette grille. Pour les montages sans musique, établissez une pulsation visuelle (par exemple, un événement majeur toutes les ~500-800ms) pour que la pièce respire de manière cohérente.

Mouvement basé sur les ressorts vs. basé sur la durée

Les ressorts (masse / rigidité / amortissement) déterminent eux-mêmes la durée et semblent plus physiques pour un mouvement interactif et interruptible (relâchement après glissement, gestes). La durée + l'assouplissement est meilleur pour les séquences chorégraphiées et verrouillées dans le temps (vidéo, révélations liées au défilement) où la synchronisation exacte est importante. Un ressort vif par défaut : stiffness 300, damping 30, mass 1. Voir references/easing-curves.md pour un tableau complet des ressorts.

Diagnostic des échecs courants

• Semble rigide/robotique -> utilisation de linear ou d'un assouplissement symétrique sur une entrée ; passez à ease-out.
• Semble flottant/lent -> durée trop longue ou ease-out trop doux ; réduisez la durée de 30%, affinez la courbe.
• Semble bon marché/saccadé -> tout apparaît en même temps (pas de stagger), ou tous les éléments partagent une seule durée, quelle que soit leur taille.
• Semble mécanique malgré l'assouplissement -> pas d'anticipation, pas de suivi, chemins en ligne droite ; ajoutez des arcs et des chevauchements.

Référence rapide

Besoin	Utiliser
Entrée	cubic-bezier(0.16, 1, 0.3, 1), 300-500ms
Sortie	cubic-bezier(0.7, 0, 0.84, 0), 200-300ms
Déplacement	cubic-bezier(0.65, 0, 0.35, 1), 300-400ms
Pop de marque	cubic-bezier(0.34, 1.56, 0.64, 1), 400-600ms
Stagger de liste	40-80ms par élément, limite ~700ms total
Boucle uniquement	linear

Fichiers de référence

• references/easing-curves.md — bibliothèque de courbes cubic-bezier nommées avec valeurs exactes, configurations de ressort (Framer/react-spring/iOS), et conseils de durée par type d'élément.
• references/easing-graph-editor.md — savoir-faire de l'éditeur de graphiques After Effects : graphique de vitesse vs graphique de valeur, poignées d'assouplissement et nombres d'influence/vitesse, et recettes pas à pas pour les mouvements vifs, les dépassements, l'anticipation et les rebonds.
• references/twelve-principles.md — les 12 principes de Disney, chacun avec un exemple concret et numérique de graphisme animé.