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

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.

Sortiert nach:   neueste | älteste | beste Bewertung
Uwe
Gast
3 Jahre 6 Monate her

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

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

Dieter Petereit
Gast
3 Jahre 6 Monate her
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… Read more »
Uwe
Gast
3 Jahre 6 Monate her

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!

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen