Ingénierie d'Animation & Motion Craft

Que fait Ingénierie d'Animation & Motion Craft ?

Cette compétence équipe l'agent avec des pratiques standard de l'industrie, des modèles prêts pour la production et des modèles de physique mathématique pour concevoir et coder des animations fluides et performantes sur les interfaces web et d'application.

---

1. Règles d'Or de la Performance de Mouvement

1. Animer UNIQUEMENT les Propriétés Composites :
   • Toujours privilégier transform (translate3d, scale, rotate) et opacity.
   • NE JAMAIS animer les propriétés géométriques (width, height, top, left, margin, padding) sauf en utilisant la technique FLIP (First, Last, Invert, Play). L'animation de propriétés géométriques déclenche des recalculs de mise en page coûteux (Reflow) et du Paint sur le CPU.
2. Promouvoir au GPU de Manière Responsable :
   • Utiliser will-change: transform, opacity; uniquement sur les éléments activement animés, et le supprimer après la fin de l'animation si la mémoire est limitée.
   • Forcer la composition de couche GPU avec transform: translateZ(0) ou backface-visibility: hidden si nécessaire.
3. Respecter l'Accessibilité de l'Utilisateur :
   • Toujours supporter @media (prefers-reduced-motion: reduce) :

     @media (prefers-reduced-motion: reduce) {
       *, *::before, *::after {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
       }
     }
     

4. Timings et Durées Naturels :
   • Micro-interactions (pression de bouton, basculement, infobulle) : 100ms - 200ms
   • Transitions standard (menus déroulants, boîtes de dialogue, tiroirs, cartes) : 200ms - 350ms
   • Transitions de scène complexes / transitions de page : 350ms - 500ms
   • Les animations de plus de 500ms semblent lentes, sauf s'il s'agit de boucles d'arrière-plan atmosphériques continues ou de narration.

---

2. Matrice de Sélection Technologique

Scénario / Besoin	Outil Recommandé	Pourquoi ?
Survol simple, focus, états actifs, fondu/glissé	Transitions CSS & @keyframes ou Tailwind CSS	Aucune surcharge JavaScript, accélération matérielle 120 FPS.
UI React / Next.js, Modales, Transitions de Mise en Page Partagée	Framer Motion (motion)	API déclarative, physique à ressort, FLIP automatique (layoutId), AnimatePresence.
Chronologies Complexes, Morphing SVG, UI Pilotée par le Défilement	GSAP (GreenSock) + ScrollTrigger	Contrôle de chorégraphie inégalé, scrutation précise, cohérence multi-navigateurs.
Expériences 3D, Réseaux de Particules, Shaders	Three.js / React Three Fiber / Canvas 2D	Rendu GPU WebGL direct pour des centaines de milliers de particules.
Graphiques Animés Vectoriels & Illustrations de Personnages	Lottie / dotLottie / Rive	Charges utiles JSON/binaires minuscules, fidélité vectorielle évolutive, machines à états interactives.

---

3. Courbes de Mouvement (Jetons d'Easing)

N'utilisez jamais linear pour un mouvement d'interface utilisateur, sauf pour simuler un tapis roulant à vitesse constante ou un chargeur rotatif infini. Le mouvement naturel accélère et décélère :

• Entrée Rapide (Ouverture pop/UI Standard) : cubic-bezier(0.16, 1, 0.3, 1) (Expo Out - rafale initiale rapide, décélération douce)
• Sortie Fluide (Rejet/fermeture) : cubic-bezier(0.7, 0, 0.84, 0) (Expo In - accélère hors de l'écran)
• Dynamique Naturel / Accentué : cubic-bezier(0.34, 1.56, 0.64, 1) (Rebond de dépassement subtil)
• Physique à Ressort (Préféré pour le tactile et le glissement) :
  • Raideur : 300 - 400
  • Amortissement : 25 - 35
  • Masse : 0.8 - 1.0

---

4. Guides Approfondis & Références

Pour des modèles de code complets et des procédures détaillées, consultez les références :

• Référence Animations CSS & Tailwind
• Modèles Framer Motion & Motion One
• Maîtrise GSAP & ScrollTrigger
• Mouvement Three.js & Canvas
• Principes de Mouvement UI & Accessibilité

---

5. Liste de Vérification

Lors de la construction de composants animés :

• Les animations sont-elles fluides (60-120 FPS) sans à-coups ni chutes d'images ?
• Les décalages de mise en page (CLS) sont-ils évités pendant l'animation ?
• Les animations de sortie sont-elles correctement attendues avant le démontage de l'élément ?
• L'interface gère-t-elle les clics/ tapotements rapides sans glitch (animations interruptibles) ?
• prefers-reduced-motion est-il implémenté ?