当前位置：首页 > VUE

vue实现移动轨迹

2026-03-29 10:00:33VUE

实现移动轨迹的基本思路

在Vue中实现移动轨迹通常涉及监听用户触摸或鼠标事件，记录坐标点，并通过动画或路径绘制展示轨迹。以下是两种常见场景的实现方法。

基于触摸事件的轨迹绘制

通过监听移动端触摸事件（touchstart、touchmove、touchend）记录轨迹坐标，使用canvas或SVG实时绘制路径：

<template>
  <canvas 
    ref="canvas"
    @touchstart="startDrawing"
    @touchmove="draw"
    @touchend="stopDrawing"
    style="border: 1px solid black; touch-action: none;">
  </canvas>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      ctx: null
    }
  },
  mounted() {
    this.ctx = this.$refs.canvas.getContext('2d')
    this.ctx.strokeStyle = '#000000'
    this.ctx.lineWidth = 3
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true
      const { clientX, clientY } = e.touches[0]
      this.ctx.beginPath()
      this.ctx.moveTo(clientX, clientY)
    },
    draw(e) {
      if (!this.isDrawing) return
      const { clientX, clientY } = e.touches[0]
      this.ctx.lineTo(clientX, clientY)
      this.ctx.stroke()
    },
    stopDrawing() {
      this.isDrawing = false
    }
  }
}
</script>

基于CSS动画的轨迹运动

通过记录坐标点数组，使用CSS transform和transition实现元素沿轨迹运动：

<template>
  <div 
    class="moving-object"
    :style="{ transform: `translate(${currentPos.x}px, ${currentPos.y}px)` }">
  </div>
</template>

<script>
export default {
  data() {
    return {
      pathPoints: [
        { x: 0, y: 0 },
        { x: 100, y: 50 },
        { x: 200, y: 20 },
        { x: 300, y: 80 }
      ],
      currentPos: { x: 0, y: 0 },
      currentIndex: 0
    }
  },
  mounted() {
    this.moveAlongPath()
  },
  methods: {
    moveAlongPath() {
      if (this.currentIndex >= this.pathPoints.length) return

      this.currentPos = { ...this.pathPoints[this.currentIndex] }
      this.currentIndex++

      setTimeout(() => {
        this.moveAlongPath()
      }, 1000)
    }
  }
}
</script>

<style>
.moving-object {
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
  transition: transform 0.5s ease-out;
  position: absolute;
}
</style>

使用第三方库优化轨迹动画

对于复杂轨迹运动，可使用GSAP等动画库实现贝塞尔曲线运动：

import gsap from 'gsap'

export default {
  methods: {
    animateWithGSAP() {
      const path = [
        { x: 0, y: 0 },
        { x: 100, y: 100 },
        { x: 200, y: 50 },
        { x: 300, y: 150 }
      ]

      gsap.to(".target-element", {
        duration: 3,
        bezier: {
          values: path,
          type: "soft"
        },
        ease: "power1.inOut"
      })
    }
  }
}