标签：
自打学习canvas动画以来,都说requestAnimationFrame好,就一直用,也没觉得有什么太过于特殊的地方,直到刚才,在写完前面的"小球碰撞墙壁----干掉误差"之后,,突然想去看看如果这里改回setInterval,会是个什么样,差距究竟有多大?
结果....一看吓一跳,差距太大了,说难听点,setInterval...简直像屎一样
具体结果,只需要将前面那篇里面的gamleLoop方法和该方法前面的那句gameLoop() 替换成下面的代码,一看就知道了.
function gameLoop(){ ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT); ball.draw(ctx); ball.update(); } setInterval(gameLoop,30)
不亲自做实践,就没法取得进步,果真是这样.
requestAnimationFrame简易可兼容的方法
window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { return window.setTimeout(callback, 1000 / 60); }; })();
较为完整的方法
(function() { var lastTime = 0; var vendors = [‘webkit‘, ‘moz‘]; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x] + ‘RequestAnimationFrame‘]; window.cancelAnimationFrame = window[vendors[x] + ‘CancelAnimationFrame‘] || // Webkit中此取消方法的名字变了 window[vendors[x] + ‘CancelRequestAnimationFrame‘]; } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16.7 - (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); }; } }());
requestAnimationFrame与setInterval,setTimeout
标签：
原文地址：http://www.cnblogs.com/liqingchang/p/4478038.html
