当前位置：首页 > VUE

vue实现点击弧线动画

2026-01-21 04:57:13VUE

实现点击弧线动画的方法

在Vue中实现点击弧线动画可以通过CSS和JavaScript结合的方式完成。以下是具体实现步骤：

使用CSS和Vue事件绑定

通过Vue的@click事件触发动画，结合CSS的transition和transform属性实现弧线效果。

<template>
  <div class="container">
    <div 
      class="ball" 
      @click="animate"
      :style="{ transform: `translate(${x}px, ${y}px)` }"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      x: 0,
      y: 0,
      isAnimating: false
    }
  },
  methods: {
    animate() {
      if (this.isAnimating) return;
      this.isAnimating = true;

      const startX = 0;
      const startY = 0;
      const endX = 200;
      const endY = 100;
      const controlX = 100;
      const controlY = -50;

      const duration = 1000;
      const startTime = performance.now();

      const animateFrame = (currentTime) => {
        const elapsed = currentTime - startTime;
        const progress = Math.min(elapsed / duration, 1);

        // 贝塞尔曲线计算
        this.x = (1 - progress)  2 * startX + 
                 2 * (1 - progress) * progress * controlX + 
                 progress  2 * endX;
        this.y = (1 - progress)  2 * startY + 
                 2 * (1 - progress) * progress * controlY + 
                 progress  2 * endY;

        if (progress < 1) {
          requestAnimationFrame(animateFrame);
        } else {
          this.isAnimating = false;
        }
      };

      requestAnimationFrame(animateFrame);
    }
  }
}
</script>

<style>
.ball {
  width: 30px;
  height: 30px;
  background-color: #42b983;
  border-radius: 50%;
  transition: transform 0.1s linear;
}
.container {
  width: 300px;
  height: 200px;
  border: 1px solid #ddd;
}
</style>

使用GSAP库实现

GSAP是一个强大的动画库，可以更简单地实现复杂的弧线动画。

<template>
  <div class="container">
    <div ref="ball" class="ball" @click="animate"></div>
  </div>
</template>

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

export default {
  methods: {
    animate() {
      gsap.to(this.$refs.ball, {
        duration: 1,
        x: 200,
        y: 100,
        ease: "sine.inOut",
        motionPath: {
          path: [{ x: 0, y: 0 }, { x: 100, y: -50 }, { x: 200, y: 100 }],
          type: "cubic"
        }
      });
    }
  }
}
</script>

<style>
.ball {
  width: 30px;
  height: 30px;
  background-color: #42b983;
  border-radius: 50%;
}
.container {
  width: 300px;
  height: 200px;
  border: 1px solid #ddd;
}
</style>

使用CSS关键帧动画

通过CSS的@keyframes定义弧线路径，Vue控制动画的触发。

<template>
  <div class="container">
    <div 
      class="ball" 
      @click="startAnimation"
      :class="{ 'animate': isAnimating }"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAnimating: false
    }
  },
  methods: {
    startAnimation() {
      this.isAnimating = true;
      setTimeout(() => {
        this.isAnimating = false;
      }, 1000);
    }
  }
}
</script>

<style>
.ball {
  width: 30px;
  height: 30px;
  background-color: #42b983;
  border-radius: 50%;
  position: relative;
}
.animate {
  animation: arcAnimation 1s ease-in-out;
}
@keyframes arcAnimation {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(100px, -50px);
  }
  100% {
    transform: translate(200px, 100px);
  }
}
.container {
  width: 300px;
  height: 200px;
  border: 1px solid #ddd;
}
</style>