svg路径动画插件——vivus.js使用记录

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、安装二、使用三、options常用参数四、options完成参数列表五、完整方法六.vivus内置了几种运动方法

Vivus是一个轻量级的JavaScript类(没有依赖关系)，它允许您对svg进行动画处理，使它们具有正在绘制的外观。有多种不同的动画可供选择，还可以创建自定义脚本，以您喜欢的任何方式绘制SVG。

一、安装

<template>
  <div style="margin:40px">
    <div id="my-vivus1"></div>
    <el-button @click="myVivus.play(1)"> 播放 </el-button>
    <el-button @click="myVivus.stop()"> 停止 </el-button>
    <el-button @click="myVivus.reset()"> 重置 </el-button>
  </div>
</template>
<script>
import Vivus from "vivus";
export default {
  data() {
    return {
      myVivus: "",
    };
  },
  mounted() {
    this.myVivus = new Vivus(
      "my-vivus1",
      {
        reverseStack: true,
        type: "oneByOne",
        onReady() {
          console.log("ready");
        },
        file: require("@/assets/images/demo.svg"),
        duration: 1000,
      },
      function () {
        console.log("finish");
      }
    );
  },
};
</script>

1. npm：npm install vivus
2. bower install vivus
3. 通过script引用到页面

二、使用

<template>
  <div style="margin:40px">
    <div id="my-vivus1"></div>
    <el-button @click="myVivus.play(1)"> 播放 </el-button>
    <el-button @click="myVivus.stop()"> 停止 </el-button>
    <el-button @click="myVivus.reset()"> 重置 </el-button>
  </div>
</template>
<script>
import Vivus from "vivus";
export default {
  data() {
    return {
      myVivus: "",
    };
  },
  mounted() {
    this.myVivus = new Vivus(
      "my-vivus1",
      {
        reverseStack: true,
        type: "oneByOne",
        onReady() {
          console.log("ready");
        },
        file: require("@/assets/images/demo.svg"),
        duration: 1000,
      },
      function () {
        console.log("finish");
      }
    );
  },
};
</script>

本例子使用vue框架，在引入插件之后初始化如下：

<template>
  <div style="margin:40px">
    <div id="my-vivus1"></div>
    <el-button @click="myVivus.play(1)"> 播放 </el-button>
    <el-button @click="myVivus.stop()"> 停止 </el-button>
    <el-button @click="myVivus.reset()"> 重置 </el-button>
  </div>
</template>
<script>
import Vivus from "vivus";
export default {
  data() {
    return {
      myVivus: "",
    };
  },
  mounted() {
    this.myVivus = new Vivus(
      "my-vivus1",
      {
        reverseStack: true,
        type: "oneByOne",
        onReady() {
          console.log("ready");
        },
        file: require("@/assets/images/demo.svg"),
        duration: 1000,
      },
      function () {
        console.log("finish");
      }
    );
  },
};
</script>

总结为：new Vivus(id,options,callBack)

id:存放或者是svg本身的id

options:如何实现动画的各种参数

callBack:在完成调用之后的回调函数

三、options常用参数

• type定义了该以什么样的形式绘制svg的路径动画

1. type:"delayed"默认值。以下图片粉色横线表示运动总时长，黑色线条表示每条path标签的运动时间，蓝色线条表示最开始的path标签运动轨迹和最后一条path标签饿运动轨迹，每个path的起始运动时间延迟分布。

demo如下：

2.type:"sync"以下图片粉色横线表示运动总时长，黑色线条表示每条path标签的运动时间。每一条的path的运动时间和总时间是一样的，时间同步。

demo如下：

3.type:"oneByOne"以下图片粉色横线表示运动总时长，黑色线条表示每条path标签的运动时间，一个path标签进行完运动之后接着下一条的path标签再进行动画，一个接着一个。

demo如下：

• file:'svg地址';如果使用了file参数后，就会往指定的id容器里面插入对应的svg文件，如果容器也是svg标签的话依旧会插入，所以最好容器为非svg标签。

相关问答

Q1: 四、options完成参数列表

Q2: 五、完整方法

Q3: 六.vivus内置了几种运动方法