一直以来都是用css3来实现动画效果,一个是性能问题,第二个是js实现总不如css3流畅,但是最近发现了一个新大陆:requestAnimationFrame
requestAnimationFrame是什么?
requestAnimationFrame()
函数就是针对动画效果的API,你可以把它用在DOM上的风格变化或画布动画或WebGL中
requestAnimationFrame有什么好处?
浏览器可以优化并行的动画动作,更合理的重新排列动作序列,并把能够合并的动作放在一个渲染周期内完成,从而呈现出更流畅的动画效果。比如,通过
requestAnimationFrame()
,JS动画能够和CSS动画/变换或SVG SMIL动画同步发生。另外,如果在一个浏览器标签页里运行一个动画,当这个标签页不可见时,浏览器会暂停它,这会减少CPU,内存的压力,节省电池电量。
封装后的JS:判断使用
4ms
还是
16ms
的延迟,来最佳匹配60fps
(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'] || // name has changed in 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);
};
}
}());
demo:向上滚动
function funscroll(){
var scroll = $("#info-position").css("top");
if( scroll>-395){
scroll-=5;
}
$("#info-position").css("top",scroll "px");
requestAnimationFrame(funscroll);
}
各种浏览器对requestAnimationFrame的支持情况
谷歌浏览器,火狐浏览器,IE10 都实现了这个函数,即使你的浏览器很古老,上面的对requestAnimationFrame封装也能让这个方法在IE8/9上不出错。