Heutzutage sollen viele Webseiten interaktiv und interessant wirken. Eine sehr belebende Wirkung haben da beispielsweise animierte Bilder. Da eine Animation eines regulären Bildes im Format einer Pixelgrafik sich doch eher unmöglich gestaltet, sollte man hier immer auf Vektorgrafiken, also SVGs zurückgreifen. Falls Sie sich ein Überblick verschaffen wollen, was SVGs genau sind, so können Sie dies hier nachlesen.
Sollten Sie auch einmal Bedarf an einer solchen interaktiven Website haben, so treten Sie gerne mit uns in Kontakt.
Warum Animationen?
Falls Sie sich noch fragen sollten warum Sie Animationen auf Ihrer Seite haben wollen, so lassen Sie mich dies hier erklären. Wenn Sie auf eine Website gehen, und diese bietet nur statische Inhalte, kann es schnell passieren, dass Nutzer sich gelangweilt fühlen und vielleicht wichtige Inhalte übersehen. Gerade in der B2B-Kommunikation sollte eine Webseite direkt ansprechend wirken und den Nutzer zum Bleiben verleiten. Ein paar Animationen hier und da, können Ihrer Seite schnell den gewissen Wow-Faktor geben, welcher Ihre Seite, von denen der Konkurrenz, abhebt. Durch dynamische Inhalte erreicht man genau dies. Hierdurch lässt sich sehr leicht Fokus auf wichtige Aspekte legen. Will man zum Beispiel, dass ein Nutzer auf ein bestimmtes Produkt aufmerksam wird, so kann man diesem eine kleine Animation (Microanimation) geben. Diese kann sehr unterschiedlich gestaltet werden. Von einem kurzen Aufploppen des Produktes bis hin zu ganzen Bildern, welche sich um das Produkt bewegen und sich beispielsweise je nach Scrollposition verändern. Hierbei aber aufgepasst – SVG Animationen sind auch immer eine Gratwanderung zwischen Performance und Design. Sollte eine Animation zu überladen werden und dadurch die Ladegeschwindigkeit der Seite leiden, so erzielt man sehr schnell das Gegenteil des gewollten Effekts und schreckt Nutzer eher ab. Des Weiteren sollten auch nur wichtige Aspekte mit animiert werden. Wenn jeder einzelne Teil einer Seite anfängt sich zu bewegen, kann dies den Nutzer schnell überfordern und womöglich abschrecken. Animationen, die zum Beispiel den Großteil einer Seite einnehmen, sollten nur verwendet werden, wenn dies zum Kontext der Seite passt.
Technische Aspekte von SVG Animationen
Die technische Seite von Animationen ist in den letzten Jahren schon sehr weit fortgeschritten. So unterstützen die meisten Browser heutzutage SVG basierte Animationen. Eigentlich betrifft es nur noch den Internet Explorer bei dem sich Animationen eher schwierig gestalten. Eine direkte Animation über <animation> Tags im SVG ist nicht zu empfehlen, da hier auch im relativ modernen Browser Edge keine Unterstützung vorliegt. Der hierfür zu nutzende Standard SMIL fällt somit als Option in der Regel weg.
Als nächste Möglichkeit können SVGs direkt über CSS animiert werden. Dies ist eine relativ verlässliche Variante, die auch cross-browser kompatibel ist. Sogar der Internet Explorer bietet hier teilweise Unterstützung. Bei dieser Variante werden direkt im CSS keyframe Animationen angelegt. Problematisch hierbei kann es jedoch werden, wenn man exakte Zeiten bestimmen will, da sich diese Animationen nur prozentual festlegen lassen. Da diese Möglichkeit sich je nach geforderter Aufwendigkeit der Animation sehr schnell als sehr kompliziert erweisen kann, sollte hierauf nur bei kleineren Animationen zurückgegriffen werden. Des Weiteren schleichen sich hier schnell Fehler ein, wenn man nicht gut aufpasst. Eine lästige Angelegenheit ist bei SVGs zum Beispiel die Eigenschaft ‘transform-origin’, welche für Animationen oft sehr notwendig ist. Hierbei wird der Punkt, um welchen sich ein SVG dreht, festgelegt. Zum Einen muss man beachten, hier keine relativen Werte wie ‘50% 50%’ oder ‘top center’ zu übergeben, da diese von Browsern wie Firefox nicht interpretiert werden können. Zum Anderen ist hier zu beachten, dass bei SVGs der Ursprung nicht vom eigenen Element ausgehend berechnet wird, sondern von dem darüber liegenden Eltern-Element. Wenn man solche Anforderungen nicht gerade alle im Kopf hat, oder vielleicht noch sehr neu im Umgang mit SVGs ist, sollte man es sich vielleicht noch mal genau überlegen alle CSS Animationen selbst zu bauen. Außer natürlich man macht es genau wie ich und verbringt gerne einige Stunden auf Stackoverflow.
Die vermutlich einfachste und verlässlichste Lösung zur Animation von SVGs ist wohl das Zurückgreifen auf JavaScript. Hier bieten viele Bibliotheken, wie Snap.JS, eine sehr gute Basis, auf welcher sich Animationen bauen lassen. Gerade Snap.JS stellt bereits Funktionalitäten, mit welchen sich ganze SVGs schon über minimale Codebausteine komplett erstellen lassen können. Theoretisch ist somit nicht mal mehr ein Grafikprogramm wie Illustrator etc. nötig um das SVG vorher zu erstellen. Es ist allerdings hilfreich eine fertige SVG vom Grafiker zu bekommen, gerade wenn man als Programmierer vielleicht nicht die besten Grafikkenntnisse hat. Die Animation mit solchen Grafiken erfolgt dann so einfach, wie man es sich nur vorstellen kann.
Hier ein kleines Beispiel, wie dann ein solcher Code aussehen könnte:
var s = Snap(‘#svg’); // Selektiert alle Elemente mit der ID svg. Hierbei sollte es sich um ein Element mit dem <svg> Tag handeln
var circle = s.circle(150, 150, 100); // Erstellt einen einfach schwarzen Kreis an den Koordinaten (150,150) mit einem Radius von 100px
circle.animate({r:50}, 1000) // Der Kreis verkleinert sein Radius auf 50px in einer Animation innerhalb von einer Sekunde
Hier sehen wir, dass sich ein SVG über die passende Bibliothek sehr einfach animieren lässt. Natürlich lässt sich dies wie im oben gezeigten Beispiel auch auf bereits existierende Grafiken anwenden. Hierbei muss die Grafik vorher passend aufbereitet sein, so dass sich einzelne Teile des SVGs auch mit den entsprechenden Selektoren ansteuern lassen.
Natürlich hat eine Animation über JavaScript auch ihre Nachteile. Eine große Bibliothek wie Snap.JS kann schnell zu mächtig sein, für kleine Animationen. Hier den Spagat zwischen Aufwand einer Animation und Workload für eine Seite zu meistern, kann bei Grenzfällen sehr schwierig sein.
Es lässt sich auch eine solche Animation ohne externe Bibliothek erstellen, jedoch wird dies vermutlich fast noch mehr Aufwand bedeuten, als eine Animation über CSS.
Sollten Sie also jemals dazu aufgefordert sein, eine solche Animation zu bauen, so wägen Sie von vorneherein ab, wie aufwendig diese wird und nutzen Sie dann entweder CSS-Keyframe Animationen oder eine passende JS-Bibliothek.
Fazit
SVG Animationen helfen Ihre Webseite zu beleben und sind, im richtigen Maß eingesetzt, eine Bereicherung für alle Seiten. Gerade im Bereich des B2B eingesetzt, können Animationen die Nutzer über Ihre Seite leiten und somit für eine sehr angenehme Erfahrung der Nutzer sorgen. Wer also sein Unternehmen gegenüber anderen hervorheben will, der kann dies durch Animationen erreichen.
