Retrieving requestAnimationFrame with JavaScript
The requestAnimationFrame function has been a major boost to developers creating and managing animations with JavaScript. Paul Irish has an excellent introduction on requestAnimationFrame -- I highly recommend you read it. This HTML5Hub post is also very good. Most browsers now support the animation function but in the case a browser doesn't, you can shim a rough equivalent with setInterval:
var requestAnimationFrame = window.requestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.msRequestAnimationFrame
|| function(callback) { return setTimeout(callback, 1000 / 60); };
requestAnimationFrame was implemented with browser prefixes so we'll check for those if the unprefixed window method isn't there. If no native implementation exists, a setInterval shim will have to do!
![From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!]()
My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...
![Regular Expressions for the Rest of Us]()
Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...
![Reverse Element Order with CSS Flexbox]()
CSS is becoming more and more powerful these days, almost to the point where the order of HTML elements output to the page no longer matters from a display standpoint -- CSS lets you do so much that almost any layout, large or small, is possible. Semantics...
![Using Opacity to Show Focus with jQuery]()
A few days back I debuted a sweet article that made use of MooTools JavaScript and opacity to show focus on a specified element. Here's how to accomplish that feat using jQuery.
The jQuery JavaScript
There you have it. Opacity is a very simple but effective...
According to caniuse, Microsoft’s browsers never had a vendor prefixed version of
requestAnimationFrame, so we can just keepmozandwebkit.That’s a very common way to normalize the function, but in most recent implementations
requestAnimationFramepasses an argument to the callback function, which is the amount of milliseconds sinceperformance.timing.navigationStart, with micro precision too. This can be very handy for the callback.It’s not really possible to perfectly emulate this, but you can get something close if you take note of the epoch time as soon as the script is executed. So this is how I used to polyfill
requestAnimationFrame:(function(start) { window.requestAnimationFrame = function(callback) { return setInterval(function() { callback(new Date().getTime() - start); }, 1000 / 60); }; })(new Date().getTime());(Well, not exactly… since most of the times
requestAnimationFrameis called again in the callback function, but the function itself takes some milliseconds at least to be executed – because it probably involves some kind of repaint – and you should adjust the time interval accordingly, or you may never hope to even get close to 60 fps.)Also, don’t forget to normalize
cancelAnimationFrame, which has a nasty variant in some (and maybe forgotten?) WebKit browsers:webkitCancelRequestAnimationFrame.