requestAnimationFrame中的定时

Question

在我正在进行的城市交通模式的建设中，我正在努力找出合适的时机。

我希望能

( a)设置动画速度--我猜想它现在正在尝试60 for，但我希望能够将它设置得更快或更慢。我试过这个代码：

var fps = 5;
function draw() {
    setTimeout(function() {
       requestAnimationFrame(animate);
  }, 1000 / fps);
}
draw();

但考虑到rAF被称为三次不同的时间，我不知道如何实现它。我三次都试过了，但都没成功。

( b)我想对每一辆“车辆”的发射稍加拖延，以免它们都立即出发。

小提琴：https://jsfiddle.net/g3yhr00L/

Answer 1

要节流动画，只需这样做：

// define some FRAME_PERIOD in units of ms - may be floating point
// if you want uSecond resolution
function animate(time) {
    // return if the desired time hasn't elapsed
    if ( (time - lastTime) < FRAME_PERIOD) {
        requestAnimationFrame(animate);
        return;
    }

    lastTime = time;

    // animation code

}

要改变车辆的启动时间，您需要按照车辆本身的逻辑来构建它。我不会让每辆车都有生命。

Answer 2

这是我在寻求限制FPS的时候发现的一种方法。

它非常好，并且具有exlanation:编辑:不需要使用Date.now()。

var fps = 30;
var now;
var then;
var interval = 1000/fps;
var delta;

function draw(now) {
    if (!then) { then = now; }
    requestAnimationFrame(draw);
    delta = now - then;

    if (delta > interval) {
        // update time stuffs

        // Just `then = now` is not enough.
        // Lets say we set fps at 10 which means
        // each frame must take 100ms
        // Now frame executes in 16ms (60fps) so
        // the loop iterates 7 times (16*7 = 112ms) until
        // delta > interval === true
        // Eventually this lowers down the FPS as
        // 112*10 = 1120ms (NOT 1000ms).
        // So we have to get rid of that extra 12ms
        // by subtracting delta (112) % interval (100).
        // Hope that makes sense.

        then = now - (delta % interval);

        // ... Code for Drawing the Frame ...
    }
}

draw();

您可以在这里找到原始文章：http://codetheory.in/controlling-the-frame-rate-with-requestanimationframe/