如何使用 requestAnimationFrame? [英] How to use requestAnimationFrame?

问题描述

我是动画新手，但我最近使用 setTimeout 创建了一个动画.FPS 太低，所以我找到了一个使用 requestAnimationFrame 的解决方案，在这个 链接.

I'm new to animation, but I have recently created an animation using setTimeout. The FPS was too low, so I found a solution to use requestAnimationFrame, described in this link.

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

So far, my code is:

//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);.

This stops during the first frame. I have a callback function requestAnimFrame(animloop); in the chopElement function.

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

Also, is there a more thorough guide to using this API?

推荐答案

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

您被自动分号插入欺骗了.试试这个:

You got tricked by automatic semicolon insertion. Try this:

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

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

javascript automatically puts a semicolon behind your return statement. It does this because it is followed by a newline and the next line is a valid expression. In fact it gets translated to:

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 会产生错误并停止执行.您可以通过将表达式括在括号中来解决问题.

This code returns undefined and never executes the code behind the return statement. So window.requestAnimFrame is undefined. When you call it in animloop, the javascript produces an error and stops execution. You can solve the problem by enclosing the expression in parentheses.

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

May I recommend the Chrome developer tools or firebug to inspect javascript execution. With these tools you would have seen the error. You should go about debugging it as follows (I'm assuming Chrome):

1. 执行代码(它会产生意想不到的结果)
2. 打开开发者工具(右键单击 -> Inspect Element)您会在右侧的状态栏中看到一个红色的 x(这表示执行中有错误)
3. 打开控制台标签
4. 您将看到

未捕获的类型错误:对象 [对象 DOMWindow] 的属性 'requestAnimFrame' 不是函数

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

在控制台输入:window.requestAnimFrame 并回车，你会看到它是undefined.现在您知道问题实际上与 requestAnimationFrame 无关，您应该专注于代码的第一部分.

现在的问题是将代码范围缩小到返回某些内容的程度.这是困难的部分，如果此时您仍未找到它，您可能需要求助于互联网以获得更多帮助.

Type in the console: window.requestAnimFrame and press enter, you will see it is undefined. By now you know that the problem is in fact unrelated to requestAnimationFrame and that you should concentrate on the first part of your code.

Now it is a matter of narrowing down the code up to the point where it returns something. This is the difficult part and if you still don't find it at this point you might want to turn to the internet for more help.

另外，观看这个视频，了解一些编写 javascript 的良好实践，他还提到邪恶的自动分号插入.

Also, watch this video for some good practices in writing javascript, He also mentions the evil automatic semicolon insertion.

这篇关于如何使用 requestAnimationFrame?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！