如何使用requestAnimationFrame？

Question

我是动画新手,但我最近用动画制作了动画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？

Answer 1

警告!这个问题不是关于垫片的最佳方法 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. 打开开发人员工具(右键单击 - >检查元素)您将在右侧的状态栏中看到一个红色的x(这意味着执行中出现错误)
3. 打开控制台选项卡
4. 你会看见

   未捕获的TypeError:对象[对象DOMWindow]的属性'requestAnimFrame'不是函数

5. window.requestAnimFrame输入控制台:按Enter键,您将看到它undefined.到目前为止,您知道问题实际上与requestAnimationFrame您无关,并且您应该专注于代码的第一部分.
6. 现在,这是将代码缩小到返回某些内容的问题.这是一个困难的部分,如果你现在还没有找到它,你可能想转向互联网寻求更多帮助.

此外,观看此视频,了解编写javascript的一些好习惯,他还提到了邪恶的自动分号插入.

Answer 2

 /*
  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/

希望这可以帮助!