用requestAnimationFrame优化Web动画

requestAnimationFrame是什么？

在浏览器动画程序中，咱们一般使用一个定时器来循环每隔几毫秒移动目标物体一次，来让它动起来。现在有一个好消息，浏览器开发商们决定：“嗨，为何咱们不在浏览器里提供这样一个API呢，这样一来咱们能够为用户优化他们的动画。”因此，这个requestAnimationFrame()函数就是针对动画效果的API，你能够把它用在DOM上的风格变化或画布动画或WebGL中。

使用requestAnimationFrame有什么好处？

浏览器能够优化并行的动画动做，更合理的从新排列动做序列，并把可以合并的动做放在一个渲染周期内完成，从而呈现出更流畅的动画效果。好比，经过requestAnimationFrame()，JS动画可以和CSS动画/变换或SVG SMIL动画同步发生。另外，若是在一个浏览器标签页里运行一个动画，当这个标签页不可见时，浏览器会暂停它，这会减小CPU，内存的压力，节省电池电量。

requestAnimationFrame的用法

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); // usage: // instead of setInterval(render, 16) .... (function animloop(){ requestAnimFrame(animloop); render(); })();

对requestAnimationFrame更牢靠的封装

Opera浏览器的技术师Erik Möller 把这个函数进行了封装，使得它能更好的兼容各类浏览器。你能够读一读这篇文章，但基本上他的代码就是判断使用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'] || 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); }; }());