27.09.2024
CreateJS ist ein Framework, das Animationen als Canvas-Elemente auf Webseiten darstellen kann. Bisher fehlt die Möglichkeit, UI-Elemente in Animationen einzufügen. Diese Möglichkeit wird mit der OpenSource-Biblithek „animiert“ nachgeholt.
Auch wenn CreateJS schon in die Jahre gekommen ist, eignet es sich noch immer hervorragend für die Erstellung von einfachen 2D-Animationen, vor allem im didaktischen Bereich.
Wer mit CreateJS didaktische Animationen erstellt, wird früher oder später den Wunsch haben, ein UI-Element einzufügen, wie man es von Web-Formularen kennt, wie z.B. Checkboxen oder Eingabefelder. CreateJS erfüllt diesen Wunsch von Haus aus noch nicht. Der Schwerpunkt liegt eher auf den grundsätzlichen Grafikfunktionen. Es gibt zwei Möglichkeiten, UI-Elemente in CreateJS-Animationen einzufügen:
Beide Wege sind aufwändig. Ich habe mich für den ersten Weg entschieden. Der zweite Weg wird von der Firma Adobe gewählt. Diese Elemente wirken allerdings nicht besonders ansprechend und es ergeben sich viele Fragen bei der Implementierung.
Auf der folgenden Demo-Seite werden die neu erzeuten UI-Elemente gezeigt.
https://codepen.io/collection/VYopoj?cursor=eyJwYWdlIjoxfQ==
Der Code steht auf GitHub zur Verfügung.
https://github.com/sebriko/animiert
Die folgenden Animation zeigt die meisten dieser Element in einem konkreten Beispiel:
https://www.educational-animation.com/de/web-animation-funktionsprinzip-eines-spannungsteilers/