当前位置：首页 > VUE

vue如何实现人物走动

2026-02-24 05:59:53VUE

Vue 实现人物走动的方法

在 Vue 中实现人物走动通常涉及动画、CSS 过渡或 JavaScript 控制。以下是几种常见方法：

使用 CSS 动画

通过 CSS 的 @keyframes 和 transform 属性实现人物移动动画。

<template>
  <div class="character" :style="{ left: position + 'px' }"></div>
</template>

<script>
export default {
  data() {
    return {
      position: 0
    };
  },
  mounted() {
    setInterval(() => {
      this.position += 5;
    }, 50);
  }
};
</script>

<style>
.character {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  transition: left 0.1s linear;
}
</style>

使用 GSAP 动画库

GSAP 提供更强大的动画控制能力，适合复杂动画场景。

<template>
  <div ref="character" class="character"></div>
</template>

<script>
import { gsap } from "gsap";

export default {
  mounted() {
    gsap.to(this.$refs.character, {
      x: 500,
      duration: 2,
      repeat: -1,
      yoyo: true
    });
  }
};
</script>

<style>
.character {
  width: 50px;
  height: 50px;
  background-color: blue;
}
</style>

使用 Vue Transition

结合 Vue 的 <transition> 组件实现人物走动效果。

<template>
  <transition name="walk">
    <div v-if="show" class="character"></div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  },
  mounted() {
    setInterval(() => {
      this.show = !this.show;
    }, 1000);
  }
};
</script>

<style>
.walk-enter-active, .walk-leave-active {
  transition: all 1s;
}
.walk-enter, .walk-leave-to {
  transform: translateX(100px);
  opacity: 0;
}
.character {
  width: 50px;
  height: 50px;
  background-color: green;
}
</style>

使用 Canvas 绘制

对于游戏类应用，使用 Canvas 绘制人物并控制移动更高效。

<template>
  <canvas ref="canvas" width="400" height="200"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext("2d");
    let x = 0;

    function drawCharacter() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "purple";
      ctx.fillRect(x, 50, 30, 50);
      x += 2;
      if (x > canvas.width) x = 0;
      requestAnimationFrame(drawCharacter);
    }

    drawCharacter();
  }
};
</script>