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

问题描述

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

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

  //使用setTimeout后退填充图层
 window.requestAnimFrame =（function（）{
返回
 window.requestAnimationFrame || 
 window.webkitRequestAnimationFrame || 
 window.mozRequestAnimationFrame || 
 window.oRequestAnimationFrame || 
 window.msRequestAnimationFrame || 
 function（/ * function * / callback）{
 window.setTimeout（callback，1000/60）; 
}; 
}）（）; 
（函数animloop（）{
 //获取指标
 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）; //创建一个新的框架
 requestAnimFrame（animloop）; 
}）（）; 
  

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

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

解决方案

警告！这个问题不是最好的垫片方式 requestAnimFrame 。如果您正在寻找，请转到此页面上的任何其他答案。

---

您被骗了通过自动分号插入。试试这个：

  window.requestAnimFrame = function（）{
 return（
 window.requestAnimationFrame || 
 window.webkitRequestAnimationFrame || 
 window.mozRequestAnimationFrame || 
 window.oRequestAnimationFrame || 
 window.msRequestAnimationFrame || 
 function（/ * function * / callback）{ 
 window.setTimeout（回调，1000/60）; 
} 
）; 
}（）; 
  

javascript会自动在你的返回后面加一个分号声明。这样做是因为它后跟换行符，下一行是有效的表达式。事实上它被翻译为：

  return; 
 window.requestAnimationFrame || 
 window.webkitRequestAnimationFrame || 
 window.mozRequestAnimationFrame || 
 window.oRequestAnimationFrame || 
 window.msRequestAnimationFrame || 
函数（/ * function * / callback）{
 window.setTimeout（callback，1000/60）; 
}; 
  

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

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

1. 执行代码（它会产生意外结果）


2. 打开开发人员工具（右键单击 - >检查元素）
   您将在右侧的状态栏中看到一个红色的x（这意味着执行中出现错误）


3. 打开控制台选项卡


4. 您将看到

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



5. 键入控制台： window.requestAnimFrame 然后按回车键，您将看到它是 undefined 。到目前为止，您知道问题实际上与 requestAnimationFrame 无关，您应该专注于代码的第一部分。


6. 现在，这是将代码缩小到返回某些内容的问题。这是一个困难的部分，如果你现在还没有找到它，你可能想转向互联网寻求更多帮助。

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

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

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

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

解决方案

Warning! This question is not about the best way to shim requestAnimFrame. If you are looking for that, move on to any other answer on this page.

---

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

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.

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. Execute the code (it produces unexpected results)
2. Open the developer tools (right click -> Inspect Element) You will see a red x in the status bar at the right (this means there is an error in the execution)
3. Open the console tab
4. You will see

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

5. 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.
6. 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.

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

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