Was ist HTML5-Animation?

HTML5-Animation basiert, wie der Name schon sagt, auf der fünften Fassung der «Hypertext Markup Language», kurz HTML5. Seit diese neue Kernsprache des World Wide Web von einer großen Mehrheit der Nutzerbrowser verstanden wird, stehen dem Webanimator wieder viele Optionen zur Verfügung, die früher die Flash-Technologie bot.

Zentral ist das Element Canvas («Leinwand»), eine Art Zeichenoberfläche, die u.a. Kreisbögen, Bézier-Kurven, Farbverläufe und vom animatorischen Standpunkt her Rotationen, Skalierungen und Beschneidungen von Objekten und Objektgruppen erlaubt. Konkret heisst das, dass komplexe, aus Bézier-Kurven zusammengesetzte Vektorgrafiken nach Belieben gedreht, skaliert, verzerrt und neu positioniert werden können.

Eine Bewegung wird daraus jedoch erst, wenn die zeitliche Dimension hinzutritt. Dafür ist das zweite unverzichtbare Standbein der HTML5-Animation, die ebenfalls immer weiter entwickelte Programmiersprache Javascript, zuständig. Erst eine Intervall-basierte Timeline, wie sie sich mit Javascript erzeugen lässt, bringt die Objekte zum Tanzen und haucht der Canvas-Oberfläche Leben ein.