Wie man einen Zahlenzähler in der UI animiert
Wie man einen Zähler animiert, ohne dass Ziffern springen: eine Kurve, die exakt landet, Formatierung nach Sprache und eine einzige Ansage für Screenreader.
Kernaussage
Ein Zähler funktioniert, wenn die Zahl der Punkt ist, etwa eine Dashboard-Summe oder ein gerade erzieltes Ergebnis. Animiere den Wert mit einer Kurve, die abbremst und genau auf der echten Zahl endet, nutze Ziffern mit fester Breite, damit der Text nicht springt, und formatiere am Ende für die Sprache des Nutzers. Sag den Endwert einmal an, nicht in jedem Frame.
Wann ein Zähler hilft und wann er täuscht
Hochzählen lenkt Aufmerksamkeit auf eine Zahl, was bei einem Ergebnis sinnvoll ist, das der Nutzer verursacht hat. Bei Daten, die einfach geladen wurden, hilft es weniger, und es kann täuschen, wenn sich die Zahl noch ändert. Animieren nie auf einen Wert, den du nicht hast: Ist die Zahl eine Schätzung, zeig sie als solche.
Animiere den Wert, nicht das Layout
Die Zahl ist Text, und Textänderungen ändern die Breite. Proportionale Ziffern lassen die Zeile zittern, nutze daher font-variant-numeric: tabular-nums oder einen Container mit fester Breite. Halte den Rest des Layouts still, während sich die Ziffern ändern.
Abbremsen und exakt landen
Ein Zähler sollte langsamer werden, je näher er dem Ziel kommt, und auf dem echten Wert stehen bleiben. Lineares Zählen wirkt mechanisch; Überschwingen und Zurückfedern wirkt wie ein Spiel. Nutze eine abbremsende Kurve und lass den letzten Frame genau die Zahl sein, die angezeigt werden soll.
Formatiere für die Lesenden
Tausendertrennzeichen, Dezimalstellen und Währungssymbole hängen von der Sprache ab. Animiere den Rohwert und formatiere bei jeder Aktualisierung oder am Ende. Runde konsistent und zeige keine Nachkommastellen, die nie zur Ruhe kommen.
Barrierefreiheit: das Ergebnis einmal ansagen
Ein Screenreader soll den Endwert hören, nicht jeden Zwischenframe. Halte die Live-Region während des Zählens still und aktualisiere sie am Ende, oder lege die Endzahl von Anfang an in das zugängliche Label. Wer reduzierte Bewegung bevorzugt, soll die Zahl sofort sehen.
Wo ExodeUI passt
ExodeUI ist ein Browser- und Desktop-Werkzeug für interaktive UI und Animation, mit Zustandsmaschinen, Federphysik, Eingaben und Ereignissen, gespeichert als eine offene .exode-JSON-Datei, mit Runtimes für React, Vue, Svelte, Angular, Solid, React Native, SwiftUI und Flutter. Ein Zähler ist einfach genug für Code; nutze ein Werkzeug wie ExodeUI nur, wenn dieselbe Bewegung plattformübergreifend geteilt und bearbeitet werden soll.
Wichtige Prinzipien
- Nutze einen Zähler, wenn die Zahl der Punkt ist, nicht für jeden Wert
- Ziffern mit fester Breite verhindern zitternden Text
- Bremse ab und lande exakt auf der echten Zahl
- Formatiere die Zahl für die Sprache des Nutzers
- Sag den Endwert einmal an, nicht in jedem Frame
Häufige Fragen
Quellen
- font-variant-numeric — MDN Web Docs
- ARIA live regions — MDN Web Docs
- prefers-reduced-motion — MDN Web Docs