控制动画的速度跨越点线动画

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.02km。 lineString包含起点和终点的坐标。 turf.along采取lineString，设定距离，并返回到沿公里线路您提供的距离从一开始的距离。

目前，我已经包含的任意值100的划分。如果车辆举动花费了1秒钟，这是相当不错的。它将由一个大致沿第二到下一个点移动。

如果花了2秒，这将是太慢了，完成移动以及行驶的前车必须。

我怎么能包括我的durationSeconds变量，因此，如果我说花了2秒钟，animate()将完美沿线超过2秒的动画？

Answer 1

尝试在涉及到你所需要的速度范围外设立一个变量。相应地更改它的值来控制它。