Skip to content

Instantly share code, notes, and snippets.

@zaus
Forked from mrdoob/RequestAnimationFrame.js
Last active December 14, 2015 13:19
Show Gist options
  • Save zaus/5092709 to your computer and use it in GitHub Desktop.
Save zaus/5092709 to your computer and use it in GitHub Desktop.
Exploring simpler `requestAnimationFrame` shims
// simplest, "original": 234 char
!window.requestAnimationFrame && (window.requestAnimationFrame = window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60) });
// compressible simplest: 157 char
(function(w,anif) {
if(!w['r' + anif]) w['r' + anif] = w['webkitR' + anif] || w['mozR' + anif] || w['msR' + anif] || w['oR' + anif] || function (callback) { w.setTimeout(callback, 1000 / 60) };
})(window, 'equestAnimationFrame');
// incomplete version: 351 char
(function (w, vendors) {
/// <summary>Seems to be the standard way to animate: ex) http://codepen.io/gregmcausland/pen/dnzke </summary>
for (var x = vendors.length - 1; x >= 0 && !w.requestAnimationFrame; x--) {
w.requestAnimationFrame = w[vendors[x] + 'RequestAnimationFrame'];
w.cancelAnimationFrame = w[vendors[x] + 'CancelAnimationFrame'] || w[vendors[x] + 'CancelRequestAnimationFrame']; // this part is rarely used; could remove to "save space"
}
// DNE fallback
if(!w.requestAnimationFrame) w.requestAnimationFrame = function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})(window, ['o', 'ms', 'moz', 'webkit', '']);
// complete, compressible: 311 -- see above
(function (w, vendors, req, cancel, animframe, r2, c2, x) {
// the loop polyfill -- from http://creativejs.com/resources/requestanimationframe/ and everywhere on codepen.io
req += animframe; cancel += animframe;
for (x = vendors.length - 1; !w[req] && x >= 0; --x) {
w[req] = w[vendors[x] + r2 + animframe];
w[cancel] = w[vendors[x] + c2 + animframe] || w[vendors[x] + r2 + c2 + animframe];
}
// DNE fallback
if(!w[req]) w[req] = function (callback) { return w.setTimeout(callback, 1000 / 60) }
if(!w[cancel]) w[cancel] = function (id) { w.clearTimeout(id) }
})(window, ['o', 'ms', 'moz', 'webkit'], 'request', 'cancel', 'AnimationFrame', 'Request', 'Cancel')
/**
* Provides requestAnimationFrame in a cross browser way.
* @author paulirish / http://paulirish.com/
* @author zaus - reducing + combining with "robust" version http://creativejs.com/resources/requestanimationframe/
*/
(function (w, vendors, req, cancel, animframe, r2, c2, x) {
req += animframe; cancel += animframe;
for (x = vendors.length-1; !w[req] && x >= 0; --x) {
w[req] = w[vendors[x] + r2 + animframe];
w[cancel] = w[vendors[x] + c2 + animframe] || w[vendors[x] + r2+c2 + animframe];
}
if(!w[req]) w[req] = function (callback) { return w.setTimeout(callback, 1000 / 60) }
if(!w[cancel]) w[cancel] = function (id) { w.clearTimeout(id) }
})(window, ['o', 'ms', 'moz', 'webkit'], 'request', 'cancel', 'AnimationFrame', 'Request', 'Cancel')
@zaus
Copy link
Author

zaus commented Mar 5, 2013

see revision history for reductions & corrections

@zaus
Copy link
Author

zaus commented Mar 5, 2013

doesn't minify well enough:

(function (w, vendors, req, cancel, animframe, r2, c2, x) {
    r2 = 'R' + req; c2 = 'C' + (cancel += animframe);
    req = 'r' + (req += animframe); cancel = 'c' + cancel;
    for (x = vendors.length-1; !w[req] && x >= 0; --x) {
        w[req] = w[vendors[x] + r2 + animframe];
        w[cancel] = w[vendors[x] + c2] || w[vendors[x] + r2+c2];
    }
    !w[req] && (w[req] = function (callback) { return w.setTimeout(callback, 1000 / 60) })
    !w[cancel] && (w[cancel] = function (id) { w.clearTimeout(id) })
})(window, ['o', 'ms', 'moz', 'webkit'], 'equest', 'ancel', 'AnimationFrame')

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment