52

我是动画新手，但我最近使用setTimeout. FPS 太低，所以我找到了使用的解决方案requestAnimationFrame，在此链接中进行了描述。

到目前为止，我的代码是：

//shim layer with setTimeout fallback
    window.requestAnimFrame = (function(){
        return  
            window.requestAnimationFrame       || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame    || 
            window.oRequestAnimationFrame      || 
            window.msRequestAnimationFrame     || 
            function(/* function */ callback){
                window.setTimeout(callback, 1000 / 60);
            };
    })();
    (function animloop(){
        //Get metrics
        var leftCurveEndX = finalLeft - initialLeft;
        var leftCurveEndY = finalTop + finalHeight - initialTop;
        var rightCurveEndX = finalLeft + finalWidth - initialLeft - initialWidth;
        var rightCurveEndY = leftCurveEndY;

        chopElement(0, 0, 0, 0, leftCurveEndX, leftCurveEndY, rightCurveEndX, rightCurveEndY);//Creates a new frame 
        requestAnimFrame(animloop);
    })();

这在第一帧期间停止。我在函数requestAnimFrame(animloop);中有一个回调chopElement函数。

此外，是否有更详尽的使用此 API 的指南？

4

3 回答 3

83

警告！这个问题不是关于 shim 的最佳方法 requestAnimFrame。如果您正在寻找它，请转到此页面上的任何其他答案。

你被自动分号插入欺骗了。试试这个：

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

javascript 会自动在您的语句后面加上一个分号return。它这样做是因为它后面跟着一个换行符，并且下一行是一个有效的表达式。事实上，它被翻译成：

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

此代码返回undefined并且从不执​​行 return 语句后面的代码。window.requestAnimFrame也是如此undefined。当您调用它时animloop，javascript 会产生错误并停止执行。您可以通过将表达式括在括号中来解决问题。

我可以推荐 Chrome 开发人员工具或 firebug 来检查 javascript 执行。使用这些工具，您会看到错误。你应该按如下方式调试它（我假设是 Chrome）：

  1. 执行代码（它会产生意想不到的结果）
  2. 打开开发者工具（右键->Inspect Element）你会在右边的状态栏看到一个红色的x（表示执行有错误）
  3. 打开控制台选项卡
  4. 你会看见
    未捕获的类型错误：对象 [object DOMWindow] 的属性“requestAnimFrame”不是函数
  5. 在控制台输入：window.requestAnimFrame然后回车，你会看到它是undefined. 现在您知道问题实际上与此无关requestAnimationFrame，您应该专注于代码的第一部分。
  6. 现在的问题是将代码缩小到它返回某些内容的程度。这是困难的部分，如果此时您仍然找不到它，您可能需要转向互联网寻求更多帮助。

另外，观看此视频以了解编写 javascript 的一些良好做法，他还提到了邪恶的自动分号插入。

于 2011-04-09T15:02:52.543 回答
8 
 /*
  Provides requestAnimationFrame in a cross browser way.
  http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 */

if (!window.requestAnimationFrame) {

    window.requestAnimationFrame = (function() {

        return window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame || // comment out if FF4 is slow (it caps framerate at ~30fps: https://bugzilla.mozilla.org/show_bug.cgi?id=630127)
        window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {

                window.setTimeout(callback, 1000 / 60);

        };

    })();

}

animate();

function animate() {
    requestAnimationFrame(animate);
    draw();
}

function draw() {
    // Put your code here
}

看看下面的 jsfiddle 示例；它清楚地说明了我的意思；

http://jsfiddle.net/XQpzU/4358/light/

希望这可以帮助！

于 2013-08-06T01:39:15.180 回答
0

“智能节流，因此事件被触发的次数不会超过屏幕重新绘制更改的次数：

var requestFrame = window.requestAnimationFrame ||
                   window.webkitRequestAnimationFrame ||
                   // polyfill - throttle fall-back for unsupported browsers
                   (function() {
                       var throttle = false,
                           FPS = 1000 / 60; // 60fps (in ms)
       
                       return function(CB) {
                         if( throttle ) return;
                         throttle = true;
                         setTimeout(function(){ throttle = false }, FPS);
                         CB(); // do your thing
                       }
                    })();

/////////////////////////////
// use case:

function doSomething() {
  console.log('fired');
}

window.onscroll = function() {
  requestFrame(doSomething);
};
html, body{ height:300%; }
body::before{ content:'scroll here'; position:fixed; font:2em Arial; }

于 2014-03-17T20:49:40.413 回答