Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 20. November 2015

DrawSVG für jQuery – animierte Pfade beleben deine Website

DrawSVG für jQuery - animierte Pfade beleben deine Website

Das SVG-Format kann ja glücklicherweise sehr viel mehr, als nur vektorbasierte Grafiken bereitzustellen. Auch Animationen sind möglich. Und mit JavaScript kannst du diese Animationen auf unterschiedliche Art und Weise steuern und beeinflussen. Das jQuery-Plugin DrawSVG lässt dich die Pfade einer SVG-Grafik per Animation zeichnen. Dabei gibt es mehrere Möglichkeiten, wie die Pfade gezeichnet werden können.

DrawSVG für jQuery - animierte Pfade beleben deine Website

Voraussetzung für DrawSVG

Als jQuery-Plugin muss der JavaScript-Allrounder natürlich zusammen mit dem Plugin im HTML-Head eingebunden sein. Anschließend ist es möglich, die Pfade einer SVG-Grafik zu animieren. Gemeint sind hierbei die per „<path>“-Element angelegten SVG-Formen. Strichstärke und -Farbe der Pfade können wie gewohnt per Attribut oder CSS definiert werden. Eine Füllfarbe sollte diesen Pfaden nicht zugeordnet werden, da diese nicht animiert würde und daher immer sichtbar wäre.

Zum Zeichnen der Pfade nutzt DrawSVG die Eigenschaften „stroke-dasharray“ und „stroke-dashoffset“. Diese beiden Eigenschaften solltest du daher ebenfalls nicht anderweitig einsetzen.

drawsvg_beispiel1
Zwei Ansichten während der Animation

Da das Plugin Zugriff auf den DOM-Baum der SVG-Grafik benötigt, sollte der SVG-Quelltext im HTML-Element eingebunden sein. Eine einfache Animation erfolgt über den Aufruf einer einfachen Zeile JavaScript.

$("svg").drawsvg("animate");

Das Beispiel greift auf alle SVG-Elemente zu, die im HTML-Dokument ausgezeichnet sind und versetzt diese per „drawsvg()“ in Animation. Dazu wird die komplette Grafik zunächst ausgeblendet. Anschließend zeichnet das Plugin ohne weiteres Zutun die einzelnen Pfade der Grafik. Damit ein realistischer Zeicheneffekt entsteht, werden die einzelnen Pfade einer Grafik mit einem kurzen zeitlichen Versatz animiert.

Je mehr Pfade eine SVG-Grafik also enthält, desto mehr einzeln startende Animationen sind vorhanden.

Animation per Optionen einstellen

Den zeitlichen Versatz für die Anfangszeit der einzelnen Pfade kannst du über die Option „stagger“ individuell festlegen.

var $svg = $("svg").drawsvg({
  stagger: 5000
 }).drawsvg("animate");

Die Optionen werden über einen eigenen Aufruf von „drawsvg()“ als Objektliteral übergeben. Im Beispiel wird der Versatz auf 5 Sekunden gesetzt. Die Länge der Animation, die standardmäßig eine Sekunde beträgt, kannst du ebenfalls per Option ändern.

var $svg = $("svg").drawsvg({
  stagger: 5000,
  duration: 10000
 }).drawsvg("animate");

Außerdem hast du die Möglichkeit, eine Callback-Funktion zu übergeben, die aufgerufen wird, sobald die Animation beendet wurde und die Grafik komplett sichtbar wird.

var $svg = $("svg").drawsvg({
  callback: function() {
    alert("Animation ist fertig.");
  }
 }).drawsvg("animate");

Im Beispiel geben wir einen einfachen Alert aus, sobald die Animation vervollständigt wurde.

drawsvg

Grafik per Scolling zeichnen

Mit ein paar Zeilen mehr JavaScript kannst du die SVG-Grafik auch per Scrolling zeichnen. Dazu muss das SVG-Element mittels CSS fixiert („position: fixed“) werden, damit es immer sichtbar ist. Außerdem muss die Seite natürlich scrollbar sein. Dazu kannst du einfach eine ausreichende Höhe per CSS definieren. Folgende Zeilen sorgen dann dafür, dass die Grafik durch das Herunterscrollen gezeichnet wird.

var $svg = $("svg").drawsvg();

$(window).on("scroll", function() {
  $svg.drawsvg("progress", $(window).scrollTop() / ($(document).height() - $(window).height()));
});

Eine Gesamtdauer für die Animation ist bei dieser Form logischerweise überflüssig. Denn die Animation ist in diesem Fall abhängig von der Scrollgeschwindigkeit. Je schneller gescrollt wird, desto schneller wird gezeichnet. Scrollst du wieder noch oben, verschwindet die Zeichnung auch wieder.

DrawSVG mit Pfaden und Maskierungen verwenden

Eine weitere Möglichkeit, das Plugin zu nutzen, besteht in der Kombination von Pfaden und Maskierungen. So kann beispielsweise ein „<mask>“-Element ja auch einen Pfad beinhalten. Ist dieser Pfad so gezeichnet, dass er dank ausreichend starker Linienstärke die komplette Maskierungsfläche füllt, kannst du damit sehr schön Bilder oder andere Elemente einblenden lassen.

drawsvg_beispiel2
Zwei Ansichten während einer Maskierungsanimation

Fazit und Link zum Beitrag

Die Einsatzmöglichkeiten von DrawSVG sind vielfältig. Dabei ist das Plugin schnell angewendet. Trotz weniger Optionen kann man sehr schöne Effekte erzielen. Die Dokumentation ist entsprechend übersichtlich. Einige Demos zeigen exemplarisch, was alles möglich ist.

DrawSVG wird von Leonardo Santos aus Porto Alegre entwickelt und steht auf Github auch zur Mitwirkung bereit. Das Plugin ist kommerziell frei verwendbar, da Santos es unter der liberalen MIT-Lizenz vertreibt.

(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.

2 Kommentare

  1. Sehr schöner Artikel! Wir als Agentur experimentieren auch gerade ein wenig damit herum. :) Es gibt wirklich viele tolle Anwendungs-Möglichkeiten um das jQuery Plugin einsetzen zu können. Sieht vorallem super modern aus und hebt die eigene Website nochmals hervor.

Schreibe einen Kommentar

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