スマートかどうか微妙ではありますが、
またもCSS 3D Cloudsのコードを読んでて発見したコード。
いままで以下のようにコードを使っていたんですが、

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.oRequestAnimationFrame      ||
            window.msRequestAnimationFrame     ||
            function( callback ){
              window.setTimeout(callback, 1000 / 60);
            };
  })();

こっちの書き方のほうがキレイだなーということで今後はこっちを使ってみます。
コードの雰囲気からすると↑のほうが把握しやすいですが。

(function() {
  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelRequestAnimationFrame = window[vendors[x] + 'CancelRequestAnimationFrame'];
  }

  if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };

  if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
}())

github

スマートなrequestAnimationFrameのクロスブラウザ対応 — Gist

Foundation HTML5 Animation With Javascript (Foundations Apress)

posted with amazlet at 12.10.15

Billy Lamberta
friendsofED
売り上げランキング: 96806

Amazon.co.jp で詳細を見る