javascript - 如何使用requestAnimationFrame？

Question

我是动画新手，但我最近使用 setTimeout 创建了一个动画。 FPS 太低，所以我找到了使用 requestAnimationFrame 的解决方案，在 link 中有描述.

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

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

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

此外，是否有更全面的使用此 API 的指南？

Answer 1

警告!这个问题不是关于 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. 打开开发人员工具(右键单击 -> 检查元素)你会在右边的状态栏看到一个红色的x(这意味着执行有错误)
3. 打开控制台标签
4. 你会看到

   Uncaught TypeError: Property 'requestAnimFrame' of object [object DOMWindow] is not a function

5. 在控制台中输入:window.requestAnimFrame 然后按回车，你会看到它是undefined。现在您知道问题实际上与 requestAnimationFrame 无关，您应该专注于代码的第一部分。
6. 现在的问题是将代码缩小到返回某些东西的程度。这是困难的部分，如果此时您仍然找不到它，您可能需要转向互联网寻求更多帮助。

另外，观看 this video对于编写 javascript 的一些良好实践，他还提到了邪恶的自动分号插入。