类似高德地图的轨迹路线实现,结合tween和requestAnimationFrame实现的:
传入一些轨迹点集合,利用tween得出每两个点之间的动态点坐标。
`
<div class="test">
<div id="box" style="left:0"></div>
</div>
<script>
var position = { x: 10, y: 0 }
var tween = new TWEEN.Group()
var box = document.getElementById("box")
var totalQue = [];
var arr = [
{ x: 100, y: 0 },
{ x: 100, y: 100 },
{ x: 200, y: 100 },
{ x: 200, y: 200 },
]
arr.reduce((prev, next) => {
if(prev) {
let temp = new TWEEN.Tween(prev, tween)
temp.to(next).onUpdate(point => {
//每次绘制的操作
box.style.left = point.x + "px"
box.style.top = point.y + "px"
}).onComplete(point => {
//完全每一个节点的回调函数
console.log('complete', point)
})
totalQue.push(temp)
}
return next
}, null)
totalQue.reduce((prev,next) => {
prev.chain(next)
return next
})
totalQue[0].start()
var animate = () => {
requestAnimationFrame(animate);
tween.update();
if(position.x >= 200) {
cancelAnimationFrame(animate)
}
}
animate();
setTimeout(() => {
cancelAnimationFrame(animate)
}, 500)
</script>
`