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

尝试在外部范围内设置与所需速度相关的变量。相应地更改其值以进行控制。

跨线动画时控制动画的速度

1 个答案: