<template>
	<div>
		<img class="lihua-img" :src="currentImgSrc" alt="" />
		<img class="lihua-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/lihua/1.png', 'static/an/lihua/2.png', 'static/an/lihua/3.png',
					'static/an/lihua/4.png', 'static/an/lihua/5.png', 'static/an/lihua/6.png', 'static/an/lihua/7.png',
					'static/an/lihua/8.png', 'static/an/lihua/9.png', 'static/an/lihua/10.png',
					'static/an/lihua/11.png', 'static/an/lihua/12.png', 'static/an/lihua/13.png',
					'static/an/lihua/14.png', 'static/an/lihua/15.png', 'static/an/lihua/16.png',
					'static/an/lihua/17.png', 'static/an/lihua/18.png', 'static/an/lihua/19.png',
					'static/an/lihua/20.png', 'static/an/lihua/21.png', 'static/an/lihua/22.png',
					'static/an/lihua/23.png', 'static/an/lihua/24.png', 'static/an/lihua/25.png',
					'static/an/lihua/26.png', 'static/an/lihua/27.png', 'static/an/lihua/28.png',
					'static/an/lihua/29.png', 'static/an/lihua/30.png', 'static/an/lihua/31.png',
					'static/an/lihua/32.png', 'static/an/lihua/33.png', 'static/an/lihua/34.png',
					'static/an/lihua/35.png', 'static/an/lihua/36.png', 'static/an/lihua/37.png',
					'static/an/lihua/38.png', 'static/an/lihua/39.png', 'static/an/lihua/40.png',
					'static/an/lihua/41.png', 'static/an/lihua/42.png', 'static/an/lihua/43.png'
				],
				delay: 20,
				framesPlayed: 0,
				timer:null
			};
		},
		computed: {
			currentImgSrc() {
				return this.imgList[this.currentFrameIndex];
			}
		},
		mounted() {
			this.startAnimation();
		},
		methods: {
			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>
	.lihua-img {
		width: 100%;
		height: 100vh;
		object-fit: contain;
	}
</style>