序列图

平时开发中，需要展示一个图片的动态效果，有时gif画质太低，不符合预期。此时就可以使用序列图功能，把.png,.jpg等图片依次播放出来，形成gif的效果

1.在页面中定义img标签

<img :src="gif" />

2.初始化gif

const startNum = ref(0);
const endNum = ref(0);
const gif = ref('');
const tim = ref();

3.构建序列图方法

const chImg =  () => {
    if (startNum.value >= endNum.value) {
        clearInterval(tim.value);
    } else {
        let name = startNum.value < 10 ? "0" + startNum.value : startNum.value;
        this.gif = require(`@/assets/images/login/Administrator00${name}.png`);
        startNum.value++;
    }
    if (startNum.value == endNum.value) {
        startNum.value = 0;
    }
},

4.在assets/images/login目录下存放需要播放的图片

截屏2023-01-09 10.22.59.png

5.因为序列图是实时更新的，所以要不间断的调用

注：startNum为第一个图片的起始，endNum为最后一张图片的末尾。列：第一张图片名称为Administrator0000，最后一张图片为Administrator0091，所以startNum的初始值为：0，endNum的值为91.

onMounted(() => {
    startNum.value = 0;
    endNum.value = 91;
    tim.value = setInterval(function () {
        chImg();
    }, 80);
});

序列图的使用

序列图