怎样使用vivus.js？

Vivus.js是一个用于添加SVG动画的JavaScript库，它可以使你的SVG图形动态显示出来。下面是使用Vivus.js的步骤：

1.引入Vivus.js文件：可以从Vivus.js官网（https://maxwellito.github.io/vivus/）下载Vivus.js文件。在HTML文件中引入vivus.min.js文件。

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

 

2.准备SVG图形：在HTML文件中嵌入SVG图形，并增加一个ID属性。

<svg id="my-svg" width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="red"/>
</svg>

 

3.创建Vivus.js实例：在JavaScript代码中，创建一个Vivus.js实例并传入SVG元素的ID属性。

 

var mySVG = new Vivus('my-svg', {duration: 200});

在这里，duration属性指定SVG图形的绘图持续时间，单位为毫秒。Vivus.js可以支持多种动画效果，具体可以参考官方文档（https://maxwellito.github.io/vivus/docs.html）。

4.调用Vivus.js实例：在需要调用SVG动画的时候，调用Vivus.js实例的回调函数。

mySVG.play();

这样就可以启动SVG动画了。你也可以使用Vivus.js实例的其他方法，如停止、重置、暂停等等，具体可以参考官方文档。