Wie man physische Animationen eigenständig programmiert

2017-07-20 Wie man physische Animationen eigenständig programmiert MASSIVE ART
Die MASSIVE ART Animation ist mit einer JavaScript Physics Engine aufgebaut.

Wenn ich so durch's Web surfe, fällt mir auf, wieviel Wert auf animierte Elemente gelegt wird. Eine Animation ist definitiv immer ein Blickfang – in der Umsetzung aber recht komplex. Meine Erfahrungen dazu am Beispiel einer Website-Animation.

Ein Video, das als Header fungiert oder eine Animation, die durch Scrollen ausgelöst wird – bei gut ausgearbeiteten Animationen wird der Besucher neugierig und bleibt hängen. Genau diesen Effekt wollten wir auch für unsere MASSIVE ART-Website. Und da kam ich ins Spiel.

Anforderungen zur Animation

Die neue MASSIVE ART-Website sollte eines nicht sein: Statisch. Unser Ziel war es, die Besucher mit einer Animation abzuholen und ihnen anhand dieser, unser Tun zu erklären.

Bevor ich mit der Programmierung beginnen konnte, habe ich mich mit unseren Designern Philipp Gabl und Tim Armbruster zusammengesetzt. Sie hatten im Vorfeld bereits ein Video erstellt, an dem ich mich orientieren konnte. Die Vorlage half mir sehr. Denn für mich wurde so deutlich, wie die Animation ablaufen sollte. Und ich konnte das Material in verschiedene Sequenzen unterteilen. 

Research zur JavaScript Physics Engine

Der erste Teil der Animation stach von Beginn an hervor. Die herunterfallenden Bälle mussten physisch agieren (siehe Animation). Da ich zuvor noch nie eine JavaScript Physics Engine verwendet habe, nahm ich einen längeren Research vor und habe mich für Matter-JS entschieden. Überzeut hat mich bei Matter-JS im Wesentlichen, dass der Code Open-Source ist und das Projekt aktuell auf GitHub weiterentwickelt wird. Dadurch ist die Dokumentation umfangreich und die Community ziemlich aktiv. 

Animation: Die Bubbles in der Animation agieren physisch.

Kleinere Datenmenge und Autoplay

Für uns gab es zwei wichtige Gründe, warum wir uns für die eigenständig programmierte Animation und gegen die Produktion eines Videos entschieden haben: 

  1. Für die Animation – bestehend aus JavaScript, Canvas und SVG – ist kaum externer Code notwendig. Im Vergleich zu einem Video erspart man sich bestimmt mehrere MB.
  2. Animationen können auf mobilen Geräten automatisch abgespielt werden, wenn der User in den sichtbaren Bereich scrollt. Bei Videos sieht das ganz anders aus – Autoplay wird meist gar nicht unterstützt. Falls doch, wird das Video im Fullscreen-Modus geöffnet.


Code-Strukturierung ist unverzichtbar

Die Intro-Animation auf der MASSIVE ART-Website arbeitet von Anfang bis Ende meist mit den selben Elementen. Daher war es für mich extrem schwierig, den Code so zu strukturieren, dass er verständlich bleibt. Ich habe diesen deshalb während der Umsetzung mehrfach umstrukturiert und verbessert.

Eine weitere Herausforderung war die Performance: Leider kann nicht jedes Gerät – vor allem Smartphones und Tablets – gleich gut mit einer solchen Animation umgehen. Deswegen habe ich auch immer wieder versucht, die Performance stabil zu halten und habe dies bestmöglich erreicht. 

Fazit

Für mich war die Umsetzung der Animation eine spannende Zeit. Ich konnte viel Neues dazu lernen, das ich hoffentlich in Zukunft wieder anwenden kann.

Diskutieren Sie mit uns auf Facebook und Twitter . Natürlich freuen wir uns auch über ein E-Mail von Ihnen.

Mehr Artikel zum Thema:

Coffee Kids Google AdGrants Blog Header Coffee Kids: Wissen teilen und Gutes tun
2017-09-12 MASSIVE ART Blog WebSummerCamp Vorschaubild WebSummerCamp – Konferenz mit Urlaubsfeeling
2017-09-06 MASSIVE ART Blog Mädchen in die Technik Vorschaubild Von Roboterworkshops und Mädchen, die Bagger mögen
loading
Nach oben