使用 requestAnimationFrame 的函数调用之间的间隔不同

Question

我正在尝试使用 requestAnimationFrame 为 JPG 图像序列制作动画，但是我注意到有时在某些帧上需要更长的时间。

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame    ||
    window.oRequestAnimationFrame      ||
    window.msRequestAnimationFrame     ||
    function( callback ){
        window.setTimeout(callback, 1000 / 60);
    };
})();

var start;
var i=0;
var animateLoop = function() {

    if(i>500) {
        return false;
    }
    i++;
    requestAnimFrame(animateLoop);
    var _start = start;
    start = +new Date();
    console.log("Iteration:"+i, "Milliseconds Diff: "+(start-_start));
   }

animateLoop();

要详细说明，请看这个fiddle：https://jsfiddle.net/bhenqfbw/

如果您运行在控制台打开时执行此操作，您会发现每次调用之间的毫秒差异是不一样的。而我在这个函数中更改图像源的情况下，波动更大。

有什么方法可以让它保持不变，还是必须这样？

Answer 1

嗯，requestAnimationFrame 的重点是让浏览器决定何时再次调用该函数。它为此进行了优化。因此这是最好的选择。然而，如果你真的想要一些激进的东西，而不关心函数是否完成被调用 setInterval 是你的朋友（我的意思是敌人，因为它很糟糕）。或者：

function toCall(){
  //do stuff
  setTimeout(toCall); //Place this at the end of your function. And no second parameter needed. It'll be called whenever the stack is empty.
}

Answer 2

requestAnimationFrame 不是基于时间的。你应该让你的动画基于时间，而不是帧。

基本上如果你想用一个常数值改变一个元素的位置并且你没有固定的帧率，你可以使用帧之间的时间差来计算每帧中的距离。

主要思想如下：（查看控制台） https://jsfiddle.net/bhenqfbw/1/

使用 requestAnimationFrame 的函数调用之间的间隔不同

interval between function calls with requestAnimationFrame varies

javascript

animation

requestanimationframe