一、动画方式
在HTML5/CSS3时代,实现动画的方式有许多种:
你可以用css3的animation和@keyframes;
可以用css3的transition;
还可以用原始的setTimeout()、setInterval()达到动画效果,以及jQuery中animate方法;
今天我们要介绍是另一种动画方式:requestAnimationFrame(callback)!
二、基本语法
可以直接调用,也可以通过window来调用,接收一个函数作为回调,返回一个ID值:
ID=requestAnimationFrame(callback)//callback为回调函数
requestAnimationFrame的用法和setTimeout()类似都是单回调,其优势在于跟着浏览器的绘制走。相当一部分的浏览器的显示频率是16.7ms,即1s绘制60次。如果间隔时间小于16.7ms动画就会卡顿,而requestAnimationFrame就是在浏览器绘制是调用动画!总结requestAnimationFrame的优势如下:
1.跟着浏览器的绘制走,动画更流畅;
2.页面最小化了,或者被Tab切换关灯了,页面绘制全部停止,资源高效利用;
3.更省电,尤其是对移动终端。
如果想停止动画调用,方法如下:
cancelAnimationFrame(ID);
三、兼容情况
Android设备压根就不支持嘛!其他设备基本上跟CSS3动画的支持一模一样。
如果需要简单兼容,可这么写:
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })();
但是呢,并不是所有设备的绘制时间间隔是1000/60 ms
, 以及上面并木有cancel相关方法,所以,就有下面这份更全面的兼容方法:
(function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (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); }; }());
然后我们就能像使用setTimeout一样来使用requestAnimationFrame了!