Principes du mouvement
Décider 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'easing, d'espacement, de poids et de rythme. Elle ne choisit pas une stack technique ; elle produit des nombres concrets (durées, courbes cubic-bezier, décalages de stagger, configurations de ressorts) prêts à être transmis à n'importe quelle implémentation.
Quand l'utiliser
- Le mouvement semble rigide, flottant, mécanique, robotique ou cheap et nécessite un diagnostic.
- Choisir la durée, la courbe d'easing et le décalage de stagger d'un clip ou d'une transition.
- Vérifier si un 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égler avant tout chiffre
Chaque morceau de mouvement doit répondre à trois questions avant de choisir une durée ou une courbe. Les ignorer et vous obtenez un mouvement techniquement correct qui ne donne 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) | Easing, durée, amplitude/dépassement |
| Récit visuel | Quelle est la micro-histoire ? Mise en place → action → résolution | Séquencement, mise en scène, ce qui entre quand |
| Fabrication du mouvement | Comment le rendre crédible ? | Physique, mouvement secondaire, arcs, suivi |
Trois couches de mouvement — de la profondeur, pas de la platitude
Mouvement plat = seul l'objet principal bouge. Un mouvement crédible utilise trois couches simultanément :
- 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 bouge, une étiquette qui se pose en retard).
- Ambiant — la vie de fond qui n'attire jamais l'attention (dégradé lent, pulsation à faible contraste).
La couche de jugement (
motion-art-direction) appelle ces couches Héros / Support / Texture — les mêmes trois couches, classées pour ce qui mérite du mouvement. Primaire≈Héros, Secondaire≈Support, Ambiant≈Texture.
Principes fondamentaux
L'easing est le levier le plus important
Un mouvement linéaire est perçu comme robotique. Réservez linear pour les boucles continues (spinners, marquees, défilement infini) uniquement. Tout ce que l'œil perçoit comme un événement discret a besoin d'accélération.
Associez la courbe à l'action :
- Entrée / apparition -> ease-out (départ rapide, atterrissage doux). L'objet arrive avec de l'énergie et décélère en place.
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 / marque -> léger dépassement.
cubic-bezier(0.34, 1.56, 0.64, 1)(le1.56dépasse 1.0, créant un dépassement puis un atterrissage perçu comme « avec du poids »).
Règle empirique : l'œil pardonne bien moins un démarrage lent qu'une fin lente. En cas de doute, décélérez jusqu'à l'arrêt.
Façonner manuellement l'easing (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 courbes : formez 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 lancement vif et un atterrissage en douceur. 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 courbes, les techniques de poignées et d'influence, et des recettes étape par étape 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-200 ms |
| Transition UI (panneau, modale, région de page) | 200-400 ms |
| Élément héroïque / grand / plein écran | 400-800 ms |
| Mouvement de caméra cinématographique | 800-2000 ms |
La distance et la taille modifient la durée. Une petite icône se déplaçant de 20 px et un panneau plein écran se déplaçant de 800 px ne doivent PAS avoir la même durée — le panneau a besoin de plus de temps, sinon il semble sans poids. Une mise à l'échelle pratique : maintenir une vélocité perçue à peu près 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 réagissent instantanément 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 donne l'impression d'un événement plat et unique. Décalez le début de chaque élément.
- Listes / éléments séquentiels : 40-80 ms entre les éléments.
- Grilles denses : 20-40 ms (plus d'éléments, moins de délai par élément, sinon la queue traîne).
- Plafonnez la révélation totale à environ 600-800 ms pour un groupe ; si
nombre * décalagedépasse cela, réduisez le décalage ou passez à un stagger basé sur la distance (les éléments plus éloignés d'un point d'origine commencent 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'~1/3 de l'écran sans une image clé intermédiaire ou un changement d'échelle/d'opacité. Les longs glissements ininterrompus donnent l'impression que « le modèle a bougé », pas que « quelque chose s'est passé ».
- Simultanéité — avec 3 éléments ou plus, ne gardez pas plus d'~1/3 en mouvement actif à la fois. Le reste reste immobile ou se déplace en ambiant. Tout bouger ensemble = bruit sans point focal.
L'anticipation et le suivi donnent une impression de mouvement physique
- Anticipation : un très léger contre-mouvement avant l'action principale (un bouton se rétracte
scale 0.95avant d'apparaître, un personnage fléchit avant de sauter). 60-120 ms suffisent. - Suivi / action qui se chevauche : les parties traînantes continuent de bouger après l'arrêt du corps principal (une carte héroïque atterrit, puis son ombre et son étiquette se posent 40-80 ms plus tard). Décalez l'atterrissage des éléments attachés plutôt que de tout arrêter sur la même image.
- Arcs : les courbes de mouvement naturelles ; une 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 (beat-sync) et rythme
Lorsque le mouvement accompagne de l'audio, placez les images clés d'impact (un coup, une coupe, une révélation) sur le temps fort, pas entre les temps forts. À 120 BPM, un temps fort dure 500 ms ; une grille de croches est de 250 ms. 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-800 ms) pour que la pièce respire de manière cohérente.
Mouvement basé sur ressort vs. basé sur durée
Les ressorts (masse / raideur / amortissement) déterminent eux-mêmes leur durée et donnent une impression plus physique pour les mouvements interactifs et interruptibles (glisser-relâcher, gestes). La durée+le easing 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ù une synchronisation exacte est importante. Un ressort par défaut vif : stiffness 300, damping 30, mass 1. Voir references/easing-curves.md pour un tableau complet des ressorts.
Diagnostic des échecs courants
- Semble rigide/robotique -> utiliser
linearou un easing symétrique pour une entrée ; passer à ease-out. - Semble flottant/lent -> durée trop longue ou ease-out trop doux ; réduire la durée de 30 %, affiner la courbe.
- Semble cheap/tremblant -> tout apparaît en même temps (pas de stagger), ou tous les éléments partagent une durée unique indépendamment de la taille.
- Semble mécanique malgré l'easing -> pas d'anticipation, pas de suivi, trajectoires en ligne droite ; ajouter des arcs et des chevauchements.
Référence rapide
| Besoin | Utilisation |
|---|---|
| Entrée | cubic-bezier(0.16, 1, 0.3, 1), 300-500 ms |
| Sortie | cubic-bezier(0.7, 0, 0.84, 0), 200-300 ms |
| Déplacement | cubic-bezier(0.65, 0, 0.35, 1), 300-400 ms |
| Pop de marque | cubic-bezier(0.34, 1.56, 0.64, 1), 400-600 ms |
| Stagger de liste | 40-80 ms par élément, plafond ~700 ms au total |
| Boucle uniquement | linear |
Fichiers de référence
references/easing-curves.md— bibliothèque nommée de courbes cubic-bezier avec des valeurs exactes, des configurations de ressorts (Framer / react-spring / iOS), et des indications de durée par type d'élément.references/easing-graph-editor.md— savoir-faire de l'Éditeur de courbes d'After Effects : graphique de vitesse vs graphique de valeur, poignées d'easing et valeurs d'influence/vélocité, et recettes étape par étape pour les animations vives, le dépassement, l'anticipation et le rebond.references/twelve-principles.md— les 12 principes de Disney, chacun avec un exemple numérique concret d'infographie animée.