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

当前位置:主页 > Html5库 > SVG > HTML5 SVG简单的动态绘制轮廓线条动画插件
HTML5 SVG简单的动态绘制轮廓线条动画插件
分享:

    插件介绍

    walkway是一款非常简单的HTML5 SVG动态绘制轮廓线条动画插件。它支持SVG的path,line 和 polyline元素。walkway使用起来简单方便,可以制作出非常酷的SVG线条动态绘制效果。

    浏览器兼容性

    浏览器兼容性
    时间:01-26
    阅读:
简要教程

walkway是一款非常简单的HTML5 SVG动态绘制轮廓线条动画插件。它支持pathlinepolylineSVG元素。更好的动态绘制线条插件可以参考:html5 svg线条动态绘制文字轮廓边框动画HTML5 SVG图形轮廓线条绘制动画插件-vivushtml5 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
  }
}