V3 序列帧

最新推荐文章于 2024-09-12 16:43:23 发布

开心点啦.

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量84

点赞数 2

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/zxcvb0825/article/details/141020493

版权

<!-- FrogAnimation.vue -->
<template>
  <div class="frog-animation">
    <img v-if="currentImage === 1" src="@/static/青蛙跳跃/青蛙跳跃1.png" alt="青蛙跳跃1" class="frog image1" />
    <img v-if="currentImage === 2" src="@/static/青蛙跳跃/青蛙跳跃2.png" alt="青蛙跳跃2" class="frog image2" />
    <img v-if="currentImage === 3" src="@/static/青蛙跳跃/青蛙跳跃3.png" alt="青蛙跳跃3" class="frog image3" />
    <img v-if="currentImage === 4" src="@/static/青蛙跳跃/青蛙跳跃4.png" alt="青蛙跳跃4" class="frog image4" />
    <img v-if="currentImage === 5" src="@/static/青蛙跳跃/青蛙跳跃5.png" alt="青蛙跳跃5" class="frog image5" />
    <img v-if="currentImage === 6" src="@/static/青蛙跳跃/青蛙跳跃6.png" alt="青蛙跳跃6" class="frog image6" />
    <img v-if="currentImage === 7" src="@/static/青蛙跳跃/青蛙跳跃7.png" alt="青蛙跳跃7" class="frog image7" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentImage: 1
    };
  },
  mounted() {
    this.animateImages();
  },
  methods: {
    animateImages() {
      setInterval(() => {
        this.currentImage++;
        if (this.currentImage > 7) {
          this.currentImage = 1;
        }
      }, 180);
    }
  }
};
</script>



<style>
.frog-animation {
  position: relative;
  width: 600rpx;
  height: 600rpx;
}

.frog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>