Question

在我的城市交通模型的持续建设中，我正在努力让时机成熟。

我希望能够

a）设置动画速度 - 我认为它现在正在尝试60fps，但我希望能够更快或更慢地设置它。我试过这段代码：

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

但鉴于rAF被称为三次，我不知道如何实现它。我试过这三个都没有成功。

b）我想在每辆车的发射方面略有延迟，＆＃34;这样他们就不会马上出发了。

在这里小提琴：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/

requestAnimationFrame中的时间

2 个答案: