Anzeige
Smartes Hosting für anspruchsvolle Projekte.
↬ Loslegen und vServer testen ↬ Jetzt testen!
Denis Potschien 2. April 2014

Adobes Snap.svg: Animationen mit HTML 5 und ohne Flash

Flash war lange Zeit der Standard für vektorbasierte Animationen im Web. Mit dem Aufkommen mobiler Endgeräte wurde Flash immer mehr von HTML5 und CSS3 verdrängt. Dank des SVG-Formates, welches mittlerweile von allen modernen Browsern unterstützt wird, können vektorbasierte Grafiken ohne Plug-in im Browser dargestellt werden. Mit der JavaScript-Bibliothek Snap.svg aus dem Hause Adobe ist es zudem möglich, Animationen mit SVG-Grafiken zu erstellen.

snapsvg

Bestehende SVG-Grafiken ansprechen und neue erstellen

Nachdem die JavaScript-Bibliothek von Snap.svg im HTML-Kopf eingebunden ist, können bestehende im HTML-Dokument eingebundene SVG-Grafiken angesprochen und neue erstellt werden.

var grafik1 = Snap("#grafik");
var grafik2 = Snap(300, 400);

Die erste Zeile unseres Beispiels greift auf das SVG-Element mit der ID grafik zu. Über die Variable grafik1 hat man somit Zugriff auf alle Elemente innerhalb des SVG-Elementes. Die zweite Zeile erstellt eine neue SVG-Grafik mit 300 Pixel Breite und 400 Pixel Höhe.

Nun hat man die Möglichkeit, bestehende Formen innerhalb der Grafik zu manipulieren oder neue Formen zu erstellen. Hierfür bietet die Bibliothek verschiedene Funktionen an, mit denen unter anderem Kreise und Rechtecke gezeichnet werden können.

var kreis = grafik1.circle(100, 100, 50);

kreis.attr({
  fill: "#00ffff",
  stroke: "#000000",
  strokeWidth: 3
});

Mit circle() wird ein Kreis gezeichnet. Die ersten beiden Werte geben die X- und Y-Koordinate für den Kreismittelpunkt an, der dritte Wert den Radius. Mit attr() geben Sie mehrere Werte für das Aussehen der Form an, zum Beispiel Füll- und Rahmenfarbe sowie Rahmenstärke. Hier ist die Angabe aller Attribute erlaubt, die vom jeweiligen Formelement unterstützt werden.

Bestehende SVG-Dateien können ebenfalls geladen und eingebunden werden. Hierzu dient die Methode Snap.load(). Sie lädt eine externe SVG-Datei, welche einer Funktion übergeben wird.

Snap.load("dreieck.svg", function (datei) {
  var dreieck = datei.select("polygon");
  grafik1.append(dreieck);
});

Im Beispiel wird die Datei dreieck.svg geladen und einer Funktion (über die Variable datei) übergeben. Über die Methode select() hat man nun Zugriff auf alle Elemente der SVG-Grafik. Mit select() wird das jeweils erste Element ausgewählt, welches angeben wird. Alternativ gibt selectAll() alle vorhandenen Elemente eines Typs als Array aus.

Mit append() wird die Formenauswahl letztendlich in die Grafik eingebunden. Extern eingebundene Grafiken lassen sich genau so ansprechen und verändern wie jene, die per Snap.svg selbst erstellt wurden. Per attr() ist es also möglich, das Aussehen des Dreiecks zu verändern.

SVG-Grafiken animieren

Neben der Manipulation von Grafiken gehört das Animieren zu den besonderen Möglichkeiten von Snap.svg. Mit animate() können die Eigenschaften einer SVG-Form über eine Bewegung verändert werden. Die Methode erwartet mindestens zwei Parameter. Der erste Parameter gibt über ein Objekt-Literal die Eigenschaften an, die verändert werden soll, der zweite die Animationszeit in Millisekunden.

Optional kann als vierter Parameter eine Easingmethode angegeben werden, welche beschreibt, wie die Animation beschleunigen beziehungsweise abbremsen soll. Als fünfter Parameter ist die Angabe einer Funktion möglich, die nach Ablauf der Animation aufgerufen wird.

kreis.animate({
  r: 100,
  cx: 100,
}, 1000, mina.easein);

Im Beispiel werden Radius und X-Koordinate des Kreismittelpunktes verändert. Die Dauer der Animation wird auf eine Sekunde gesetzt. Außerdem sorgt mina.easein dafür, dass die Animation zum Ende abbremst. Die Easing-Möglichkeiten ähneln denen, die man von CSS3 kennt.

Interaktionen wie Drag und Mouseover

Snap.svg bietet mehrere Möglichkeiten, SVG-Grafiken interaktiv zu gestalten. So ist es sehr einfach möglich, eine Form per Maus bewegbar zu machen.

kreis.drag();

Das kleine Beispiel sorgt dafür, dass der Kreis per Maus innerhalb der SVG-Fläche bewegt werden kann. Auch Mouseover-Effekte lassen sich einfach realisieren. So ist es beispielsweise möglich, eine Animation erst auszuführen, wenn man sich mit der Maus darüber bewegt.

kreis.mouseover(function() {
  kreis.animate({
    r: 100,
    cx: 50
  }, 1000);
});

Das folgende kurze Video bietet einen schnellen Überblick über die Fähigkeiten der Bibliothek und hilft bei den ersten Schritten:

Fazit

Snap.svg ist eine leistungsstarke JavaScript-Bibliothek zur Umsetzung komplexer Animationen und grafischer Anwendungen. Die JavaScript-Bibliothek ist Teil der Adobe Webplatform und steht unter einer Apache-Lizenz V2, was unter anderem garantiert, dass sie kostenlos für private und kommerzielle Zwecke genutzt werden darf. Zusätzlich zur bereits genannten Projekt-Homepage können Sie Snap.svg auch ganz klassisch via Github beziehen.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.