(Kostenlose) Services

Lazy Line Painter für jQuery zeichnet SVG-Grafiken per Animation auf Websites

12. Februar 2013
von

Dank des Canvas-Elementes und der Zeichenfunktionen von JavaScript ist es möglich, Grafiken im Browser zu berechnen und darzustellen. So kann man Zeichnungen per Animation auf eine Website zeichnen. Wer eine solche Animation nicht selbst programmieren will, findet im jQuery-Plugin Lazy Line Painter ein hilfreiches Tool, welches diese Aufgabe für SVG-Grafiken per JavaScript im Browser erledigt.

lazylinepainter1
Lazy Line Painter

Lazy Line Painter: SVG-Datei konvertieren und animieren lassen

Und so arbeitet das Tool: Die zu animierende Grafik muss für den Lazy Line Painter zwingend im SVG-Format vorliegen. Anwendungen wie Illustrator bieten Exportfunktionen für dieses Format an. Zu beachten ist, dass die Grafik ausschließlich aus nicht geschlossenen Pfaden bestehen darf. Flächen und Verläufe sind also tabu. Bei geschlossenen Pfaden (beispielsweise Kreise und Rechtecke) muss vor dem Export der Pfad an einem Punkt geöffnet werden. Optisch verändert sich dadurch nichts. Für das PLugin ist der Unterschied lebenswichtig. Es weiß dann nämlich, an welcher Stelle des Pfades die Zeichenanimation beginnen soll.

lazylinepainter2
So funktioniert das Plugin

Farbe und Konturstärke des Pfades werden ignoriert und direkt im Plugin angegeben. Da die SVG-Datei nicht direkt dem Plugin übergeben werden kann, muss sie vorher in eine JavaScript-Variable umgewandelt werden. Über die Website des Plugins ist es möglich, SVG-Dateien hochzuladen und umzuwandeln. Die Variable mit allen Pfaden und ihren Koordinaten kann anschließend an das Plugin übergeben werden. Die SVG-Variable sieht dabei in etwa so aus:

var svgData = {
  "demo": {
    "strokepath": [{}],
  "dimensions": {
    "width": 349,
    "height":277
  }
}

Sie wird über folgenden Aufruf an das jQuery-Plugin übergeben:

$("#zeichnung").lazylinepainter({
  "svgData": svgData,
  "strokeWidth": 7,  
  "strokeColor": "#de8f8f"
})

Neben der Variable werden hier auch die Konturstärke und -farbe definiert. Im letzten Schritt muss das animierte Zeichnen noch gestartet werden:

$("#zeichnung").lazylinepainter("paint");

Lazy Line Painter: jQuery und Raphaël vorausgesetzt

Damit das Plugin läuft, muss jQuery eingebunden sein. Außerdem wird die JavaScript-Bibliothek Raphaël benötigt, welche spezielle Funktionen zum Zeichnen von SVG-Grafiken bereitstellt.

Fazit: Mit wenig Aufwand lassen sich mit Unterstützung des Lazy Line Painters komplexe Grafiken im Browser zeichnen, ohne dass selbst groß Hand an die zu animierende Grafik angelegt werden muss.

(dpe)

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.

Tags: ,

3 Kommentare zu „Lazy Line Painter für jQuery zeichnet SVG-Grafiken per Animation auf Websites
  1. Uwe am 13. Februar 2013 um 12:58

    Ist Dr. Web das zeitversetzte, deutsche Abbild von webresourcesdepot & Co.?

    Würde mich über coolen unique Content bei Euch sehr freuen?

    • Dieter Petereit am 13. Februar 2013 um 17:27

      Immer wieder gibt es mal einen, der diese Frage stellt. Dabei ist sie wenig sinnvoll. Ist die Sendung Heute ein zeitversetztes Abbild der Tagesschau? Ist der WDR ein Abbild des SWR?

      Was Webresourcesdepot konkret betrifft. Der dortige Betreiber findet zwangsläufig immer wieder Themen, vornehmlich Tools, mit denen auch wir uns beschäftigen. Das liegt absolut in der Natur der Sache. Mal sind wir schneller, mal Webresourcesdepot, mal hat’s nur der eine, mal nur der andere, mal beide nicht. Wir befinden uns aber auch nicht im Wettstreit. Und selbstverständlich haben wir als Dr. Web über die Vorstellung von Tools hinaus massenweise Unique Content.

      Aber, ich bitte um Verständnis, dass wir nicht jQuery-Plugins erfinden werden, nur damit wir exklusiv darüber berichten können. Und ich bitte auch um Verständnis dafür, dass wir nicht nicht über z.B. jQuery-Plugins berichten werden, bloß weil es jemand anders im Weltennetz vielleicht schon getan hat. Desweiteren sollte man mal, wo wir schon von Webresourcesdepot, aber auch vielen anderen ähnlich gelagerten Sites sprechen, schauen, was dort unter Berichterstattung verstanden wird und was wir bei Dr. Web darunter verstehen. Da kann man schon einen Unterschied erkennen, der auch deutlich zeigt, warum ein Beitrag bei uns schon mal etwas dauern kann, während andere ihre Dreizeiler längst online haben.

      Zudem veröffentlichen wir einen, maximal zwei Beiträge am Tag. Das ist dann schon manchmal ärgerlich, wenn man sieht, dass andere jetzt vermeintlich schneller mit einem Thema draußen sind, das bei uns schon seit Tagen fertig ist, aber laut Redaktionsplan noch nicht zur Veröffentlichung ansteht.

      Und ganz am Schluss, da gibt es auch noch den Unterschied in der Sprache. Wer englische Dreizeiler lesen will und kann, der soll das natürlich gern tun. Wer tiefergehende deutschsprachige Artikel bevorzugt, der lese Dr. Web.

      So, dieser kleine Ausflug in die Abläufe der Dr. Web Redaktion soll reichen ;-)

      • Uwe am 14. Februar 2013 um 10:27

        Oh, cool, so eine schöne lange Antwort. Ich danke Dir recht herzlich!

        Vermutlich war es meine Kognitive Dissonanz, ich hätte schwören können, dass ich jetzt 2-3 Fälle hatte in den letzten Wochen, wo es in meinem RSS-Reader dieselben Themen bei Euch und bei webresourcedepot gab.

        Danke für Euer schönes Magazin!

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!