Lazy Line Painter

=================

A Jquery plugin for path animation using the Raphaël Library.

For more on lazy-line-painter go to;
http://lazylinepainter.info/

Author : Cam O'Connell
http://camoconnell.com/
[email protected]

Usage

Implementing this plugin is broken into two parts.
Preparing your web-friendly data & Configuring lazy-line-painter.js

Preparing your SVG data
Create your Line art in Illustrator;
~ Ensure their are no fills.
~ No closed paths. i.e - Line needs a start and end.
~ Crop Artboard nice & tight!
Export as .SVG (Default export options are fine)
Drop your .SVG into 'SVG to Lazy Line Convertor' on http://lazylinepainter.info/
Copy lazy line code and paste into your DOM ready function.

Configuring lazy-line-painter
A number of attributes can be setup before the line art is Painted, these include;

   
	'strokeWidth'    
	'strokeColor'    
	'strokeCap'       
	'strokeJoin'    
	'onComplete'     
	'delay'

To apply these options to your element before Painting,
pass lazylinepainter an object as an argument containing the attritubes you wish to alter;

 
$('#demo').lazylinepainter({    
    	'svgData' : svgData, // the object containing the SVG path info 
		'strokeWidth':7,  
		'strokeColor':'#de8f8f'	
	}
)

Note : The only required is the svgData object (which contains your path info).
The svgData object should be structured like so for the plugin to be able to read;


var svgData = { 
	'demo' : // name of your lazy line
	{ 
		'strokepath' : // this contains all your SVG path info
		[ 
			{   'path': "M144.869,199c0...."     // path string , 
			    'duration':300                   // time taken to animate that path
			    },
			{   'path': "M155.85,29c0...."
			    'duration':1000
			    },
			etc ...
		],  
		'dimensions' : { 'width': 270, 'height':266 } // dimensions of element
	}
}

Paint ! - Illustrate path
$('#demo').lazylinepainter('paint');

Erase ! - Clear path, Paint can still be called on the element after erased
$('#demo').lazylinepainter('erase');

Destroy ! - Remove path and element from DOM
$('#demo').lazylinepainter('destroy');

Dependencies

Jquery http://jquery.com/
Raphaël http://raphaeljs.com/

Credits

Priit Pirita (http://bkp.ee/atirip)
SVGtoRaphaelparser.php script used in the SVG converter.

leison / lazy-line-painter Goto Github PK