<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>requestAnimFrame</title>
</head>
<body>
<canvas width="256" height="256" id="J_canvas"></canvas>
<script>
var canvas, context;
function draw() {
canvas=document.getElementById("J_canvas");
context = canvas.getContext( '2d' );
var time = new Date().getTime() * 0.002;
var x = Math.sin( time ) * 96 + 128;
var y = Math.cos( time * 0.9 ) * 96 + 128;
context.fillStyle = 'rgb(245,245,245)';
context.fillRect( 0, 0, 255, 255 );
context.fillStyle = 'rgb(255,0,0)';
context.beginPath();
context.arc( x, y, 10, 0, Math.PI * 2, true );
context.closePath();
context.fill();
}
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element){
window.setTimeout(callback, 1000 / 60);
};
})();
function animate() {
draw();
requestAnimFrame( animate );
//setTimeout("animate()",10);
}
window.onload = function(){
animate();
}
</script>
</body>
</html>
<iframe width="100%" height="300" src="http://jsfiddle.net/Kt3My/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
将//setTimeout("animate()",10)注释去掉,上述示例可以对比看出requestAnimFrame和setTimeout两种调用方式的动画流畅差异。
http://www.cnblogs.com/rubylouvre/archive/2011/08/22/2148793.html
return window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.oCancelAnimationFrame ||
window.msCancelAnimationFrame ||
function(callback, element){
window.clearTimeout(callback, 1000 / 60);
};
})();