<template>
	<div>
		<img class="box-img" :src="currentImgSrc" alt="" />
		<img class="box-img" v-for="(imgSrc, index) in imgList" :key="index" :src="imgSrc" alt=""
			style="display: none;" />
	</div>
</template>

<script>
	export default {
		data() {
			return {
				currentFrameIndex: 0,
				imgList: ['static/an/box/1.png', 'static/an/box/2.png', 'static/an/box/3.png', 'static/an/box/4.png',
					'static/an/box/5.png', 'static/an/box/6.png', 'static/an/box/7.png', 'static/an/box/8.png',
					'static/an/box/9.png', 'static/an/box/10.png', 'static/an/box/11.png', 'static/an/box/12.png',
					'static/an/box/13.png', 'static/an/box/14.png', 'static/an/box/15.png', 'static/an/box/16.png',
					'static/an/box/17.png', 'static/an/box/18.png', 'static/an/box/19.png', 'static/an/box/20.png',
					'static/an/box/21.png', 'static/an/box/22.png', 'static/an/box/23.png', 'static/an/box/24.png',
					'static/an/box/25.png', 'static/an/box/26.png', 'static/an/box/27.png', 'static/an/box/28.png',
					'static/an/box/29.png', 'static/an/box/30.png', 'static/an/box/31.png', 'static/an/box/32.png',
					'static/an/box/33.png', 'static/an/box/34.png', 'static/an/box/35.png', 'static/an/box/36.png',
					'static/an/box/37.png', 'static/an/box/38.png', 'static/an/box/39.png', 'static/an/box/40.png',
					'static/an/box/41.png', 'static/an/box/42.png', 'static/an/box/43.png', 'static/an/box/44.png',
					'static/an/box/45.png', 'static/an/box/46.png', 'static/an/box/47.png', 'static/an/box/48.png',
					'static/an/box/49.png', 'static/an/box/50.png', 'static/an/box/51.png', 'static/an/box/52.png',
					'static/an/box/53.png', 'static/an/box/54.png', 'static/an/box/55.png', 'static/an/box/56.png',
					'static/an/box/57.png', 'static/an/box/58.png', 'static/an/box/59.png', 'static/an/box/60.png',
					'static/an/box/61.png', 'static/an/box/62.png', 'static/an/box/63.png', 'static/an/box/64.png',
					'static/an/box/65.png', 'static/an/box/66.png', 'static/an/box/67.png', 'static/an/box/68.png',
					'static/an/box/69.png', 'static/an/box/70.png', 'static/an/box/71.png', 'static/an/box/72.png'
				],
				delay: 45,
				framesPlayed: 0,
				imagesPreloaded: false,
				timer:null
			};
		},
		computed: {
			currentImgSrc() {
				return this.imgList[this.currentFrameIndex];
			}
		},
		mounted() {
			this.preloadImages().then(() => {
				this.startAnimation();
			});
			// this.startAnimation();
		},
		methods: {
			preloadImages() {
				const promises = [];
				this.imgList.forEach((imgSrc) => {
					const promise = new Promise((resolve, reject) => {
						const img = new Image();
						img.onload = resolve;
						img.onerror = reject;
						img.src = imgSrc;
					});
					promises.push(promise);
				});
				return Promise.all(promises).then(() => {
					this.imagesPreloaded = true;
				});
			},
			startAnimation() {
				this.timer = setInterval(() => {
					this.currentFrameIndex = (this.currentFrameIndex + 1) % this.imgList.length;
					this.framesPlayed++;
					if (this.framesPlayed === this.imgList.length) {
						clearInterval(this.timer);
					}
				}, this.delay);
			}
		},
  onUnload() {
	// 在页面离开时清除定时器
	clearInterval(this.timer)
  }
	};
</script>

<style lang="scss" scoped>
	.box-img {
		width: 100%;
		height: 100vh;
		object-fit: contain;
	}
</style>