187 lines
6.4 KiB
Vue
187 lines
6.4 KiB
Vue
<template>
|
|
<div>
|
|
<img class="raffle-img" :src="currentImgSrc" alt="" />
|
|
<img class="raffle-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/raffle/0.png', 'static/an/raffle/1.png', 'static/an/raffle/2.png',
|
|
'static/an/raffle/3.png', 'static/an/raffle/4.png', 'static/an/raffle/5.png',
|
|
'static/an/raffle/6.png', 'static/an/raffle/7.png', 'static/an/raffle/8.png',
|
|
'static/an/raffle/9.png', 'static/an/raffle/10.png', 'static/an/raffle/11.png',
|
|
'static/an/raffle/12.png', 'static/an/raffle/13.png', 'static/an/raffle/14.png',
|
|
'static/an/raffle/15.png', 'static/an/raffle/16.png', 'static/an/raffle/17.png',
|
|
'static/an/raffle/18.png', 'static/an/raffle/19.png', 'static/an/raffle/20.png',
|
|
'static/an/raffle/21.png', 'static/an/raffle/22.png', 'static/an/raffle/23.png',
|
|
'static/an/raffle/24.png', 'static/an/raffle/25.png', 'static/an/raffle/26.png',
|
|
'static/an/raffle/27.png', 'static/an/raffle/28.png', 'static/an/raffle/29.png',
|
|
'static/an/raffle/30.png', 'static/an/raffle/31.png', 'static/an/raffle/32.png',
|
|
'static/an/raffle/33.png', 'static/an/raffle/34.png', 'static/an/raffle/35.png',
|
|
'static/an/raffle/36.png', 'static/an/raffle/37.png', 'static/an/raffle/38.png',
|
|
'static/an/raffle/39.png', 'static/an/raffle/40.png', 'static/an/raffle/41.png',
|
|
'static/an/raffle/42.png', 'static/an/raffle/43.png', 'static/an/raffle/44.png',
|
|
'static/an/raffle/45.png', 'static/an/raffle/46.png', 'static/an/raffle/47.png',
|
|
'static/an/raffle/48.png', 'static/an/raffle/49.png', 'static/an/raffle/50.png',
|
|
'static/an/raffle/51.png', 'static/an/raffle/52.png', 'static/an/raffle/53.png',
|
|
'static/an/raffle/54.png', 'static/an/raffle/55.png', 'static/an/raffle/56.png',
|
|
'static/an/raffle/57.png', 'static/an/raffle/58.png', 'static/an/raffle/59.png',
|
|
'static/an/raffle/60.png', 'static/an/raffle/61.png', 'static/an/raffle/62.png',
|
|
'static/an/raffle/63.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>
|
|
.raffle-img {
|
|
width: 750rpx;
|
|
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> |