当前位置：首页 > VUE

vue实现小球移动

2026-02-19 20:13:14VUE

Vue实现小球移动的方法

使用CSS动画和Vue数据绑定

在Vue中可以通过结合CSS动画和数据绑定实现小球移动效果。定义一个包含小球样式的元素，通过修改其样式属性实现移动。

<template>
  <div class="ball" :style="{ left: position.x + 'px', top: position.y + 'px' }"></div>
  <button @click="moveBall">移动小球</button>
</template>

<script>
export default {
  data() {
    return {
      position: { x: 0, y: 0 }
    }
  },
  methods: {
    moveBall() {
      this.position.x += 10
      this.position.y += 10
    }
  }
}
</script>

<style>
.ball {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  transition: all 0.5s ease;
}
</style>

使用Vue过渡效果

Vue的过渡系统可以更优雅地实现小球移动动画效果，通过<transition>组件包裹移动元素。

<template>
  <button @click="togglePosition">切换位置</button>
  <transition name="slide">
    <div class="ball" v-if="show"></div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    togglePosition() {
      this.show = !this.show
    }
  }
}
</script>

<style>
.ball {
  width: 50px;
  height: 50px;
  background-color: blue;
  border-radius: 50%;
  margin-top: 20px;
}

.slide-enter-active, .slide-leave-active {
  transition: all 1s;
}
.slide-enter, .slide-leave-to {
  transform: translateX(100px);
  opacity: 0;
}
</style>

使用JavaScript动画库

对于更复杂的动画效果，可以集成第三方动画库如GSAP或anime.js。

<template>
  <div class="ball" ref="ball"></div>
  <button @click="animateBall">动画效果</button>
</template>

<script>
import { gsap } from 'gsap'

export default {
  methods: {
    animateBall() {
      gsap.to(this.$refs.ball, {
        duration: 1,
        x: 100,
        y: 100,
        ease: "bounce.out"
      })
    }
  }
}
</script>

<style>
.ball {
  width: 50px;
  height: 50px;
  background-color: green;
  border-radius: 50%;
}
</style>

使用Vue自定义指令

通过Vue自定义指令可以创建可复用的动画逻辑，适用于多个小球或复杂场景。

<template>
  <div v-move-ball class="ball"></div>
</template>

<script>
export default {
  directives: {
    'move-ball': {
      inserted(el) {
        let pos = 0
        const id = setInterval(() => {
          pos++
          el.style.transform = `translateX(${pos}px)`
          if (pos > 200) clearInterval(id)
        }, 10)
      }
    }
  }
}
</script>

<style>
.ball {
  width: 50px;
  height: 50px;
  background-color: purple;
  border-radius: 50%;
}
</style>

响应式跟随鼠标移动

实现小球跟随鼠标移动的效果，通过监听鼠标事件更新小球位置。

<template>
  <div class="ball" :style="{ left: mouseX + 'px', top: mouseY + 'px' }"></div>
</template>

<script>
export default {
  data() {
    return {
      mouseX: 0,
      mouseY: 0
    }
  },
  mounted() {
    window.addEventListener('mousemove', this.updatePosition)
  },
  beforeDestroy() {
    window.removeEventListener('mousemove', this.updatePosition)
  },
  methods: {
    updatePosition(e) {
      this.mouseX = e.clientX
      this.mouseY = e.clientY
    }
  }
}
</script>

<style>
.ball {
  width: 30px;
  height: 30px;
  background-color: orange;
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  transition: transform 0.1s ease;
}
</style>

vue实现小球移动