JavaScriptの、requestAnimationFrame()かsetInterval()を使ったアニメーション関数

JavaScriptの、requestAnimationFrame()かsetInterval()を使ったアニメーション関数。迚も好く使う割に、クソの塊である"vendor-prefix"の所為で無駄に長いので、書き出しておく。

/**
 * ex.)
 *   var stop, i = 1000;
 *   stop = animate(function () {
 *     --i;
 *     if (i <= 0) { stop(); }
 *   });
 * @param {function()} callback
 * @return {function()} Stop animation function.
 */
function animate (callback) {
  var timerID, stop, requestAnimationFrame, cancelRequestAnimationFrame,
      isStopped = false;

  function animationFun () {
    if (isStopped) { return; }
    context.clearRect(0, 0, width, height);
    callback();
    if (requestAnimationFrame) { timerID = requestAnimationFrame(animationFun); }
  }

  if (window.requestAnimationFrame && window.cancelAnimationFrame) {
    requestAnimationFrame = window.requestAnimationFrame;
    cancelAnimationFrame = window.cancelAnimationFrame;
  } else if (window.mozRequestAnimationFrame && window.mozCancelAnimationFrame) {
    requestAnimationFrame = window.mozRequestAnimationFrame;
    cancelAnimationFrame = window.mozCancelAnimationFrame;
  } else if (window.msRequestAnimationFrame && window.msCancelAnimationFrame) {
    requestAnimationFrame = window.msRequestAnimationFrame;
    cancelAnimationFrame = window.msCancelAnimationFrame;
  } else if (window.webkitRequestAnimationFrame && window.webkitCancelAnimationFrame) {
    requestAnimationFrame = window.webkitRequestAnimationFrame;
    cancelAnimationFrame = window.webkitCancelAnimationFrame;
  } else if (window.oRequestAnimationFrame && window.oCancelAnimationFrame) {
    requestAnimationFrame = window.oRequestAnimationFrame;
    cancelAnimationFrame = window.oCancelAnimationFrame;
  }
  if (requestAnimationFrame) {
    timerID = requestAnimationFrame(animationFun);
    stop = function () {
      isStopped = true;
      cancelAnimationFrame(timerID);
    };
  } else {
    timerID = setInterval(animationFun, 16);
    stop = function () { clearInterval(timerID); };
  }
  return stop;
}