163 lines
6.9 KiB
Vue
163 lines
6.9 KiB
Vue
<template>
|
|
<!-- <img :src="currentImgSrc" mode="" class="line-img" /> -->
|
|
<div>
|
|
<img class="line-img" :src="currentImgSrc" alt="" />
|
|
<img class="line-img" v-for="(imgSrc, index) in imgList" :key="index" :src="imgSrc" alt="" style="display: none;" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
delay: 40,
|
|
currentFrameIndex: 0,
|
|
imgList: ['static/an/xian/0.png', 'static/an/xian/1.png', 'static/an/xian/2.png', 'static/an/xian/3.png',
|
|
'static/an/xian/4.png', 'static/an/xian/5.png', 'static/an/xian/6.png', 'static/an/xian/7.png',
|
|
'static/an/xian/8.png', 'static/an/xian/9.png', 'static/an/xian/10.png', 'static/an/xian/11.png',
|
|
'static/an/xian/12.png', 'static/an/xian/13.png', 'static/an/xian/14.png', 'static/an/xian/15.png',
|
|
'static/an/xian/16.png', 'static/an/xian/17.png', 'static/an/xian/18.png', 'static/an/xian/19.png',
|
|
'static/an/xian/20.png', 'static/an/xian/21.png', 'static/an/xian/22.png', 'static/an/xian/23.png',
|
|
'static/an/xian/24.png', 'static/an/xian/25.png', 'static/an/xian/26.png', 'static/an/xian/27.png',
|
|
'static/an/xian/28.png', 'static/an/xian/29.png', 'static/an/xian/30.png', 'static/an/xian/31.png',
|
|
'static/an/xian/32.png', 'static/an/xian/33.png', 'static/an/xian/34.png', 'static/an/xian/35.png',
|
|
'static/an/xian/36.png', 'static/an/xian/37.png', 'static/an/xian/38.png', 'static/an/xian/39.png',
|
|
'static/an/xian/40.png', 'static/an/xian/41.png', 'static/an/xian/42.png', 'static/an/xian/43.png',
|
|
'static/an/xian/44.png', 'static/an/xian/45.png', 'static/an/xian/46.png', 'static/an/xian/47.png',
|
|
'static/an/xian/48.png', 'static/an/xian/49.png', 'static/an/xian/50.png', 'static/an/xian/51.png',
|
|
'static/an/xian/52.png', 'static/an/xian/53.png', 'static/an/xian/54.png', 'static/an/xian/55.png',
|
|
'static/an/xian/56.png', 'static/an/xian/57.png', 'static/an/xian/58.png', 'static/an/xian/59.png',
|
|
'static/an/xian/60.png', 'static/an/xian/61.png', 'static/an/xian/62.png', 'static/an/xian/63.png',
|
|
'static/an/xian/64.png', 'static/an/xian/65.png', 'static/an/xian/66.png', 'static/an/xian/67.png',
|
|
'static/an/xian/68.png', 'static/an/xian/69.png', 'static/an/xian/70.png', 'static/an/xian/71.png',
|
|
'static/an/xian/72.png', 'static/an/xian/73.png', 'static/an/xian/74.png', 'static/an/xian/75.png',
|
|
'static/an/xian/76.png', 'static/an/xian/77.png', 'static/an/xian/78.png', 'static/an/xian/79.png',
|
|
'static/an/xian/80.png', 'static/an/xian/81.png', 'static/an/xian/82.png', 'static/an/xian/83.png',
|
|
'static/an/xian/84.png', 'static/an/xian/85.png', 'static/an/xian/86.png', 'static/an/xian/87.png',
|
|
'static/an/xian/88.png', 'static/an/xian/89.png', 'static/an/xian/90.png', 'static/an/xian/91.png',
|
|
'static/an/xian/92.png', 'static/an/xian/93.png', 'static/an/xian/94.png', 'static/an/xian/95.png',
|
|
'static/an/xian/96.png', 'static/an/xian/97.png', 'static/an/xian/98.png',
|
|
'static/an/xian/99.png','static/an/xian/100.png','static/an/xian/101.png','static/an/xian/102.png','static/an/xian/103.png','static/an/xian/104.png','static/an/xian/105.png','static/an/xian/106.png','static/an/xian/107.png','static/an/xian/108.png','static/an/xian/109.png',
|
|
],
|
|
timer:null
|
|
}
|
|
},
|
|
computed: {
|
|
// currentImgSrc() {
|
|
// return `${this.basePath}${this.currentFrame}.png`;
|
|
// },
|
|
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(".line-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() {
|
|
// setInterval(() => {
|
|
// this.currentFrame = (this.currentFrame + 1) % this.imgCount;
|
|
// }, this.delay);
|
|
// },
|
|
// animateFrames() {
|
|
// const img = document.querySelector(".line-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(".line-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("line-img")[0]
|
|
// const delay = 40
|
|
// const imgCount = 109
|
|
// const animationLine = (i) => {
|
|
// if (i === imgCount) {
|
|
// animationLine(0)
|
|
// return
|
|
// }
|
|
// img.src = `static/an/xian/${i}.png`
|
|
// img.onload = () => {
|
|
// setTimeout(() => {
|
|
// animationLine(i + 1)
|
|
// }, delay);
|
|
// }
|
|
// }
|
|
// animationLine(0)
|
|
// }
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.line-img {
|
|
width: 100%;
|
|
// height: 500rpx;
|
|
object-fit: contain;
|
|
}
|
|
</style> |