Design de mouvement et animations d'interfaces

1) Pourquoi l'animation dans le produit

• explique le lien de causalité (où a disparu, d'où vient l'élément),
• met l'accent sur l'action principale,
• confirme le résultat (feedback) et réduit la charge cognitive,
• rend les transitions prévisibles et « tangibles ».

Règle n ° 1 : sens> style. Toute animation répond à la question "que s'est-il passé et comment est-ce lié à moi ? ».

2) Principes de base

1. Hiérarchie du mouvement : les conteneurs sont les premiers à se déplacer, puis le contenu, puis les pièces.
2. Constance : les mêmes schémas pour les mêmes actions.
3. Économie : minimum de propriétés, minimum de trames ; mieux court et plus clair.
4. Physique réaliste : accélération au début, décélération à la fin ; Il n'y a pas de « sauts ».
5. Réversibilité : le « retour » est ressenti en miroir « en avant ».
6. Disponibilité : respecter les paramètres système de réduction de l'animation.

3) Durées et courbes (recommandations)

3. 1 Durée (bureau/mobile)

Hover : 120-180 ms

Focus/Pressed: 80–120 мс

Tooltip/Toast : entrée 180-240 ms, sortie 120-160 ms

Modeleurs/drowers : 200-320 ms

Transitions d'écran : 240-360 ms

Références scroll/parallax : ≤ 200 ms par segment, éviter les cycles infinis

3. 2 Courbes

Base : 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) "- rythme" matériel "naturel

L'entrée est plus rapide, la sortie est plus douce : 'cubic-bezier (0. 05, 0. 7, 0. 1, 1)`

Élasticité (rarement, accent) : 'cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2) 'avec limite overshoot ≤ 8px/8 °

Règle : N'utilisez pas l'interpolation linéaire pour les mouvements et l'opacité à la fois - une sensation de « mécanique ».

4) Chorégraphie des transitions

Apparition : échelle facile 0. 98→1. 0 + fade-in, décalage de 8-16 px sur l'axe d'occurrence.
Disparition : ordre inverse, plus rapide que l'entrée (− 20-30 %).
Déplacement/changement d'onglets : la « base » commune (conteneur) est déplacée de 16 à 24 px ; l'onglet actif est mis en surbrillance avant le début du mouvement.
Listes : desserrer la cascade (stagger 20-40 ms/élément, pas plus de 6-8 éléments).

5) Micro-interactions (patterns)

Bouton (hover/press) : ombre + sous-écran léger/échelle 0. 98; pressed rebondit ≤ 80 ms.
Focus : anneau de contraste sans blur ; animez l'épaisseur/transparence, pas le glow.
Inputs : chariot/rétroéclairage du champ sur focus ; erreurs - secouage ≤ 6 px, ≤ 140 ms, 1 cycle.
Toggle/Checkbox : snap jusqu'à la position finale, délai de clic pas plus de 60-80 ms.
Skeleton/chargement : shimmer 1200-1600 ms, amplitude de luminosité ≤ 20 %, pas de flashs brusques.

6) États du contenu

Loading → Success/Empty/Error : un « canal » de mouvement ; ne mélangez pas les différentes directions.
Toast/Alerts : viennent du côté de la source de l'événement (par exemple, du bas à droite pour les actions de l'utilisateur).
Pull to refresh : étirement avec démoulage élastique ; le temps de retour est ≤ 250 ms.

7) Accessibilité (A11y) et sécurité

Supportez 'prefers-reduced-motion : reduce' : remplacez les mouvements par fade/scale ≤ 1 % ou une transition statique.
Évitez les flashs> 3 par seconde et les grands clignotements contrastés (épilepsie photosensitive).
N'utilisez pas de parallax/zoom fort chez les utilisateurs ayant des antécédents de mal des transports ; faites une option de déconnexion.
Les styles de focus sont toujours visibles sans animation (pas seulement couleur/mouvement).

8) Performance (60 FPS comme objectif)

Animez uniquement l'opacité et la forme (translate/scale/rotate) ; éviter 'top/left/width/height'.
Incluez le composite : 'bou : translateZ (0)' ou 'will-change : bou, opacity' (modérément).
Minimisez repaint : n'animez pas les ombres avec un grand blur et les filtres sur une multitude d'éléments.
Casser les grands passages en batchi ; utilisez requestAnimationFrame.
Pour les listes, virtualisation/rediffusion hors écran.

9) Tokens de mouvement dans le système de conception

json
{
"motion": {
"duration": { "xs": 100, "sm": 160, "md": 220, "lg": 280, "xl": 340 },
"easing": {
"standard": "cubic-bezier(0. 2, 0. 0, 0. 2, 1)",
"emphasis": "cubic-bezier(0. 05, 0. 7, 0. 1, 1)",
"decelerate": "cubic-bezier(0. 0, 0. 0, 0. 2, 1)",
"accelerate": "cubic-bezier(0. 4, 0. 0, 1, 1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

Именование: `motion.{duration|easing|stagger}.{role}` — `hover`, `focus`, `overlayIn`, `pageTransition`, `listItem`.

10) Mise en œuvre (CSS/JS/React)

css
:root {
--motion-dur-sm: 160ms;
--motion-dur-md: 220ms;
--motion-ease: cubic-bezier(0. 2, 0, 0. 2, 1);
}
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration: 0. 01ms! important; }
}

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { duration: 0. 22 } }}
exit={{ opacity: 0, transition: { duration: 0. 16 } }}
className="fixed inset-0 bg-black/50"
>
<motion. div initial={{ y: 16, scale: 0. 98, opacity: 0 }}
animate={{ y: 0, scale: 1, opacity: 1, transition: { duration: 0. 24, ease: [0. 2,0,0. 2,1] } }}
exit={{ y: 8, scale: 0. 99, opacity: 0, transition: { duration: 0. 18 } }}
className="m-auto max-w-lg rounded-2xl bg-white p-6"
>
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

Lottie/SVG : utiliser pour illustrer les états vides et onboarding ; pas pour les contrôles critiques. Optimisez et mettez en cache.

11) Modèles de téléchargement

Skeleton au lieu de spinner où la structure du contenu est connue.
Progress : barre déterministe si le progrès est connu ; indéterminé - avec un rythme uniforme, sans « sauts ».
Évitez le skeleton « flottant » lors de la reconstruction - fixez les dimensions.

12) Transitions entre pages/écrans

Gardez le point d'attention (shared element transitions) : La carte est « révélée » dans la pièce.
La navigation va "en profondeur" en avant/à droite/en haut, "en arrière" - à l'inverse; la direction est unique pour la plateforme.
Le substrat d'arrière-plan s'obscurcit jusqu'à 40 à 60 % en cas d'overlay.

13) Spécificité iGaming

Spin/Reveal : une accélération courte (≤ 200 ms) + rotation uniforme + atténuation douce ; interdiction des cycles sans fin sans effet.
Win/Jackpot : éclat de lumière ≤ 500 ms, sans stroboscope ; Prise de son à faible volume ; texte de la victoire chitabelen (AAA par contraste).
Tournois/classements : incrément de compte - compteur avec des chiffres tabulaires et un pas facile de 40-60 ms/unité (battements), sans « sauts » layout.
Jeu responsable : notifications et limites sans effets distrayants ; l'animation est minime, l'accent mis sur la lisibilité.

14) Anti-modèles

Retards> 120 ms jusqu'à la réponse par clic.
« Ascenseur » de opacity + scale 0. 9→1. 05→1. 0 avec overshoot pour chaque détail.
Parallaxe de fond en conflit avec le scroll.
Scintillement/pulsations infinies.
Animation des propriétés layout/paint ('height', 'left', 'filter : blur ()') sur une multitude d'éléments.
Courbes et durées non constantes pour les mêmes actions.

15) Processus et QA

• Prototypes avec horaires/courbes ; chorégraphie au niveau des cadres.
• Catalogue de tokens de mouvement et exemples pour les composants.

• Tests unitaires de visibilité/état (les transitions sont terminées comme prévu).
• Tests visuels (snapshots de fin d'animation).
• Profilage (Performance/Timeline) sur les scènes à charge maximale.

• Soutenu par 'prefers-reduced-motion'.
• Transformation/opacity uniquement.
• Les durées et les courbes correspondent aux tokens.
• Pas d'éclosions> 3/s et un fort stroboscope.
• Skeleton au lieu de spinner si possible.
• Les transitions sont réversibles et prévisibles.

16) Documentation dans le système de conception

« Motion-tokens » : durée/easing/stagger avec des exemples.
« Modèles de transitions » : modeles, listes, onglets, pages.
« A11y & Performance » : hyde par reduce-motion et composite.
« Do/Don't » : courts clips avec des exemples réussis/échoués.

Résumé succinct

Le design de mouvement est le langage des causes et des conséquences. Gardez les temps courts, les courbes cohérentes et les propriétés bon marché pour le rendu. Respecter la disponibilité, documenter les jetons et vérifier les performances. Ensuite, l'animation renforcera l'UX et n'affectera pas la vitesse et la clarté de l'interface.