Lazy Line Painter有趣的jQuery路径动画插件

Lazy Line Painter 是基于 Raphaël（一个用于在网页中绘制矢量图形的 Javascript 库）的 jQuery 路径动画插件，能够把线条图案转换为吸引眼球的路径动画模式。

使用方法

使用这个插件被分层成两部分，准备你的Web友好的数据和配置。

1、准备你的SVG数据

在你选择的矢量编辑器创建您的生产线的艺术，首先在 Illustrator 中把线条图形导出为 SVG 格式，要确保图案不填充，没有封闭路径，线条要有明显的开始和结束点，类似画板绘制的图案；

2、配置选项

一些属性可以设置之前，线描画， 这些；

'strokeWidth'    // Adjust width of stroke
'strokeColor'    // Adjust stroke color
'strokeCap'      // Adjust stroke cap  - butt  | round | square
'strokeJoin'     // Adjust stroke join - miter | round | bevel
'strokeOpacity'  // Adjust stroke opacity 0 - 1
'onComplete'     // Callback fired after animation finishes
'onStart'        // Callback fired just before animation starts
'delay'          // Delay before animation starts
'overrideKey'    // Set this property if you selector id doesn't match the key referencing your path data value within svgData.
'speedMultiplier' // slow down or speed up the animation
'drawSequential'  // true: draw each path sequentially, false, draw all at once
'reverse' // reverse drawSequence
'responsive' // true: responsive width and height

然后把导出的 SVG 文件拖放到 Lazy Line Painter 转换器中，拷贝生成的 JavaScript 代码；

3、最后在页面中引入 jQuery、Raphaël & Lazylinepainter，粘贴之前拷贝的代码到 DOM Ready 方法中。

使用这些选项你的元素的画前，通过lazylinepainter对象作为参数包含您希望变更attritubes；

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

注：唯一需要的是对象（其中包含您svgdata路径信息）。其结构应 svgdata对象这样的插件能够。

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
                'strokeColor':'#000000', // stroke color can be set individually
                'strokeWidth':3 // stroke width can be set individually
                'reverse': true // reverse stroke individually
            }, {
                'path': "M155.85,29c0...."
                'duration':1000
            }, {
                etc ...
        ],
        'dimensions' : // dimensions of element
        {
            'width': 270,
            'height':266
        }
    }
}

API参考

Paint
Animate path

$('#demo').lazylinepainter('paint');

Erase
Clear path – paint can still be called on the element after it has been erased;

$('#demo').lazylinepainter('erase');

Pause / Resume
pauseResume path animation

$('#demo').lazylinepainter('pauseResume');

Destroy
Remove path – removes lazyline data and element from DOM;

$('#demo').lazylinepainter('destroy');

项目地址：http://lazylinepainter.info/