当前位置：首页 > VUE

vue实现人物跑动

2026-01-17 07:46:19VUE

Vue 实现人物跑动动画

在 Vue 中实现人物跑动效果，通常需要结合 CSS 动画或 JavaScript 动画库。以下是几种常见方法：

使用 CSS 关键帧动画

通过 CSS @keyframes 定义跑动动画，结合背景图位移实现逐帧动画效果：

<template>
  <div class="character-run"></div>
</template>

<style>
.character-run {
  width: 100px;
  height: 100px;
  background-image: url('path/to/sprite-sheet.png');
  animation: run 1s steps(6) infinite;
}

@keyframes run {
  from { background-position: 0 0; }
  to { background-position: -600px 0; }
}
</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: 3,
      ease: 'none',
      repeat: -1
    })
  }
}
</script>

结合 Vue 过渡动画

使用 Vue 的 <transition> 组件实现状态变化的动画：

<template>
  <transition name="run">
    <div v-if="isRunning" class="character"></div>
  </transition>
</template>

<style>
.run-enter-active {
  animation: run-in 0.5s;
}
.run-leave-active {
  animation: run-in 0.5s reverse;
}
@keyframes run-in {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
</style>

使用 Canvas 绘制动画

对于更复杂的动画效果，可以使用 Canvas 进行绘制：

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

<script>
export default {
  data() {
    return {
      frame: 0,
      position: 0
    }
  },
  mounted() {
    this.animate()
  },
  methods: {
    animate() {
      const ctx = this.$refs.canvas.getContext('2d')
      ctx.clearRect(0, 0, 400, 200)

      // 绘制角色帧
      ctx.drawImage(spriteImage, this.frame * 64, 0, 64, 64, this.position, 100, 64, 64)

      this.frame = (this.frame + 1) % 6
      this.position = (this.position + 5) % 400

      requestAnimationFrame(this.animate)
    }
  }
}
</script>

响应式控制动画

结合 Vue 的响应式特性控制动画状态：

vue实现人物跑动

<template>
  <div 
    class="character" 
    :class="{ 'running': isRunning }"
    @click="toggleRun"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      isRunning: false
    }
  },
  methods: {
    toggleRun() {
      this.isRunning = !this.isRunning
    }
  }
}
</script>

<style>
.character {
  width: 80px;
  height: 80px;
  background: url('idle.png');
  transition: all 0.3s;
}

.character.running {
  background: url('running.png');
  animation: run 0.5s infinite;
}
</style>