Comment animer un compteur chiffré dans une interface
Comment animer un compteur sans faire sauter les chiffres, avec une courbe qui atterrit sur la valeur exacte, un format par langue et une seule annonce accessible.
À retenir
Un compteur fonctionne quand le chiffre est le sujet, comme un total de tableau de bord ou un résultat que l'utilisateur vient d'obtenir. Animez la valeur avec une courbe qui ralentit et se termine exactement sur le chiffre réel, utilisez des chiffres de largeur fixe pour que le texte ne saute pas et appliquez le format de la langue à la fin. Annoncez la valeur finale une fois, pas à chaque image.
Quand un compteur aide et quand il trompe
Compter vers le haut attire l'attention sur un chiffre, utile pour un résultat que l'utilisateur a provoqué. C'est moins utile pour des données simplement chargées, et cela peut tromper si le nombre change encore. N'animez jamais vers une valeur que vous n'avez pas : si le chiffre est une estimation, montrez-le comme telle.
Animez la valeur, pas la mise en page
Le nombre est du texte, et changer le texte change la largeur. Les chiffres proportionnels font trembler la ligne, donc utilisez font-variant-numeric: tabular-nums ou un conteneur de largeur fixe. Gardez le reste de la mise en page immobile pendant que les chiffres changent.
Ralentissez et atterrissez exactement
Un compteur doit ralentir en approchant de la cible puis s'arrêter sur la valeur réelle. Un comptage linéaire paraît mécanique ; dépasser puis rebondir paraît être un jeu. Utilisez une courbe qui ralentit et faites en sorte que la dernière image soit exactement le nombre à afficher.
Formatez pour le lecteur
Les séparateurs de milliers, les décimales et les symboles monétaires dépendent de la langue. Animez la valeur brute, puis formatez-la à chaque mise à jour ou à la fin. Arrondissez de façon cohérente et évitez d'afficher des décimales qui ne se stabilisent jamais.
Accessibilité : annoncez le résultat une fois
Un lecteur d'écran doit entendre la valeur finale, pas chaque image intermédiaire. Gardez la région live silencieuse pendant le comptage et mettez-la à jour à la fin, ou exposez le nombre final dans le libellé accessible dès le départ. Ceux qui préfèrent un mouvement réduit doivent voir le chiffre immédiatement.
Où se situe ExodeUI
ExodeUI est un outil de navigateur et de bureau pour l'interface et l'animation interactives, avec machines à états, physique à ressort, entrées et événements, enregistré dans un seul fichier .exode JSON ouvert, avec des runtimes pour React, Vue, Svelte, Angular, Solid, React Native, SwiftUI et Flutter. Un compteur est assez simple pour être codé à la main ; utilisez un outil comme ExodeUI seulement si le même mouvement doit être partagé et modifié entre plateformes.
Principes clés à retenir
- Utilisez un compteur quand le chiffre est le sujet, pas pour chaque valeur
- Des chiffres de largeur fixe empêchent le texte de trembler
- Ralentissez et atterrissez exactement sur le chiffre réel
- Appliquez le format de la langue de l'utilisateur
- Annoncez la valeur finale une fois, pas à chaque image
Questions fréquentes
Sources
- font-variant-numeric — MDN Web Docs
- ARIA live regions — MDN Web Docs
- prefers-reduced-motion — MDN Web Docs