当前位置：首页 > VUE

vue实现移动轨迹

2026-02-17 10:24:52VUE

Vue 实现移动轨迹的方法

使用 CSS Transition 和 Vue 数据绑定

通过 Vue 的数据绑定和 CSS 的 transition 属性，可以实现平滑的移动轨迹效果。定义一个数据属性来控制元素的位置，并通过 CSS 过渡动画实现平滑移动。

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

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

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

使用 GSAP 动画库

GSAP 是一个强大的动画库，可以实现更复杂的轨迹动画。通过 GSAP 的 to 方法，可以定义元素的移动路径和动画效果。

<template>
  <div ref="box" class="box"></div>
  <button @click="animate">移动</button>
</template>

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

export default {
  methods: {
    animate() {
      gsap.to(this.$refs.box, {
        x: 200,
        y: 100,
        duration: 1,
        ease: "power2.out"
      });
    }
  }
};
</script>

<style>
.box {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: absolute;
}
</style>

使用 Vue Transition 组件

Vue 的 <transition> 组件可以用于实现元素的进入和离开动画。结合 CSS 或 JavaScript 钩子，可以实现自定义的移动轨迹效果。

<template>
  <button @click="show = !show">切换</button>
  <transition name="slide">
    <div v-if="show" class="box"></div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  }
};
</script>

<style>
.box {
  width: 50px;
  height: 50px;
  background-color: green;
}

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

使用 SVG 和路径动画

如果需要更复杂的轨迹，可以使用 SVG 和路径动画。通过定义 SVG 路径，并使用动画库如 GSAP 或 Anime.js 来实现元素沿路径移动的效果。

<template>
  <svg width="300" height="200">
    <path ref="path" d="M10,100 Q150,200 290,100" stroke="black" fill="none"/>
    <circle ref="circle" cx="0" cy="0" r="10" fill="red"/>
  </svg>
  <button @click="animatePath">沿路径移动</button>
</template>

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

export default {
  methods: {
    animatePath() {
      const path = this.$refs.path;
      const circle = this.$refs.circle;
      const length = path.getTotalLength();

      gsap.to(circle, {
        motionPath: {
          path: path,
          align: path,
          alignOrigin: [0.5, 0.5]
        },
        duration: 2,
        ease: "power2.inOut"
      });
    }
  }
};
</script>

使用 requestAnimationFrame 实现自定义动画

对于需要完全自定义的动画效果，可以使用 requestAnimationFrame 来实现逐帧动画。通过 Vue 的数据绑定更新元素的位置。

<template>
  <div class="box" :style="{ left: x + 'px', top: y + 'px' }"></div>
  <button @click="startAnimation">开始动画</button>
</template>

<script>
export default {
  data() {
    return {
      x: 0,
      y: 0,
      animationId: null
    };
  },
  methods: {
    startAnimation() {
      const duration = 2000; // 动画持续时间（毫秒）
      const startTime = performance.now();

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

        this.x = progress * 200;
        this.y = progress * 100;

        if (progress < 1) {
          this.animationId = requestAnimationFrame(animate);
        }
      };

      this.animationId = requestAnimationFrame(animate);
    }
  },
  beforeDestroy() {
    if (this.animationId) {
      cancelAnimationFrame(this.animationId);
    }
  }
};
</script>

<style>
.box {
  width: 50px;
  height: 50px;
  background-color: purple;
  position: absolute;
}
</style>