Anzeige
Anzeige
UX & Design
Artikel merken

Reanimation für’s Web: Einführung in Animationen ohne Flash mit Snapsvg

Eine einfache Alternative für bewegte Bilder im Web ganz ohne Flash hört auf den Namen Snapsvg. Das beste und gleichzeitig mächtigste Feature daran ist neben den Animationen selbst die universelle Anwendbarkeit auf mobilen Endgeräten. Der folgende Artikel liefert einen Überblick über die Möglichkeiten von Snapsvg und eine Einführung in die Praxis.

6 Min. Lesezeit
Anzeige
Anzeige

Animationen mit Snapsvg.

Animationen sind das Herz von Snapsvg. Etwas Background kann nicht schaden und daher lohnt sich ein Blick auf das Grundgerüst SVG. SVG steht für Scalable Vektor Graphics, eine auf XML basierende Spezifikation, die vom World Wide Web Consortium (W3C) als eine Empfehlung für die Darstellung zweidimensionaler Vektorgrafiken gilt. Im Gegensatz zu einer gewöhnlichen Rastergrafik basiert die Vektorgrafik nicht auf einem Pixelraster, sondern aus grafischen Primitiven wie Linien, Kreisen, Polygonen oder allgemeinen Kurven. Hier liegt auch der entscheidende Vorteil einer Vektorgrafik, denn sie wird je nach Größe berechnet und kann daher ohne Qualitätsverlust dargestellt werden.

Anzeige
Anzeige

Seit sich Responsive Webdesign durchgesetzt hat, entstehen ganz neue Anforderungen und Möglichkeiten. Alles muss sich online anpassen können und gleichzeitig sollte die Qualität mindestens gleich gut bleiben – wenn nicht sogar besser sein. Hier springt SVG in die Bresche, denn einer der schwerwiegendsten Nachteile von Flash ergibt sich aus dem Fakt, dass die Technologie nicht auf allen mobilen Endgeräten zur Verfügung steht. Wer Animationen auch mobilen Nutzern ohne Ausgrenzung ausliefern will, kann auf SVGs in Verbindung mit Snapsvg setzen – eine deutlich schlankere Lösung als Flash. Einen kleinen Vorgeschmack über die beachtlichen Möglichkeiten von Snapsvg erhalten Interessierte auf der Snapsvg-Website.

Snapsvg: Schlank und Open Source

Snapsvg ist eine sehr gute Möglichkeit um SVGs auf der eigenen Website einzubinden, denn es handelt sich um eine Open-Source-JavaScript-Library, die
von Adobe auf der HTML5 Developer’s Conference in San Francisco vorgestellt wurde. Snapsvg macht es Webentwicklern möglich, eigene Vektorgrafiken im SVG-Format zu erstellen und interaktiv zu gestalten. Das ist aber noch nicht alles. Diese Library kann außerdem mit Vektorgrafiken umgehen, die bereits mittels Illustrator oder einer anderen vektorbasierten Zeichensoftware erstellt wurden. Somit lassen sich diese problemlos in die Website einbinden und weiterverarbeiten. Die intuitive API bietet Webentwicklern viele Möglichkeiten, um die SVGs zu bearbeiten oder auch zu animieren.

Anzeige
Anzeige

Wer bereits mit Raphaël zu tun hatte, wird auch zu Snapsvg eine Vorliebe entwickeln. Beide Libraries stammen vom selben Entwickler – Dmitry Baranovskiy. Er hat sich die Mühe gemacht und die komplette Library von Grund auf neu entwickelt und an die Möglichkeiten moderner Browser angepasst.

Anzeige
Anzeige

Der Fokus der Snapsvg-Library liegt nicht auf der Unterstützung von älteren Browser-Versionen. Für diesen Fall sollte eher auf die verwandte Library Raphaël zurückgegriffen werden. Snapsvg kann seine Stärken lediglich im Kontext moderner Browser wie Chrome, Firefox, Safari, Opera und IE9+ ausspielen. Beim Einsatz von SVGs auf mobilen Geräten müssen Entwickler allerdings auf CSS-Basics wie Breite und Höhe des Containers, in dem das SVG-Objekt platziert ist, achten. Ein nettes Beispiel dafür ist pbskids.org, denn dort wird bereits die Snapsvg-Library verwendet und liefert bei jeder Auflösung gestochen scharfe Grafiken.

Die Startseite von snapsvg.io gibt einen kurzen Überblick, warum und wofür sich der Einsatz von SVG und Snap eignet.

Die Startseite von snapsvg.io gibt einen kurzen Überblick, warum und wofür sich der Einsatz von SVG und Snap eignet.

Snapsvg ist nicht nur aufgrund der mobilen Möglichkeiten eine mehr als probate Alternative zu Flash. Ein weiterer Vorteil von Snapsvg ist die Unterstützung einiger sehr mächtiger Features für vektorbasierte Grafiken.

Anzeige
Anzeige

Fancy Animationen mit Snapsvg

Anhand eines Beispiels lässt sich gut erkennen, wie leicht das Erstellen einer animierten Vektorgrafik mit Hilfe des interaktiven API ist. Als Beispiel dient ein Mail-Icon, dessen Wechsel zwischen zwei Zuständen animiert werden soll – geöffnet und geschlossen. Als erstes gilt es, die Snapsvg-Bibliothek im Head-Bereich zu integrieren, um danach ein HTML-Element zu erstellen.

Lib und Depends einbinden:

<script xsrc="js/snap.svg-min.js"></script>

Listing 1

Im darauf folgenden JavaScript-Code wird das SVG-Icon geladen und konfiguriert. Anschließend folgt eine Initialisierung des Icons mit der vorher definierten Konfiguration.

Das Icon einbinden:

<section class="si-icons si-icons-default">
	<span id="mail-icon" class="si-icon si-icon-mail" data-icon-name="mail"></span>
</section>

Listing 2

Als nächstes folgt die Definition der Animation selbst.

Anzeige
Anzeige

Animation definieren:

<script>
	(function() {
		//Animation configuration
		var svgIconConfig = {
			mail: {
				url: 'svg/mail.svg',
				animation: [{
					el: 'path',
					animProperties: {
						from: {
							val: '{"path" : "m 61.693118,24.434001 -59.386236,0 29.692524,19.897984 z"}'
						}
						to: {
							val: '{"path" : "m 61.693118,24.434001 -59.386236,0 29.692524,-19.897984 z"}'
						}
					}
				}]
			}
		};
		//Initialize
			var svgicon = new svgIcon(document.getElementByID("mail-icon"), svgIconConfig);

	})();
</script>

Listing 3

Der Aufbau des Codes dürfte gestandene Entwickler vor keine großen Probleme stellen. Eine detaillierte Erläuterung des Codes kann dennoch nicht schaden:

  • Icon Name: dieser muss mit dem Wert des „data-icon-name“-Attributes übereinstimmen
  • url: hier befindet sich die URL zur entsprechenden SVG Datei
  • animation: Ein Array bestehend aus Animationskonfiguration
  • 
el: Der Selector des Elementes, also worauf soll die Animation angewendet werden. In diesem Beispiel ist es „path“
  • animProperties: Hier befindet sich die Animationskonfiguration für den „from“ (der Ursprungszustand) und den „to“ (den End-/Zielzustand)

Das Mail-Icon wird aus dem geschlossenen Zustand in den geöffneten Zustand animiert. Dazu verwendet man folgende anim-Properties:

Animation um die Z-Achse:

from: {
	val: '{"path" : "m 61.693118,24.434001 -59.386236,0 29.692524,19.897984 z"}'
},
to: {
	val: '{"path" : "m 61.693118,24.434001 -59.386236,0 29.692524,-19.897984 z"}' }

Listing 4

In der Animation wird der Pfad so geändert, dass das Mail-Icon geöffnet ist. Im Beispiel wird mit relativen Koordinaten gearbeitet. Beim Pfad startet man bei Punkt 61.693118, 24.434001 (x / y) durch die „m“-Anweisung. Dann wird der Pfad solange gezogen, bis er eine Dreiecksform bildet. Schließlich wird der Pfad mit der Angabe von „z“ (ClosePath) geschlossen. Diese Angabe verbindet den zuletzt angegebenen Punkt mit dem Punkt, der als letztes mit einer Anweisung angegeben wurde (in diesem Fall „m“).

Anzeige
Anzeige
Schritt für Schritt zum Dreieck. Die Grafik verdeutlicht, wie mit dem vorangehenden Code ein Dreieck allein durch Pfadangabe erstellt wird. Dieses wird für die Animation des Mail-Icons benötigt.

Schritt für Schritt zum Dreieck. Die Grafik verdeutlicht, wie mit dem vorangehenden Code ein Dreieck allein durch Pfadangabe erstellt wird. Dieses wird für die Animation des Mail-Icons benötigt.

Nach der Konfiguration des Icons muss es nur noch initialisiert werden:

Initialisierung eines Objekts:

new svgIcon(SVG Element, Konfiguration [, weitere Optionen]);

Listing 5

Als weitere Optionen dienen folgende Eigenschaften.

Definition der Eigenschaften:

speed : 200, //Animationsgeschwindigkeit
easing : mina.linear, //Animationsverlauf
evtoggle : 'click', //Das Event worauf das zu animierende Element
reagiert.
size : { w : 64, h : 64 }, //Größe
onLoad : function() { return false; }, //Wird aufgerufen wenn das SVG
Element geladen wird.
onToggle : function() { return false; } //Wird durch eine Aktion auf das SVG Element aufgerufen z. B. MouseOver, Click

Listing 6

Das Beispiel beschränkt sich jedoch auf das Element und die bereits erstellte Konfiguration. Das Element wird wie folgt initialisiert:

Anzeige
Anzeige

Initialisierung als Objekt:

var svgicon = new svgIcon(document.getElementById("mail-icon"), svgIconConfig);

Listing 7

Das Ergebnis ist eine Animation eines skalierbaren Mail-Icons. Mit ein wenig Übung und einem kurzen Blick in die Dokumentation lassen sich auch anspruchsvollere Animationen umsetzen.

Des Weiteren besteht die Möglichkeit, die Grafiken beispielsweise mit Adobe Illustrator zu erstellen, um sie anschließend mit Snapsvg weiterzuverarbeiten. Auch die Verarbeitung von SVG Strings, die zum Beispiel mit Ajax geladen wurden, ist möglich. Somit kann nach spezifischen Formen gesucht werden.

Die jQuery-ähnliche Syntax, die Snapsvg auszeichnet, dürfte Web- und Frontend-Entwicklern zudem entgegenkommen – was im folgenden Code-Snippet deutlich wird:

Anzeige
Anzeige

jQuery:

$("a.group").slider({
	'transitionIn' : 'elastic', 'speedIn' : 600, 'speedOut' : 200, 'overlayShow' : false });

Listing 8

Snapsvg:

circle.attr({
	fill: "#FFF", stroke: "#000", strokeWidth: 3 });

Listing 9

Zeichnen mit Snapsvg als weiteres Feature

Snapsvg bietet neben Animationen auch Funktionen zum Erstellen und Befüllen von Formen wie Kreisen, Rechtecken und andere Figuren. Schnittmasken, Patterns und Gruppen sind weitere wichtige Features der Library.

  1. Schnittmasken bieten dem Anwender die Möglichkeit, Bereiche des Bildes zu verstecken, ohne dabei die Bildinformationen komplett zu verlieren. Die sichtbaren Bereiche liegen vielmehr innerhalb der Form des Maskenobjekts (zum Beispiel eines Kreises). Es wird also das Bildmaterial auf die Maske zugeschnitten.
  2. Patterns sind Muster und teilen sich in Füllmuster zum Füllen von Objekten und Pinselmuster, die zum Füllen von Objektkonturen verwendet werden.
  3. Gruppen ermöglichen schließlich das Gruppieren mehrerer erstellter Elemente, um bestimmte Effekte und andere Veränderungen gleichzeitig auf eine ganze Gruppe von Elementen anzuwenden.

Fazit: Das Web ganz ohne Flash animieren

Snapsvg macht es möglich, das Web auch ganz ohne Flash zu animieren. Die bereitgestellte API eignet sich dazu, jede SVG im Handumdrehen zum Leben zu erwecken und den Inhalt
einer Website auf einfache Weise interaktiv zu gestalten. Durch den Einsatz von Media Queries und SVGs sind beispielsweise responsive
animierte Werbebanner für verschiedene Werbeformate innerhalb einer Datei im Handumdrehen
erstellt – und das ganz ohne Flash.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
3 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Hans Meyer

Wenn ich mir die Syntax anschaue, warte ich lieber auf das nächste Framework. Inkonsistenzen ohne Ende. Abkürzungen und ausgeschriebene Worte, Camelcase und Lowercase, Objekte und JSON-Strings alles gemischt. Wer da den Überblick behalten will, wird zwangsläufig in ähnliche Probleme laufen wie bei ExtJS.

Antworten
Insomnia88

Läuft das auch auf gingerbread? Scheint für mich fast so als sei es leichter normale svg mit css/javascript zu editieren :P Was ja auch in IE9+ alles sowieso kein Problem ist.

Antworten
fdsfsd

Gingerbread? Also bitte…..

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige