当前位置：首页 > 网页特效 > 动画效果

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

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
// 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路径添加一些节本的样式：

```html
svg {
  path, line, polyline {
    stroke: #fff
    stroke-width: 2px
  }
 
  path {
    fill: transparent
  }
}
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果