Vue加载序列帧动图

解读方法

1. 使用<img :src="currentFrame" alt="加载中" /> 加载图片
2. 动态更改src的值
3. 使用 requestAnimationFrame 定时更新
4. 在需要的页面调用封装的组件 <LoadToast v-if="showLoading" />

封装组件

<template><div class="mask"><div class="mask-content-box"><div class="mask-content-show"><div ref="myLoad" class="mask-img"><img :src="currentFrame" alt="加载中" /></div><div class="mask-word">账号绑定中，请稍等…</div></div></div></div>
</template><script>
export default {mounted() {this.handleLoad(43)},destroyed() {if (this.animation !== null) {cancelAnimationFrame(this.animation)}},data() {return {animation: null,currentFrame: '',}},methods: {handleLoad(max, fps = 24) {let rootUrl = './icon_common_loading/icon_common_loading_000'let currentUrl = rootUrl + this.getNumber(0)this.currentFrame = require(`${currentUrl}`)let index = 0const frameInterval = 1000 / fpslet lastTimestamp = 0const render = (timestamp) => {if (!lastTimestamp) lastTimestamp = timestampconst elapsed = timestamp - lastTimestampif (elapsed >= frameInterval) {index > max ? (index = 0) : indexlet currentUrl = rootUrl + this.getNumber(index)this.currentFrame = require(`${currentUrl}`)index++lastTimestamp = timestamp}this.animation = requestAnimationFrame(render)}this.animation = requestAnimationFrame(render)},getNumber(num) {if (num < 10) {return '0' + num + '.png'} else {return num + '.png'}},},
}
</script><style lang="less" scoped>
.mask {background: transparent;position: absolute;top: 0;left: 0;width: 100%;height: 100%;&-content-box {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}&-content-show {width: 160px;height: 116px;background: rgba(0, 0, 0, 0.7);border-radius: 8px;display: flex;flex-direction: column;justify-content: center;align-items: center;}&-img {width: 50px;height: 50px;img {width: 100%;height: 100%;}margin-bottom: 8px;}&-word {color: #fff;font-size: 13px;line-height: 18px;}
}
</style>