进入web2.0时代，在网页中实现动画不再局限于一种方法

可以使用CSS3的动画关键帧；也可以使用css3过渡；也可以使用画布上的画图来实现动画，也可以使用jQuery动画相关API方便地实现。当然也可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态和位置来实现动画，前提是画面的更新频率要达到每秒60次，这样肉眼才能看到流畅的动画效果。理解JavaScript requestanimation框架

首先，让我们看看它在github上的源代码requestAnimationFrame

//改编自https://gist.github.com/paulirish/1579671，源自埃里克穆勒的//http://paulirish.com/2011/requestAnimationFrame-for-smart-animation//http://my . opera.com/emoller/blog/2011/12/20/requestAnimationFrame-for-smart-er-animation//requestAnimationFrame poly ill。//来自Paul Irish、Tino Zijdel、Andrew Mao、Klemen Slavi、Darius Bacon//MIT licenseif(！Date.now) Date.now=function() {返回新日期()。getTime()；};(function() { '使用strict '；var厂商=['ms '，' moz '，' webkit '，' o ']；//浏览器与for兼容(var I=0；我是小贩。长度！window.requestAnimationFrameI) {//对于支持的浏览器，直接统一接口var vp=厂商[I]；window . RequestAnimationFrame=window[VP ' RequestAnimationFrame ']；window . CancelAnimationFrame=(window[VP ' CancelAnimationFrame ']| | window[VP ' CancelRequestAnimationFrame '])；} if (/iP(ad|hone|od)。*OS 6/。test(window . navigator . user agent)//iOS 6有问题||！window.requestAnimationFrame ||！窗户。cancelinitionframe){//对不支持的浏览器使用setTimeout和cleartime out var last time=0；window.requestAnimationFrame=函数(回调){ var now=date . now()；var next time=math . max(last time 16，现在)；返回setTimeout(函数(){ callback(last time=next time))；}，next time-now)；};window . cancelanimationframe=clear time out；}}());我相信，读一点点源代码对每个人来说都没有问题，即使看不懂也没关系，可以调用api

requestAnimationFrame的优势

浏览器可以优化并行动画动作，更合理地重新排列动作序列，在一个渲染周期内完成可以合并的动作，从而呈现出更流畅的动画效果。例如，JS动画可以通过requestAnimationFrame()与CSS动画/变换或SVG SMIL动画同步。此外，如果在浏览器选项卡中运行动画，当选项卡不可见时，浏览器会暂停它，这将减少对CPU和内存的压力，并节省电池电量。

用法示例：

function animate(){ console . log(' animation ')；window.requestAnimationFrame(动画)；} animate()；

requestAnimationFrame(动画)是关键，它使要执行的函数动画化，因此浏览器控制台将始终执行animate()函数。

浏览器兼容性

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。