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):
Uncaught TypeError: Property 'requestAnimFrame' of object [object DOMWindow] is not a function
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.Also, watch this video for some good practices in writing javascript, He also mentions the evil automatic semicolon insertion.