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

walkway是一款非常简单的HTML5 SVG动态绘制轮廓线条动画插件。它支持path、line和polylineSVG元素。更好的动态绘制线条插件可以参考：html5 svg线条动态绘制文字轮廓边框动画、HTML5 SVG图形轮廓线条绘制动画插件-vivus 和 html5 svg线条动态绘制iphone边框动画效果。

下载和安装

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

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
  }
}