Flexibel: Vivus-Framework animiert SVG mit JavaScript

Dass mit dem SVG-Format in Kombination mit JavaScript anspruchsvolle und schicke Animationen möglich sind, beweisen die vielen Frameworks, die solche Animationen realisieren. Vivus reiht sich ein in diese Liste. Statt mit umwerfenden 3D-Effekten zu punkten, geht Vivus einen anderen Weg: Das Framework sorgt dafür, dass mehr oder weniger einfache Strichgrafiken per Animation gezeichnet werden. Dank einiger Einstellungsmöglichkeiten wird so aus einer ziemlich simplen Grafik ein sehr ansehnlicher Effekt.

Voraussetzung für eine animierte Strichgrafik

Damit aus einer statischen SVG-Grafik mit Vivus eine Animation wird, müssen die zu animierenden Formen eine sichtbare Kontur besitzen. Denn Vivus animiert nur die Kontur eines SVG-Elementes. Daher sollte eine Form immer ohne Füllung vorliegen. Dazu genügt es, den Formen die Eigenschaft “fill: none” hinzuzufügen.

Technisch erfolgt die Animation per Stylesheet. Dazu werden die CSS-Eigenschaften „stroke-dasharray“ und „stroke-dashoffset“ verwendet. Die beiden Eigenschaften dienen eigentlich dazu, gestrichelte Linien darzustellen. Die Werte für die beiden Eigenschaften beschreiben die Länge eines Strichs sowie den Abstand zwischen den Strichen. Vivus nutzt diese Eigenschaften, um einer Form eine gestrichelte Linie zuzuweisen, bei der der Abstand („stroke-dashoffset“) per „animation“-Eigenschaft von 1000 auf 0 reduziert wird. Der Wert für „stroke-dasharray“ wird dabei so gewählt, dass die gestrichelte Linie der Form nur einen Strich aufweist.

Da sich die beiden genannten CSS-Eigenschaften nur auf „<path>“-Elemente anwenden lassen, muss neben der Datei „vivus.js“, welche für die eigentliche Animation zuständig ist, auch die Datei „pathformer.js“ im HTML-Dokument eingebunden werden. Pathfinder sorgt dafür, dass alle SVG-Formen von Vivus automatisch in ein „<path>“-Element umgewandelt werden.

SVG-Grafik per Vivus animieren

Für eine Animation muss zunächst eine SVG-Grafik in einem HTML-Dokument verfügbar gemacht werden. Damit es später per Vivus animiert werden kann, defineiren wir auch eine ID, über die die Grafik später ansprechbar ist.

<svg id="strichgrafik">
  <path stroke="blue" stroke-width="2" fill="none" d="…" />
  <rect stroke="blue" stroke-width="2" fill="none" x="0" y="0" width="100" height="200" />
</svg>

Im Beispiel werden ein „<path>“-Element sowie ein Rechteck per SVG definiert. Anschließend wird per JavaScript der Grafik die Vivus-Animation hinzugefügt.

1	new Vivus("strichgrafik", {type: "delayed", duration: 500}, callback);

Dies geschieht, indem wir ein neues „Vivus()“-Objekt erstellen. Erwartet werden mindestens zwei Parameter. Der erste ist die ID der SVG-Grafik. Es folgt ein Literalobjekt mit verschiedenen Einstellungen für die Animation. Optional kann noch eine Callback-Funktion angegeben werden, die nach Beendigung der Animation ausgeführt wird.

Per „type“ geben wir die Art der Animation an. Der Wert „delayed“ sorgt dafür, dass die Animation die in „duration“ angegebene Dauer lang ist. Dabei werden alle Formen mit einem kleinen zeitlichen Versatz gleichzeitig gezeichnet. Der Wert für „duration“ ist dabei nicht in Sekunden oder Millisekunden angegeben, sondern in Frames. Mit dem Typ „async“ startet die Animation alle Formen ohne zeitlichen Versatz.

Neben „delayed“ und „async“ gibt es noch den Wert „oneByOne“. Dieser sorgt dafür, dass alle Formen nacheinander gezeichnet werden – im Beispiel also erst der Pfad und anschließend das Rechteck. Der Wert für „duration“ gilt hier für jede zu zeichnende Form.

Eine SVG-Grafik unterschiedlich animiert

Die Formen werden in der Reihenfolge animiert, wie sie in der SVG-Grafik angelegt sind.

Individuelle Animation mit einem „Szenario“

Als letztes gibt es noch den Typ „scenario“. Hierbei hat man die Möglichkeit, die Animation für jede einzelne Form einer SVG-Grafik individuell anzugeben.

1	new Vivus("strichgrafik", {type: "scenario", duration: 500}, callback);

Für die einzelnen Formen der SVG-Grafik lassen sich nun per Data-Attribut ein Startpunkt („data-start“) sowie eine Dauer („data-duration“) für die Animation definieren.

<svg id="strichgrafik">
  <path data-start="500" data-duration="750" stroke="blue" stroke-width="2" fill="none" d="…" />
  <rect data-start="0" data-duration="1500" stroke="blue" stroke-width="2" fill="none" x="0" y="0" width="100" height="200" />
</svg>

Im Beispiel startet die Animation für den Pfad bei 500 Frames und dauert 750 Frames. Das Data-Attribut „data-duration“ überschreibt hierbei die im JavaScript angegebene Dauer.

Eine Alternative für „scenario“ ist „scenario-sync“.

1	new Vivus("strichgrafik", {type: "scenario-sync", duration: 500}, callback);

Bei dieser Form wird kein absoluter Startwert angegeben, sondern ein Delay. Dieser Delay beschreibt die Zeit, die zwischen dem Ende der vorherigen Animation und dem Start einer neuen Animation vergehen soll.

<svg id="strichgrafik">
  <path data-delay="0" data-duration="750" stroke="blue" stroke-width="2" fill="none" d="…" />
  <rect data-delay="250" data-duration="1500" stroke="blue" stroke-width="2" fill="none" x="0" y="0" width="100" height="200" />
</svg>

Im Beispiel beginnt die Animation des Pfades sofort. Das Rechteck wird 250 Frames nach Ende der Pfadanimation animiert. Gerade bei vielen zu animierenden Formen kann es einfacher sein, mit diesem Typ zu arbeiten.

Animationsstart definieren

Normalerweise startet die Animation der SVG-Grafik automatisch. Da eine Grafik mitunter erst durch Scrollen sichtbar wird, gibt es die Möglichkeit, die Animation erst dann zu starten, wenn sich die Grafik im Viewport des Browsers befindet. Dazu wird der Eigenschaft „start“ der Wert „inViewport“ hinzugefügt.

1	new Vivus("strichgrafik", {type: "scenario", duration: 500, start: "inViewport"}, callback);

Mit dem Wert „manual“ ist es zudem möglich, ein automatisches Starten der Animation ganz zu unterbinden. Das ist nützlich, wenn die Animation per Buttonklick gestartet werden soll. Um die Animation manuell steuern zu können, ist es wichtig, dass der „Vivus()“-Aufruf einer Variablen zugeordnet wird.

1	var grafik = new Vivus("strichgrafik", {type: "delayed", duration: 100, start: "manual"});

Anschließend kann man die Steuerfunktion für die Animation einem Button zuordnen.

1
2
3

document.getElementById("button").addEventListener("click", function() {
  grafik.play();
}, false);

Im Beispiel wird per „play()“ die Animation per Klick auf einen Button gestartet. Die Animationsgeschwindigkeit kann der Methode „play()“ optional hinzugefügt werden. Werte zwischen 0 und 1 spielen die Animation langsam ab, Werte darüber schnell. Ein negativer Wert sorgt dafür, dass die Animation rückwärts läuft.

Neben der „play()“-Methode gibt es „stop()“ zum Anhalten der Animation und “reset()”, um zum Startpunkt der Animation zurückzukehren.

Browsersupport

Vivus läuft auf allen gängigen Browsern. Wie so oft macht der Internet Explorer einige Probleme. So ist es notwendig, beim Internet Explorer die Pfade bei jedem Animationsframe neu zu zeichnen. Das sorgt natürlich für einen höheren Ressourcenverbrauch, wird aber auch nur beim Internet Explorer so gemacht. Außerdem lässt sich dieses ständige Rendern per „forceRender“ ausschalten – mit dem Risiko, dass es in Microsofts Browser nicht mehr richtig läuft.

Vivus kommt ohne weitere Bibliotheken wie beispielsweise jQuery aus und wird unter der MIT-Lizenz abgegeben. Das Framework kann also kostenlos für eigene Projekte eingesetzt werden.