requestAnimationFrame API 动画接口

一般情况下,在浏览器上实现一个动画,通常都是使用setTimeout或setInterval定时器函数实现的。而现在浏览器厂商提供了一个统一帧管理、提供监听帧的API,即requestAnimationFrame,不过,这只是一个做动画的基础API,即不基于DOM元素的style变化,也不基于canvas,或者WebGL。所以,具体的动画细节需要我们自己写。

为什么要使用requestAnimationFrame?

这个API会考虑页面是否可见以及显示器的刷新频率,以确定分配给动画每秒多少帧。对于同时进行的n个动画,浏览器能够进行优化,把原本需要N次reflow和repaint优化成1次,这样就实现了高质量的动画。举个例子,现在有基于JS的动画,还有基于CSS的transitions,或者SVG SMIL. Plus,如果浏览器的某个tab正在运行这样一个动画,然后你切到另一个tab,或者干脆最小化,总之就是你看不见它了,这时浏览器就会停止动画。这将意味着更少的CPU和更少的内存消耗。

如何使用requestAnimationFrame?

1、调用requestAnimationFrame函数,传递一个callback参数,则在下一个动画帧时,会调用callback。
2、不传递参数地直接调用该函数,启动动画帧,下一个帧触发时,会同时触发window.onmozbeforepaint事件,可以通过注册该事件来进行动画。
不过第2种方法由于依赖于Firefox自己的事件,且beforepaint事件还没进入到标准中,所以不推荐使用。

//浏览器兼容处理
var requestAnimationFrame = (function(){
	return window.requestAnimationFrame ||
	window.webkitRequestAnimationFrame ||
	window.mozRequestAnimationFrame ||
	window.oRequestAnimationFrame ||
	window.msRequestAnimationFrame || function(callback) {
		window.setTimeout(callback, 1000 / 60);
	};
})();

//如何使用
(function(){
	render();
	requestAnimationFrame(arguments.callee, element);
})();

requestAnimationFrame API

window.requestAnimationFrame(function(/* time */ time){
	// time ~= +new Date // the unix time
}, /* optional bounding elem */ elem);

// Firefox
window.mozRequestAnimationFrame([callback]);
// Chrome
window.webkitRequestAnimationFrame(callback[, element]);

参数:

callback:(FF可选,Chrome必选)
下次repaint调用的函数,函数的第一个参数是当前时间
element:(FF无)
(the element that visually bounds the entire animation)。对canvas和WebGL来说,它就是<canvas>元素,对于DOM节点来说,你可以不管它,如果你想稍微进行一下优化,也可以传个参数进来。

浏览器支持情况:

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 10 webkitRequestAnimationFrame 4.0 (2.0) mozRequestAnimationFrame  -  -  -

《全文完》

这篇文章目前有1条评论

Leave a Reply

(必填项)

(必填项)

(可选)