vue实现移动轨迹
实现移动轨迹的基本思路
在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"
})
}
}
}性能优化建议
轨迹实现时需注意性能问题：
- 对于高频坐标采集，使用requestAnimationFrame替代直接渲染
- 大量轨迹点时应考虑使用Web Worker处理坐标计算
- 移动端注意被动事件监听优化滚动性能
- 动画结束及时清除事件监听和定时器
以上方法可根据具体需求组合使用，如采集触摸坐标后通过GSAP实现平滑动画。
