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();

详细说明，请看一下这个小提琴：https://jsfiddle.net/bhenqfbw/

如果在控制台打开时运行此命令，您将看到每次调用之间的毫秒差异不同。在我的情况下，我改变了这个函数中的图像源，波动甚至更高。

有没有办法可以让它保持不变，或者只是必须这样？

Answer 1

requestAnimationFrame不是基于时间的。你应该以动画时间为基础，而不是框架。

基本上，如果您想要使用常量值更改元素的位置并且没有固定的帧速率，则可以使用帧之间的时差来计算每帧中的距离。

这是主要想法:(查看控制台） https://jsfiddle.net/bhenqfbw/1/

Answer 2

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.
}

请求函数调用与requestAnimationFrame之间的间隔不同

2 个答案: