180 lines
5.8 KiB
Vue
180 lines
5.8 KiB
Vue
<template>
|
|
<div>
|
|
<img class="top-img" :src="currentImgSrc" alt="" />
|
|
<img class="top-img" v-for="(imgSrc, index) in imgList" :key="index" :src="imgSrc" alt=""
|
|
style="display: none;" />
|
|
</div>
|
|
<!-- <img :src="currentImgSrc" mode="" class="raffle-img" /> -->
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentFrameIndex: 0,
|
|
imgList: ['static/an/top/1.png', 'static/an/top/2.png', 'static/an/top/3.png', 'static/an/top/4.png',
|
|
'static/an/top/5.png', 'static/an/top/6.png', 'static/an/top/7.png', 'static/an/top/8.png',
|
|
'static/an/top/9.png', 'static/an/top/10.png', 'static/an/top/11.png', 'static/an/top/12.png',
|
|
'static/an/top/13.png', 'static/an/top/14.png', 'static/an/top/15.png', 'static/an/top/16.png',
|
|
'static/an/top/17.png', 'static/an/top/18.png', 'static/an/top/19.png', 'static/an/top/20.png',
|
|
'static/an/top/21.png', 'static/an/top/22.png', 'static/an/top/23.png', 'static/an/top/24.png',
|
|
'static/an/top/25.png', 'static/an/top/26.png', 'static/an/top/27.png', 'static/an/top/28.png',
|
|
'static/an/top/29.png', 'static/an/top/30.png', 'static/an/top/31.png', 'static/an/top/32.png',
|
|
'static/an/top/33.png', 'static/an/top/34.png', 'static/an/top/35.png', 'static/an/top/36.png',
|
|
'static/an/top/37.png', 'static/an/top/38.png', 'static/an/top/39.png', 'static/an/top/40.png',
|
|
'static/an/top/41.png', 'static/an/top/42.png', 'static/an/top/43.png', 'static/an/top/44.png',
|
|
'static/an/top/45.png', 'static/an/top/46.png', 'static/an/top/47.png', 'static/an/top/48.png'
|
|
],
|
|
delay: 40,
|
|
timer:null
|
|
};
|
|
},
|
|
computed: {
|
|
currentImgSrc() {
|
|
return this.imgList[this.currentFrameIndex];
|
|
}
|
|
},
|
|
mounted() {
|
|
// this.animateFrames();
|
|
this.startAnimation();
|
|
},
|
|
methods: {
|
|
startAnimation() {
|
|
this.timer = setInterval(() => {
|
|
this.currentFrameIndex = (this.currentFrameIndex + 1) % this.imgList.length;
|
|
}, this.delay);
|
|
},
|
|
// animateFrames() {
|
|
// const img = document.querySelector(".raffle-img");
|
|
// const animation = () => {
|
|
// // 切换到下一帧图片
|
|
// this.currentFrame = (this.currentFrame + 1) % this.imgCount;
|
|
// // 如果当前帧已加载过，则直接跳过
|
|
// if (this.loadedFrames.includes(this.currentFrame)) {
|
|
// return;
|
|
// }
|
|
// img.src = `${this.basePath}${this.currentFrame}.png`;
|
|
// img.onload = () => {
|
|
// // 将已加载的图片索引存入数组
|
|
// this.loadedFrames.push(this.currentFrame);
|
|
// };
|
|
// };
|
|
// setInterval(animation, this.delay);
|
|
// },
|
|
// animateFrames() {
|
|
// const img = document.querySelector(".raffle-img");
|
|
// const animation = () => {
|
|
// // 切换到下一帧图片
|
|
// this.currentFrame = (this.currentFrame + 1) % this.imgCount;
|
|
// // 如果当前帧已加载过，则直接跳过
|
|
// if (this.loadedFrames.includes(this.currentFrame)) {
|
|
// return;
|
|
// }
|
|
// img.src = `${this.basePath}${this.currentFrame}.png`;
|
|
// img.onload = () => {
|
|
// // 将已加载的图片索引存入数组
|
|
// this.loadedFrames.push(this.currentFrame);
|
|
// };
|
|
// };
|
|
// // 清除之前的定时器
|
|
// clearInterval(this.animationInterval);
|
|
// // 启动新的定时器
|
|
// this.animationInterval = setInterval(animation, this.delay);
|
|
// },
|
|
animateFrames() {
|
|
const img = document.querySelector(".raffle-img");
|
|
const animation = () => {
|
|
// 切换到下一帧图片
|
|
this.currentFrame = (this.currentFrame + 1) % this.imgCount;
|
|
// 如果当前帧已加载过，则直接跳过
|
|
if (this.loadedFrames.includes(this.currentFrame)) {
|
|
return;
|
|
}
|
|
img.onload = () => {
|
|
// 将已加载的图片索引存入数组
|
|
this.loadedFrames.push(this.currentFrame);
|
|
// 等待当前图片加载完成后再启动下一帧动画
|
|
this.animationInterval = setTimeout(() => {
|
|
animation();
|
|
}, this.delay);
|
|
};
|
|
img.src = `${this.basePath}${this.currentFrame}.png`;
|
|
};
|
|
// 启动动画
|
|
animation();
|
|
},
|
|
},
|
|
|
|
onUnload() {
|
|
// 在页面离开时清除定时器
|
|
clearInterval(this.timer)
|
|
},
|
|
beforeDestroy() {
|
|
// 组件销毁时清除定时器，防止内存泄漏
|
|
// clearInterval(this.animationInterval);
|
|
},
|
|
// mounted() {
|
|
// const img = document.getElementsByClassName("raffle-img")[0]
|
|
// const delay = 40
|
|
// const imgCount = 64
|
|
// const animationRaffle = (i) => {
|
|
// if (i === imgCount) {
|
|
// animationRaffle(0)
|
|
// return
|
|
// }
|
|
// img.src = `static/an/raffle/${i}.png`
|
|
// img.onload = () => {
|
|
// setTimeout(() => {
|
|
// animationRaffle(i + 1)
|
|
// }, delay);
|
|
// }
|
|
// }
|
|
// animationRaffle(0)
|
|
// }
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.top-img {
|
|
width: 750rpx;
|
|
object-fit: contain;
|
|
// height: 305rpx;
|
|
// position: absolute;
|
|
// top: 360rpx;
|
|
}
|
|
|
|
#id {
|
|
position: absolute;
|
|
top: -40rpx;
|
|
width: 750rpx;
|
|
height: 520rpx;
|
|
border: 1px solid red;
|
|
}
|
|
|
|
.bubble-icon {
|
|
position: absolute;
|
|
top: -40rpx;
|
|
width: 750rpx;
|
|
height: 520rpx;
|
|
background-image: url('@/static/an/qp/0.png');
|
|
background-size: cover;
|
|
/* 调整背景图片大小以填充容器 */
|
|
animation-name: bubbleAnimation;
|
|
animation-duration: 10s;
|
|
/* 动画持续时间，根据需要进行调整 */
|
|
animation-timing-function: steps(1);
|
|
/* 动画步进方式，每一帧为一步 */
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
$qpCount: 224;
|
|
|
|
@keyframes bubbleAnimation {
|
|
@for $i from 0 through $qpCount {
|
|
#{($i * 100%/$qpCount)} {
|
|
background-image: url(@/static/an/qp/#{$i}.png);
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |