当前位置：首页 > VUE

vue实现点击弧线动画

2026-02-21 20:27:46VUE

实现点击弧线动画的方法

在Vue中实现点击弧线动画可以通过多种方式完成，以下是几种常见的方法：

使用CSS动画和Vue事件绑定

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

<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 duration = 1000;
      const startTime = Date.now();

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

        // 贝塞尔曲线计算弧线路径
        this.x = progress * 200;
        this.y = Math.sin(progress * Math.PI) * -100;

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

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

<style>
.ball {
  width: 50px;
  height: 50px;
  background-color: #42b983;
  border-radius: 50%;
  transition: transform 0.1s linear;
  cursor: pointer;
}
.container {
  height: 300px;
  position: relative;
}
</style>

使用GSAP动画库

GSAP提供了强大的动画功能，可以更简单地实现复杂的弧线动画。

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

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

export default {
  methods: {
    animateWithGSAP() {
      const ball = this.$refs.ball;

      gsap.to(ball, {
        x: 200,
        y: -100,
        duration: 1,
        ease: "sine.inOut",
        onComplete: () => {
          gsap.to(ball, {
            x: 0,
            y: 0,
            duration: 0.5
          });
        }
      });
    }
  }
}
</script>

使用SVG路径动画

通过SVG的路径特性可以实现更精确的弧线动画效果。

vue实现点击弧线动画

<template>
  <svg width="300" height="200" @click="animateSVG">
    <circle ref="ball" cx="30" cy="100" r="15" fill="#42b983" />
    <path id="arcPath" d="M30,100 Q150,-50 270,100" fill="none" stroke="none" />
  </svg>
</template>

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

export default {
  methods: {
    animateSVG() {
      const ball = this.$refs.ball;

      gsap.to(ball, {
        duration: 1,
        motionPath: {
          path: "#arcPath",
          align: "#arcPath",
          autoRotate: true
        },
        ease: "power1.inOut"
      });
    }
  }
}
</script>