svg路徑動畫插件——vivus.js使用記錄

Vivus是一個輕量級的JavaScript類(沒有依賴關係)，它允許您對svg進行動畫處理，使它們具有正在繪製的外觀。有多種不同的動畫可供選擇，還可以創建自定義腳本，以您喜歡的任何方式繪製SVG。

一、安裝

1. npm：npm install vivus
2. bower install vivus
3. 通過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標簽。

四、options完成參數列表

五、完整方法

六.vivus內置了幾種運動方法

mounted() {
    this.myVivus = new Vivus(
      "my-vivus1",
      {
        reverseStack: true,
        type: "oneByOne",
        animTimingFunction:Vivus.EASE_OUT_BOUNCE,
        file: require("@/assets/images/demo.svg"),
        duration: 300,
      },
    );
  },

參考文檔：vivus.js的github倉庫

本文來自博客園，作者：七分暖，轉載請註明原文鏈接：https://www.cnblogs.com/lin494910940/p/16302001.html