How to use requestAnimationFrame?

Question

I'm new to animation, but recently created an animation using setTimeout . 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 requestAnimFrame(animloop); callback function requestAnimFrame(animloop); in chopElement function.

Also, is there a more detailed guide on using this API?

Answer 1

Attention! This question is not about the best way to lay requestAnimFrame . If you are looking for this, skip to any other answer on this page.

---

You have been tricked by automatic semicolon insertion. Try the following:

 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 in your return . He does this because it is followed by a new line, and the next line is a valid expression. In fact, it translates into:

 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 , javascript generates an error and stops execution. You can solve the problem by enclosing the expression in parentheses.

Can I recommend Chrome or firebug developer tools for checking javascript execution. With these tools you would see an error. You should debug it like this (I assume Chrome):

• Execute code (it gives unexpected results)
• Open the developer tools (right-click → Check item) You will see a red x in the status bar on the right (this means that there is an error in the execution).
• Open console tab
• You will see

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

• Enter the console: window.requestAnimFrame and press enter, you will see that it is undefined . By now, you know that the problem is not really related to requestAnimationFrame and that you should focus on the first part of your code.
• Now it is a matter of narrowing down the code to the point where it returns something. This is the hard part, and if you still can’t find it at this point, you can ask for help online for more help.

Also, watch this video for some good practices when writing javascript, it also mentions the introduction of an automatic automatic semicolon.

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 } 

Take a look at the jsfiddle example below; It clearly shows what I mean:

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

Hope this helps!

Answer 3

Use smart throttling to prevent the event from firing more than the screen can redraw the change:

 var requestFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || // throttle fall-back for unsupported browsers (function(){ var throttle = false, FPS = 60 / 1000; // time 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); };