Eine Spieloberfläche für ein browserbasiertes Basketballspiel lässt sich mit HTML Canvas und GSAP flüssig animieren. Der Fachbeitrag von CSS-Tricks zeigt das am Beispiel einer Statusanzeige aus einem Projekt für die Detroit Pistons.
Canvas zeichnet die Statusanzeige
Im Mittelpunkt steht eine kreisförmige Superpower-Anzeige. Rote Segmente geben den Combo-Stand an. Wenn eine weitere Einheit gefüllt wird, verändern sich Farbe, Linienbreite und Leuchteffekt. Die Oberfläche wird auf einem Canvas gezeichnet, während requestAnimationFrame den aktuellen Animationszustand in jedem Bild an die Darstellung übergibt.
GSAP kann neben DOM- und SVG-Objekten auch beliebige JavaScript-Datenstrukturen animieren. Für die Anzeige werden deshalb Werte wie der Füllstand eines Segments und seine Farbe verändert. Zwei übereinander gezeichnete Segmente erzeugen den Glow-Effekt: Das hintere verwendet shadowBlur, das vordere bleibt scharf.
Animationen müssen Spielzustände abbilden
Eine Spieloberfläche kann ihren Zustand ändern, bevor eine laufende Animation abgeschlossen ist. Für solche Fälle setzt der Beitrag auf GSAP-Timelines. Sie koordinieren die einzelnen Übergänge, ohne den aktuellen Ablauf bei jedem neuen Ereignis abrupt abzubrechen. Das verhindert sichtbare Sprünge bei einer Anzeige, die während eines laufenden Spiels ständig aktualisiert werden kann.
Der Ansatz ergänzt die bereits beschriebene SVG-Animation mit JavaScript und GSAP um eine Canvas-Anwendung. Beide Techniken trennen die Daten vom sichtbaren Ausschnitt oder Zeichenstatus und eignen sich damit für interaktive Oberflächen in Spielen und Browser-Anwendungen.