我怎么用window.requestAnimationFrame工作，但又能改变它的速度？

Question

有没有办法在比如说经典的Snake游戏中间，用window.requestAnimationFrame临时修改一些东西的速度？

请看下面的代码。

class Game {

    constructor(snake) {
        this.snake = snake;
    }

    draw() {
        this.snake.slither()
        this.snake.draw()

    }

    start() {
        document.addEventListener("keydown", keyDownEvent); 
        let x = 8;
        interval = setInterval(this.draw.bind(this), 1000 / x);
    }

}

在上面的例子中，如果我想临时改变速度，我只需要改变间隔速度，然后在setTimeOut之后，将速度恢复正常。

Answer 1

遗憾的是，最好的办法是，你不能改变速度。requestAnimationFrame 速度，因为它是由浏览器计算的，以确保良好的性能。

但是，你可以像你自己描述的那样，改变一个间隔速度。但设置 setInterval 不允许改变间隔速度，除非停止和重新启动。或者你可以使用一个使用 setTimeout 并在每次超时后调用自己。

在每次超时后，都会调用自己。setTimeout 应该使用所有函数作用域中可用的变量或属性来使用和修改 interval 率。

let timeout = null;
let interval = 0;

function render() {
  // Render your animation.
}

function draw() {
  timeout = setTimeout(() => {
    requestAnimationFrame(render);
    draw();
  }, interval);
}

function stop() {
  if (timeout !== null) {
    clearTimeout(timeout);
  }
}

function changeDrawSpeed(times) {
  interval = 100 * times;
}

draw();

setTimeout(changeDrawSpeed, 1000, 50);
setTimeout(changeDrawSpeed, 3000, 0);

Answer 2

编辑：我刚刚把我之前的一个例子叉开编辑了一下，给你看。https:/jsfiddle.netibowankenobi2k81ya5q。

你当然可以写一个例程来控制你的游戏帧数，我有一个小的库，例如我可以做到。

rafx.async({frame:0})
.animate(function(frames){
   let frame = ++frames.frame;
   if (!(frames % 3)) { //skip every third frame
     return frames;
   }
   //game logic here
}).until(function(frames){
    //return true to quit;
}).then(//whatever follows)

你也可以通过额外的变量来修改运行时的动画变化（帧数或其他）。

https:/github.comIbrahimTanyalcinRafX