当前位置：首页 > VUE

vue实现小球教学

2026-01-18 17:30:05VUE

Vue 实现小球动画基础

在 Vue 中实现小球动画可以通过 CSS 过渡、JavaScript 动画库或结合两者完成。以下是几种常见方法：

使用 CSS Transition 通过 Vue 的 v-bind:style 或 v-bind:class 动态修改小球的样式属性（如 left/top），配合 CSS 的 transition 实现平滑移动：

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

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

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

使用 JavaScript 动画库（如 GSAP） GSAP 提供更复杂的动画控制，适合需要弹性效果或路径运动的场景：

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

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

实现物理效果（重力与碰撞）

通过 JavaScript 计算小球位置并实时更新 DOM，模拟物理效果：

<template>
  <div class="container" @click="dropBall">
    <div class="ball" :style="ballStyle"></div>
  </div>
</template>

<script>
export default {
  data() {
    return { y: 0, velocity: 0, gravity: 0.5 };
  },
  computed: {
    ballStyle() {
      return { transform: `translateY(${this.y}px)` };
    }
  },
  methods: {
    dropBall() {
      this.y = 0;
      this.velocity = 0;
      const animate = () => {
        this.velocity += this.gravity;
        this.y += this.velocity;
        if (this.y < 300) requestAnimationFrame(animate);
      };
      animate();
    }
  }
};
</script>

<style>
.container {
  height: 300px;
  border: 1px solid #ccc;
  position: relative;
}
.ball {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: blue;
}
</style>

拖拽交互实现

结合 Vue 的指令和原生 DOM 事件实现拖拽功能：

<template>
  <div 
    class="ball"
    @mousedown="startDrag"
    :style="{ left: pos.x + 'px', top: pos.y + 'px' }"
  ></div>
</template>

<script>
export default {
  data() {
    return { 
      pos: { x: 100, y: 100 },
      isDragging: false,
      offset: { x: 0, y: 0 }
    };
  },
  mounted() {
    document.addEventListener('mousemove', this.drag);
    document.addEventListener('mouseup', this.stopDrag);
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;
      this.offset.x = e.clientX - this.pos.x;
      this.offset.y = e.clientY - this.pos.y;
    },
    drag(e) {
      if (!this.isDragging) return;
      this.pos.x = e.clientX - this.offset.x;
      this.pos.y = e.clientY - this.offset.y;
    },
    stopDrag() {
      this.isDragging = false;
    }
  }
};
</script>