Animationen sind einer der wesentlichen optischen Reize, die Better Access Charts zu bieten hat. Ab sofort können diese Animationen gezielt gesteuert werden. Wie das geht, zeigt dieser Beitrag.
Better Access Charts nutzt die Bibliothek von chart.js. Einer der wesentlichen Hingucker dort sind die Animationen beim Aufbau des Charts. Bisher wurden hier die Standardwerte von chart.js verwendet. Jetzt ist es möglich, die Animation zu steuern.
Better Access Charts verfügt ab sofort über eine neue Unterklasse mit dem Namen Animation. Diese Sub-Klasse stellt die beiden folgenden Eigenschaften bereit:
- Duration
- Easing
Mit der Eigenschaft Duration wird die Dauer der Animation eingestellt. Der Wert wird in Millisekunden angegeben. Für eine Animation von einer Sekunde muss also der Wert "1000" eigentragen werden.
Interessant ist die Eigenschaft Easing. Hierüber kann festgelegt werden, wie die Animation verläuft. Im wirklichen Leben starten und stoppen Objekte bei Bewegung nicht sofort und selten verläuft der Vorgang mit konstanter Geschwindigkeit.
Über diese Eigenschaft können dem Chart verschiedene Bewegungspfade zugewiesen werden. Einen sehr guten Überblick über das Konzept und die möglichen Werte zeigt diese Seite: https://easings.net/.
Der Code für die Anpassung der Animation sieht ungefähr so aus:
In der Zeile 4 wird die Dauer der Animation auf eine Sekunde eingestellt.
In der Zeile 5 wird eine Funktion für das Easing ausgewählt.
Mit diesem Release macht Better Access Charts einen weiteren Schritt nach vorn. Sicher sind die Animationen nicht der größte Meilenstein. Sie erweitern aber die Möglichkeiten, einen Chart nach den eigenen Wünschen und Bedürfnissen zu gestalten, wieder ein kleines Stück.
Die aktuelle Version von Better Access Charts steht wie immer auf GitHub bereit:
https://github.com/team-moeller/better-access-charts
Keine Kommentare:
Kommentar veröffentlichen