Digital First: Loading

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 Blogartikel zum Thema:

loading
Nach oben
 

Hallo!
Sie möchten mit uns zusammenarbeiten? 

Welche Themen sind für Sie interessant?

ICH

Erzählen Sie uns doch bitte ganz kurz worum es geht.

ICH

Gerne würden wir mehr darüber erfahren! Wie dürfen wir Sie denn kontaktieren?

Wie dürfen wir Sie denn kontaktieren?


ICH

An welche Addresse sollen wir die Mail schicken?

Unter welcher Nummer sind Sie am besten erreichbar?

Leider sind zur Zeit alle MASSIVE DOVES auf Urlaub ;) Wollen Sie uns alternativ vielleicht eine Telefonnummer oder E-Mail Adresse hinterlassen, unter der Sie erreichbar sind?

ICH

Bitte geben Sie eine gültige E-mail Adresse ein.


Verraten Sie uns noch Ihren Namen?

ICH

Zum Schluss noch etwas Bürokratie #DSGVO:

Vielen Dank für Ihre Anfrage! Wir werden uns so rasch wie möglich bei Ihnen melden.

Es ist etwas schiefgelaufen.
Bitte lade die Seite neu und versuch es noch einmal.