下载和安装
可以通过以下几种方式安装该插件。
Bower
bower install walkway.js
npm
npm install walkway.js
CDN
/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
}
}
