window.requestAnimationFrame()
方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用。
⚠️ 注意:若您想要在下一次重绘时产生另一个动画画面,您的回调例程必须调用
requestAnimationFrame()
。
传统的动画渲染是通过 setTimeout 和 setInterval 进行实现,但是这两种定时器会有两个弊端:
window.requestAnimationFrame(callback);
参数 | 说明 | 类型 |
---|---|---|
callback | 下次重新绘制动画时调用的回调函数。该回调函数只有一个参数 DOMHighResTimeStamp ,指示 requestAnimationFrame() 开始出发回调函数的当前时间。 | function |
返回值 | 类型 |
---|---|
请求动画渲染的标识 ID。是个非零值,没有其他意义。可用作 window.cancelAnimationFrame() 以取消回调函数。 | number 整数 |
window.cancelAnimationFrame(requestID);
参数 | 说明 | 类型 |
---|---|---|
requestId | 指定动画渲染的标识符 | number |
requestAnimationFrame
会把每一帧中的所有 DOM 操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率requestAnimationFrame
将不会进行重绘或回流,这当然就意味着更少的 CPU、GPU 和内存使用量requestAnimationFrame
是由浏览器专门为当年规划提供的 API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了 CPU 开销IE | Edge | Firefox | Chrome | Safari |
---|---|---|---|---|
11 | 17 | 60 | 66 | 11.1 |
Firefox、Chrome、IE10+ 对 requestAnimationFrame
支持很好,但不兼容 IE9- 浏览器,但是我们可以用定时器完成兼容性改造。
(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'] ||window[vendors[x] + 'CancelRequestAnimationFrame'];}if (!window.requestAnimationFrame)window.requestAnimationFrame = function (callback) {/*调整时间,让一次动画等待和执行时间在最佳循环时间间隔内完成*/var currTime = new Date().getTime();var timeToCall = Math.max(0, 17 - (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);};})();
function requestAnimation(a, b, c) {if () {window.requestAnimationFrame(function () {requestAnimation(a, b, c)})}}
参考资料: