我使用libgif插件绘制了一个gif动图,现在我想控制它的播放速度,各位大佬有什么方法吗?

前端菜鸟,请求支援!

代码如下:

<template>
<div class="SuperGifComponents">
<div class="imgbox">
<img
id="example1"
:src="imgUrl"
rel:auto_play="0"
rel:rubbable="0"
width="467"
height="375"
/>
<!-- <h1 style="display: inline-block">img</h1> -->
</div>

    <div class="Buttonbox">
        <div
            v-for="(item, index) in tabrooms"
            :key="index"
            class="itembox"
            @click="tabClickfun(item, index)"
        >
            {{ item }}
        </div>
    </div>
</div>

</template>
<script>
import SuperGif from "libgif";
export default {
name: "SuperGifComponents",
data() {
return {
tabrooms: [
"Pause",
"Play",
"Restart",
"Step forward",
"Step back",
"测试",
],
// imgUrl: require("@/assets/img/20190301133716_13666.gif"),
imgUrl: require("@/assets/img/表情包-1-20190804.gif"),
// imgUrlGIF: require("@/assets/img/20190301133716_13666.gif"),
sup1: null,
// w: "",
// h: "",
n: 0,
num: 0,
state: false,
status: true,
timer: null,
timer2: null,
img: "",
};
},
watch: {
state(newValue, oldValue) {
if (!newValue && this.num >= 0) {
this.sup1.play();
this.num--;
console.log(this.num);
}
},
status(newValue, oldValue) {
if (!newValue) {
this.sup1.play();
clearInterval(this.timer2);
}
},
num(newValue, oldValue) {
if (newValue <= 0) {
clearInterval(this.timer);
}
},
},
async mounted() {
try {
this.InitSuperGif();

        this.timer2 = setInterval(() => {
            this.status = this.sup1.get_loading();
        }, 100);
        this.num = this.n - 1;
        if (this.n > 0) {
            this.sett();
        }
    } catch (e) {
        console.error("程序错误", e);
    }
},
methods: {
    // 定时器
    sett() {
        this.timer = setInterval(() => {
            this.state = this.sup1.get_playing();
        }, 100);
    },
    InitSuperGif() {
        let ss = true;
        // console.log("SuperGif", SuperGif);
        if (this.n > 0) {
            ss = false;
        } else {
            ss = true;
        }
        console.log(SuperGif);
        // 通过异步函数，获取gif文件
        var sup1 = new SuperGif({
            gif: document.getElementById("example1"),
            // 进度条配置
            progressbar_foreground_color: "#9254de",
            progressbar_background_color: "#ebeef5",
            progressbar_height: 10,
            // 禁用循环
            loop_mode: ss,
        });

        sup1.load();
        this.sup1 = sup1;
        console.log(sup1.get_canvas().width);
    },
    tabClickfun(item, index) {
        // ['Pause', 'Play', 'Restart', 'Step forward', 'Step back']
        if (item === "Pause") {
            clearInterval(this.timer);
            this.sup1.pause();
            // console.log(this.num);
        } else if (item === "Play") {
            this.sup1.play();
            if (this.n > 0) {
                if (this.num < 0) {
                    this.num = this.n;
                }
                this.sett();
            }
        } else if (item === "Restart") {
            this.sup1.move_to(0);
        } else if (item === "Step forward") {
            this.sup1.move_relative(1);
        } else if (item === "Step back") {
            this.sup1.move_relative(-1);
        } else if (item === "测试") {
        }
    },
},

};
</script>

<style lang='scss' scoped>
canvas {
overflow: hidden;
// aspect-ratio:inherit
// display: inline-block;
// border: 10px solid #000;
}

• {
  margin: 0;
  }
  .SuperGifComponents {
  width: 60%;
  .imgbox {
  display: inline-block;
  // width: 60%;
  // width: 300px;
  border: 10px solid rgb(228, 8, 8);
  // .jsgif {
  // border: 10px solid rgb(228, 8, 8);
  // }
  }
  .Buttonbox {
  display: flex;
  flex-flow: row nowrap;
  margin: 30px;
  .itembox {
  // width: 86px;
  padding: 0 15px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  background: coral;
  margin-right: 10px;
  color: #fff;
  &:hover {
  background: rgb(219, 148, 122);
  }
  }
  }
  }
  </style>