12 Principes de l'Animation

Examinez le code d'animation pour vérifier sa conformité aux 12 principes de Disney adaptés aux interfaces web.

Déclencheurs

• animation
• motion
• transition
• keyframe
• spring
• ease
• timing
• squash
• stretch
• anticipation
• animate
• css animation
• framer motion
• gsap

Fonctionnement

1. Lire les fichiers spécifiés (ou demander à l'utilisateur les fichiers/motifs)
2. Vérifier par rapport à toutes les règles ci-dessous
3. Générer les résultats au format fichier:ligne

Catégories de Règles

Règles

Règles de Timing

timing-under-300ms

Les animations initiées par l'utilisateur doivent se terminer dans les 300ms.

Échoue :

.button { transition: transform 400ms; }

Réussit :

.button { transition: transform 200ms; }

timing-consistent

Les éléments similaires doivent utiliser des valeurs de timing identiques.

Échoue :

.button-primary { transition: 200ms; }
.button-secondary { transition: 150ms; }

Réussit :

.button-primary { transition: 200ms; }
.button-secondary { transition: 200ms; }

timing-no-entrance-context-menu

Les menus contextuels ne doivent pas s'animer à l'apparition (sortie uniquement).

Échoue :

<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />

Réussit :

<motion.div exit={{ opacity: 0 }} />

Règles d'Easing

easing-entrance-ease-out

Les apparitions doivent utiliser ease-out (arrivée rapide, stabilisation douce).

Échoue :

.modal-enter { animation-timing-function: ease-in; }

Réussit :

.modal-enter { animation-timing-function: ease-out; }

easing-exit-ease-in

Les sorties doivent utiliser ease-in (accumulation d'élan avant départ).

Échoue :

.modal-exit { animation-timing-function: ease-out; }

Réussit :

.modal-exit { animation-timing-function: ease-in; }

easing-no-linear-motion

L'easing linéaire ne doit être utilisé que pour les indicateurs de progression, pas pour le mouvement.

Échoue :

.card { transition: transform 200ms linear; }

Réussit :

.progress-bar { transition: width 100ms linear; }

easing-natural-decay

Utiliser des rampes exponentielles, non linéaires, pour une décroissance naturelle.

Échoue :

gain.gain.linearRampToValueAtTime(0, t + 0.05);

Réussit :

gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);

Règles de Physique

physics-active-state

Les éléments interactifs doivent avoir un état actif/pressé avec transform scale.

Échoue :

.button:hover { background: var(--gray-3); }
/* État :active manquant */

Réussit :

.button:active { transform: scale(0.98); }

physics-subtle-deformation

La déformation squash/stretch doit être subtile (plage 0,95–1,05).

Échoue :

<motion.div whileTap={{ scale: 0.8 }} />

Réussit :

<motion.div whileTap={{ scale: 0.98 }} />

physics-spring-for-overshoot

Utiliser des springs (pas d'easing) quand un rebond-et-stabilisation est nécessaire.

Échoue :

<motion.div transition={{ duration: 0.3, ease: "easeOut" }} />
// Quand l'élément devrait rebondir/se stabiliser

Réussit :

<motion.div transition={{ type: "spring", stiffness: 500, damping: 30 }} />

physics-no-excessive-stagger

Les délais de stagger ne doivent pas dépasser 50ms par élément.

Échoue :

transition={{ staggerChildren: 0.15 }}

Réussit :

transition={{ staggerChildren: 0.03 }}

Règles de Mise en Scène

staging-one-focal-point

Un seul élément doit s'animer de façon prononcée à la fois.

Échoue :

// Plusieurs éléments avec animations d'apparition concurrentes
<motion.div animate={{ scale: 1.1 }} />
<motion.div animate={{ scale: 1.1 }} />

staging-dim-background

Les arrière-plans de modaux/dialogues doivent s'assombrir pour diriger l'attention.

Échoue :

.overlay { background: transparent; }

Réussit :

.overlay { background: var(--black-a6); }

staging-z-index-hierarchy

Les éléments animés doivent respecter la hiérarchie z-index.

Échoue :

.tooltip { /* Pas de z-index, peut se rendre derrière d'autres éléments */ }

Réussit :

.tooltip { z-index: 50; }

Format de Sortie

Lors de l'examen des fichiers, générez les résultats comme suit :

fichier:ligne - [id-règle] description du problème

Exemple :
components/modal/index.tsx:45 - [timing-under-300ms] Animation de sortie 400ms dépasse la limite de 300ms
components/button/styles.module.css:12 - [physics-active-state] Transform :active manquant

Tableau Récapitulatif

Après les résultats, générez un résumé :

Vérification

• Le changement a été rendu dans un navigateur/simulateur et une capture d'écran ou un snapshot DOM a été capturé, pas seulement examiné par le code
• La mise en page a été vérifiée aux points d'arrêt appelés par le guide 12-principes-de-l'animation (mobile + desktop minimum) ; des preuves de chacun sont jointes
• Les valeurs de couleur, typographie et espacement utilisées proviennent des design tokens / thème du projet, pas de valeurs hard-codées ad hoc
• La navigation au clavier et l'ordre de focus ont été exercés sur chaque élément interactif introduit
• Les variantes reduced-motion / dark-mode (si supportées) ont été vérifiées, pas supposées hériter
• Aucune erreur de console ni avertissement d'hydratation n'a été émis lors de la vérification de rendu

Références

• The Illusion of Life: Disney Animation
• Apple WWDC23: Animate with Springs