vue实现人物跑动

实现人物跑动的核心思路

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

使用CSS关键帧动画

通过定义@keyframes实现人物移动的动画效果，结合Vue的动态样式绑定控制动画状态：

<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: 80px;
  background-image: url('character-sprite.png');
  position: absolute;
  transition: left 0.1s linear;
}
</style>

使用精灵图动画

通过切换精灵图的不同位置实现跑动动作：

<template>
  <div 
    class="character" 
    :style="{ 
      backgroundPosition: `${currentFrame * -50}px 0` 
    }"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      currentFrame: 0,
      totalFrames: 8
    }
  },
  mounted() {
    setInterval(() => {
      this.currentFrame = (this.currentFrame + 1) % this.totalFrames
    }, 100)
  }
}
</script>

<style>
.character {
  width: 50px;
  height: 80px;
  background-image: url('run-sprite-sheet.png');
  background-repeat: no-repeat;
}
</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组件中
data() {
  return {
    position: 0,
    velocity: 0,
    acceleration: 0.5,
    maxSpeed: 10
  }
},
methods: {
  updatePosition() {
    this.velocity = Math.min(this.velocity + this.acceleration, this.maxSpeed)
    this.position += this.velocity

    if (this.position > 1000) {
      this.position = 0
    }

    requestAnimationFrame(this.updatePosition)
  }
},
mounted() {
  this.updatePosition()
}

响应键盘控制

结合键盘事件实现用户控制的跑动：

// 在Vue组件中
data() {
  return {
    position: 0,
    isRunning: false
  }
},
created() {
  window.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight') {
      this.isRunning = true
    }
  })
  window.addEventListener('keyup', (e) => {
    if (e.key === 'ArrowRight') {
      this.isRunning = false
    }
  })
},
mounted() {
  setInterval(() => {
    if (this.isRunning) {
      this.position += 5
    }
  }, 16)
}

性能优化建议

使用transform代替left/top属性可获得更好的性能：

.character {
  transform: translateX(var(--position));
  will-change: transform;
}

对于复杂动画场景，考虑使用Canvas或WebGL技术实现更流畅的动画效果。