您的位置：首页 > 产品设计 > UI/UE

利用requestAnimationFrame实现智能动画

2013-11-26 19:41 465 查看

什么是requestAnimationFrame?

在过去,为了使用JavaScript脚本代码实现动画,你需要使用一个定时器来指定每隔一段时间使页面显示效果产生一些变化。最近,浏览器厂商决定提供一些API来优化动画的实现方法。于是,在HTML 5新增window.requestAnimFrame方法,用于以一种更好的性能来实现动画。

为什么需要使用requestAnimationFrame?

通过window.requestAnimFrame方法的利用,浏览器可以具有将各种并发性动画结合入一个单一的页面进行创建及渲染的能力,这种能力将使得动画的实现具有更好的性能。例如,可以同时执行使用JavaScript脚本代码实现的动画与使用CSS中的transition样式属性实现的动画。另外,通过window.requestAnimFrame方法的使用,当用户将浏览器标签窗口切换到其他标签窗口时,当前页面中的动画将被暂停运行,以减少CPU、GPU与内存的消耗。

如何使用requestAnimationFrame?

window.requestAnimFrame方法的使用方法如下所示：

window.requestAnimFrame = (function(){
return  window.requestAnimationFrame       ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame    ||
window.oRequestAnimationFrame      ||
window.msRequestAnimationFrame     ||
function( callback ){
window.setTimeout(callback, 1000 / 60);//定义每秒执行60次动画
};
})();
//相当于使用setInterval(render, 16)方法,但是具有更高的性能
(function animloop(){
requestAnimFrame(animloop);
render();
})();

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<style>
body{
margin:0px;
padding:0px;
}
</style>
<body>
<script>
window.requestAnimFrame = (function(){
return  window.requestAnimationFrame       ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame    ||
window.oRequestAnimationFrame      ||
window.msRequestAnimationFrame     ||
function(){
window.setTimeout(callback, 1000 / 60);
};
})();

var canvas, context;
init();
animate();
function init() {
canvas = document.createElement('canvas');
canvas.style.left=0;
canvas.style.top=0;
canvas.width = 210;
canvas.height = 210;
context = canvas.getContext('2d');
document.body.appendChild( canvas );
}

function animate() {
requestAnimFrame( animate );
draw();
}

function draw() {
var time = new Date().getTime() * 0.002;
var x = Math.sin( time ) * 96 +105;
var y = Math.cos( time * 0.9 ) * 96 + 105;
context.fillStyle ='pink';
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();
}
</script>
</body>
</html>

原文链接：http://html5online.com.cn/articles/2012081102.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航