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实例的其他方法,如停止、重置、暂停等等,具体可以参考官方文档。