スマートかどうか微妙ではありますが、
またも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
friendsofED
売り上げランキング: 96806