Das Open Animation Lab ist ein Online-Programmierwerkzeug für didaktische Animationen.
Die fertigen Animationen sind als HTML-Dateien exportierbar und können anschließend auf jeder Webseite eingebunden oder lokal genutzt werden.
Es gibt viele fertige Klassen. Möchten Sie z.B. GUI-Elemente erstellen, genügen dafür wenige Zeilen Code.
Lassen Sie sich nicht davon abschrecken, dass es ein codebasiertes Tool ist, mit dem Sie nicht zeichnen können. Sie können Bilder einfach als SVG-Dateien (wahlweise auch PNG-Dateien) importieren.
Das Tool nutzt zur Darstellung von Animationen zwei unterschiedliche Open-Source-Renderer. SVG.js ist die Standard-Engine. Ihr Vorteil ist die gestochen scharfe Darstellung. PixiJS kann für Animationen genutzt werden, die eine hohe Rechenperformance erfordern (z.B. interaktive Echtzeitanimationen). Die Darstellung ist ebenfalls hoch aufgelöst, aber je nach Displaygröße (z.B. 4K-Monitore) nicht immer gestochen scharf.
Erste Schritte
Nach dem Start der Anwendung sehen Sie die folgende Ansicht:
Im linken Bereich stehen Ihnen verschiedene Vorlagen zur Verfügung. Anhand der Vorlagen können Sie schnell sehen, was in dieser Software möglich ist. Zu jedem Objekt gibt es eine Vorlage. Durch kleine Experimente findet man sich schnell ein. Falls Sie eine systematische Einarbeitung bevorzugen, gibt es auch eine Software-Referenz.
Nach dem Öffnen einer Vorlage sieht es z.B. so aus:
Im rechten Bereich erscheint der Inhalt der Animation. Im linken Bereich sehen Sie den Code, der die Animation erzeugt.
Links oben sehen Sie die Bezeichnung des aktuellen Tabs.
Sie können beliebig viele Tabs öffnen, um z.B. weitere Vorlagen zu öffnen oder kleine Entwürfe zu erstellen.
Über die Leiste rechts oben haben Sie Zugriff auf eine Öffnen- und Speichern-Funktion. Hier können Sie Animationen auch als HTML-Dateien exportieren.
Unten links finden Sie Schaltflächen, die Sie häufig benötigen. Nach Änderung des Codes können Sie hier die Animation aktualisieren. Sie können nach Strings suchen und Meldungen anzeigen.
Um eine Meldung zur erzeugen, geben Sie im Editor den folgenden Code ein
console.log("Hello World");Achtung: Diese Meldungen werden im RAM Ihres Geräts gespeichert. Falls es mehrere Meldungen sind, z.B. bei wiederholten Ausgaben, verlangsamt dies die Animation spürbar.
Last but not least sehen Sie rechts unten zwei Schaltflächen, um einen Screenshot zu erstellen und in den Vollbildmodus zu wechseln.
Der Codeeditor
Wenn Sie sich einige vorhandene Vorlagen anschauen, werden Sie am Rande einer Zeile manchmal ein Info-Icon bemerken.
Diese Icons erscheinen, wenn eine Klasse bereits vordefiniert ist. Wenn Sie auf das Icon klicken, wird ein Formular angezeigt.
Das Formular enthält alle Informationen über das Objekt. Sie können hier auch die Initialisierungsparameter verändern. Das Formular dient somit als Referenz und als schnelle Änderungsmöglichkeit in Einem.
Animation auf Webseite einbinden
Eine exportierte Animation können Sie auf Ihrer Homepage z.B. über den folgenden Code einbinden:
Bemerkungen zum Schluss
Zu allen vordefinierten Klassen werden Sie mindestens eine Vorlage finden. Sie können sich dadurch spielerisch in das Tool einarbeiten. Eine vollständige Übersicht über alle Klassen finden Sie unter dem folgenden Link:
Falls Sie den Editor auf der Homepage Ihrer Schule hosten möchten, können Sie ihn unter dem folgenden Links herunterladen: