控制动画的速度，因为点动画跨线

Question

我正在尝试控制动画的速度，使其与车辆的实际速度相匹配。

let counter = 0;
const animate = () => {
    counter += 1;

    // Update point geometry to a new position based on the animation
    // And the distance the point has travelled along the route.

    const updatedPoint = turf.along(lineString, (counter / 100) * lineDistance, 'kilometers');
    moveVehicleToPoint(updatedPoint);

    // updatedPoint represents a point between/along between origin and destination

    if (updatedPoint.geometry.coordinates[0] !== destination) {
        requestAnimationFrame(animate);
    }
}

animate();

我快到了，但数学不是我最强的资产。

lineDistance 平均约为 0.01-0.02 公里。
lineString 包含起点和终点坐标。
turf.along 取 lineString，一个设定的距离，并返回距离从您提供的沿线距离（以公里为单位）开始。

目前，我已包含任意值 100 以除以。如果车辆移动需要 1 秒，这已经很不错了。它会移动大约一秒左右到下一个点。

如果需要 2 秒，那就太慢了，而且会在车辆完成之前完成移动。

我如何包含我的durationSeconds 变量，这样如果我说它需要 2 秒，animate() 将在 2 秒内完美地沿线动画？

Answer 1

尝试在外部范围内设置一个与您需要的速度相关的变量。相应地改变它的值来控制它。