medani-pixel
news
13
Sep 19

Webanimationen effizient einsetzen 

Im heutigen Beitrag werfen wir einen Blick auf die JavaScript Library „Greensock“ und was man damit alles umsetzen kann. Als Ausgangspunkt werden optimierte Vektorgrafiken im SVG Format verwendet, die dann in Verbindung mit einer oder mehrerer Timelines den Browser zum Leben erwecken.

Webanimationen effizient einsetzen

Animationen sind nicht nur ein wichtiger Bestandteil der User Experience, sondern tragen auch immer öfter einen Teil zur Ästethik des Designs bei. Sie hauchen einem sonst leblosen Webdesign das nötige Leben ein, können ein visueller Hinweis sein, der Benutzer auf ein Geschehnis aufmerksam macht, oder einfach nur nett anzusehen sein. Wie auch bei anderen Dingen im Leben gilt auch hier, mit Maß und Ziel. Man will die BesucherInnen schließlich nicht mit unzähligen und unnötigen visuellen Reizen überfordern, sondern sollte stets darauf achten das richtige Verhältnis zwischen „zu aufdringlich“ und „lahm und leblos“ zu finden. Wie auch ein Design, werden auch Animationen von Person zu Person unterschiedlich wahrgenommen, umso mehr ist es wichtig immer die Personen die damit interagieren im Hinterkopf zu behalten.

 

Zur Umsetzung von Animationen im Web steht uns CSS oder JavaScript zur Verfügung. Ob oder wann CSS oder JS zum Einsatz kommt, hängt von mehreren Faktoren ab, allgemein kann man aber sagen, dass JS häufiger als CSS zum Einsatz kommt. Der große Vorteil von JS gegenüber CSS liegt darin, dass CSS nicht mit allen Browsern kompatibel ist. Beim guten alten Internet Explorer kann über CSS beispielsweise nur die Opacity angesteuert werden, was die Möglichkeiten natürlich extrem limitiert. Umgekehrt ist aber JS auch etwas umfangreicher als CSS, was bedeutet, dass die Einarbeitung etwas intensiver ist als mit CSS.

 

Aber so tief ins technische wollen wir heute garnicht eintauchen. Viel mehr wollen wir euch heute eine Möglichkeit für Webanimationen mithilfe von Greensock vorstellen. Bei Greensock handelt es sich um eine JavaScript Library, mit der simple Animationen wie einfache Bewegungen, Rotationen und Skalierungen, aber auch das Nachzeichnen von Linien oder auch Morphing zwischen zwei unterschiedlichen Elementen möglich sind. Bei komplexeren Animationen sind optimierte SVGs ratsam. Diese werden so aufbereitet, dass die einzelnen SVG Elemente angesprochen werden. Danach werden einzelne oder mehrere Timelines erstellt, die dann beim Laden oder Scrollen mithilfe eines Triggers abgespielt werden.

 

Hier einige Beispiele wie eine JS-Animation mithilfe von Greensock aussehen kann:

Webanimation Lage und Erreichbarkeit

Webanimation zur Visualisierung der Lage und Erreichbarkeit

Im oberen Beispiel wurde ein statisches Hintergrundbild mit ein paar SVG Elementen geschmückt und anschließend auf mehreren Timelines animiert. Hier kommt auch beispielweise die „Nachzeichnen“-Funktion zum Einsatz.

 

Unterhalb stellen wir ein Beispiel einer interaktiven Informationsgrafik vor. Hier wurde mit eigentlich einfachen Mittel und mit nicht allzu viel Aufwand eine ziemlich ansehliche Grafik gezaubert. Hier wurde das statische Hintergrundbild mit Farbfüllungen auf einer seperaten Ebene im SVG Format hinterlegt, und mittels JS die einzelnen Ebenen angesprochen.

Interaktive Animation

Beispiel einer interaktiven Animation.

 

 

 

 

 

 

 

 

 

 

 

 

 

Das ganze geht natürlich auch etwas spektakulärer und mit etwas mehr als einer Füllebene. Im nachstehenden Beispiel kommen etwas mehr Ebenen, Tooltips und Animationen zum Einsatz.

Interaktiver Lageplan

Interaktiver Lageplan

 

 

 

 

 

 

 

 

 

 

 

 

Wie man sieht, lässt sich mit Greensock einiges machen. Falls ihr Greensock selbst noch nicht probiert habt, können wir es nur wärmstens empfehlen. Mit ein bisschen Einarbeitung lassen sich, wie schon erwähnt, relativ flott und einfach recht ansehnliche Animationen zaubern.

Wenn ihr Fragen dazu habt, schreibt sie ruhig in die Kommentare. Wir beantworten euch gerne eure Fragen und helfen immer gerne weiter.

SENDEN
SENDEN