html svg 线条动画,HTML5 SVG简单的动态绘制轮廓线条动画插件

下载和安装

可以通过以下几种方式安装该插件。

Bower

bower install walkway.js

npm

npm install walkway.js

CDN

http://cdn.jsdelivr.net/walkway/0.0.1/walkway.min.js

使用方法

可以通过预定义参数来创建一个Walkway对象。要开始SVG线条绘制动画，可以在该对象上使用.draw方法，该方法有一个回调函数，可以在SVG线条绘制完成后执行。

// Create a new instance

var svg = new Walkway(options);

// Draw when ready, providing an optional callback

svg.draw(callback);

// Options passed in as an object, see options below.

var svg = new Walkway({ selector: '#test'});

// Overwriting defaults

var svg = new Walkway({

selector: '#test',

duration: '2000',

// can pass in a function or a string like 'easeOutQuint'

easing: function (t) {

return t * t;

}

});

svg.draw();

// If you don't want to change the default options you can

// also supply the constructor with a selector string.

var svg = new Walkway('#test');

svg.draw(function() {

console.log('Animation finished');

});

可用参数

selector(必须)：父元素的选择器(通常是一个SVG元素)。

duration：动画的持续时间，单位毫秒，默认值400。

easing：SVG动画中easing效果的名称。默认值是easeInOutCubic。你可以自定义函数，但它必须返回一个范围在[0,1]之间的值。

注意事项

有时候从矢量图软件中导出的SVG图像没有stroke的样式，(关于使用矢量图软件导出SVG文件可以参考：Adobe Illustrator导出SVG的设置方法)，这会导致在Walkway开始动画时没有任何效果，所以你要确保为SVG路径添加一些节本的样式：

svg {

path, line, polyline {

stroke: #fff

stroke-width: 2px

}

path {

fill: transparent

}

}