SVG动画vivus.js库使用小结(实例代码)

下面是一份详细的攻略，包含vivus.js库的使用方法及实例代码：

介绍

Vivus.js库是一个轻量级的javascript库，可以创建美观的SVG描边动画效果。它支持很多动态效果，例如从头开始显示、流线显示、延迟显示等等。

安装

首先，在你的html文档中引入vivus.js文件：

<script src="vivus.js"></script>

使用

基本用法

下面是一个最基本的使用vivus.js的例子：

<div id="my-svg"></div>
<script>
  new Vivus('my-svg', {type: 'oneByOne'});
</script>

上面的代码在my-svg元素中创建一个SVG动画效果，一次只以单个路径描绘。

使用选项

你可以在创建Vivus对象时传递一些选项，以自定义SVG动画效果。

new Vivus('my-svg', {
  type: 'delayed',
  duration: 200,
  start: 'autostart',
  dashGap: 20
});

选项说明：

• type：动画类型，可选值为oneByOne、sync、delayed、async、scenario、oneByOneSync、oneByOneDelayed、oneByOneUnfold、default
• duration：动画时间，单位毫秒，默认为200
• start：自动开始动画，默认为'instant'
• dashGap：以未绘制线段的间隔，单位像素，默认为2

使用回调方法

你也可以使用回调方法，在动画播放过程中执行一些自定义操作。

new Vivus('my-svg', {
  type: 'delayed',
  duration: 200,
  start: 'autostart',
  dashGap: 20
}, function(){
  console.log('动画播放完成！');
});

回调方法会在指定的动画时间后被调用。

示例代码

创建一个立方体旋转动画

下面是一个创建立方体旋转动画的示例代码：

<div id="my-svg"></div>
<script>
  var mySVG = new Vivus('my-svg', {
    type: 'delayed',
    duration: 200,
    start: 'inViewport',
    reverseStack: true
  });

  var paths = [
    'M29.929,106.498c7.253,4.185,15.746,1.904,19.951-5.345l41.969-72.352c4.209-7.251,1.916-15.746-5.344-19.951\tc-7.251-4.209-15.746-1.916-19.949,5.344l-41.971,72.352C20.214,93.773,22.716,102.271,29.929,106.498z',
    'M77.619,111.729c7.175-3.813,10.554-12.354,6.741-19.51L43.439,28.986c-3.813-7.175-12.358-10.56-19.51-6.741\tc-7.175,3.81-10.556,12.351-6.742,19.526L58.11,104.988C65.265,112.142,70.447,115.537,77.619,111.729z',
    'M76.118,66.861c-3.808-7.17-10.911-11.366-17.948-11.366c-7.027,0-14.131,4.196-17.938,11.366l-29.34,55.221\tc-3.808,7.17-2.358,15.685,3.812,19.5c5.98,3.849,14.486,2.337,18.301-3.812l29.342-55.222\tC82.965,80.604,79.926,73.031,76.118,66.861z',
    'M30.545,63.891c-7.27-4.21-15.771-1.879-19.978,5.336L4.599,141.58c-4.201,7.213-1.915,15.734,5.345,19.939\tc3.272,1.898,6.845,2.884,10.421,2.884c6.115,0,12.098-2.957,15.742-8.307l5.511-9.479l26.146-45.009l5.509-9.48\tc2.954-5.076,2.054-11.16-1.73-15.336C45.146,66.524,38.022,63.744,30.545,63.891z'
  ];

  paths.forEach(function(path, i){
    var p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    p.setAttributeNS(null, 'd', path);
    p.style.fill = 'none';
    p.style.stroke = '#ffffff';
    p.style.strokeWidth = '6';
    p.style.strokeLinecap = 'round';
    p.style.strokeLinejoin = 'round';
    p.style.strokeDasharray = '200, 900';
    p.style.strokeDashoffset = '0';
    mySVG.el.appendChild(p);
  });
</script>

在这个示例中，我们使用forEach()方法循环遍历paths数组，创建并添加SVG路径。

创建流星动画

下面是一个创建流星动画的示例代码：

<div id="meteor"></div>
<script>
  var meteor = new Vivus('meteor', {
    type: 'delayed',
    duration: 200
  });

  var path = 'M16.3,29.9C9.5,26.5,5.4,18,5.4,11c0-2.1,0.2-4.2,0.6-6.3L3.7,2.2l2.4,1.3l1.6,0.9\r\n\tc3.8-1.5,7.8-2.3,11.8-2.3c10.1,0,19,6.5,22.1,16.3l0.5,1.7l1.7-0.4l4.5-1.1l-2.6-1.2C54,5.4,45.7,0.6,36.6,0.6\r\n\tC20.5,0.6,7.7,10.2,4.6,24l8.2,0.5l1.8,0.1L16.3,29.9z';
  var tail = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  tail.setAttributeNS(null, 'd', path);
  tail.style.fill = 'none';
  tail.style.stroke = '#ffffff';
  tail.style.strokeWidth = '1';
  tail.style.strokeLinecap = 'round';
  tail.style.strokeLinejoin = 'round';
  tail.style.strokeDasharray = '0, 60, 50';
  tail.style.strokeDashoffset = '0';
  meteor.el.appendChild(tail);

  var core = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  core.setAttributeNS(null, 'cx', '20');
  core.setAttributeNS(null, 'cy', '11');
  core.setAttributeNS(null, 'r', '2');
  core.style.fill = '#fff';
  meteor.el.appendChild(core);

  meteor.play(0.5);
</script>

在这个示例中，我们首先创建一个SVG路径，用于绘制流星的尾巴。然后，使用createElementNS()方法创建一个SVG圆形，作为流星的“核心”。

在添加元素后，我们调用play()方法来播放动画。我们传递的0.5参数表示动画播放进度的百分比，这意味着我们指定流星进度的一半时，其余的路径将逐渐显示。