requestAnimationFrame动画控制详解

前端开发whqet,csdn,王海庆,whqet,前端开发专家

还在使用setInterval吗，你out了，requestAnimationFrame可以实现更为经济、更加准确的控制动画，今天来看看它的来龙去脉。

以往

在web动画、app动画中，我们经常通过setInterval或setTimeout定时修改DOM、CSS实现动画，如下面代码所示。

var timer=setInterval(function(){
   //一些动画
},1000/60)
//清除动画
clearInterval(timer);

不过如此动画的方式极为耗费资源，经常是这样的结果，刚开始比较流畅，5分钟之后动画就卡住了，于是“大家”都看不下去了，开始想各种办法。

简介

2011年左右，Paul Irish的《requestAnimationFrame for Smart Animating》首先介绍了requestAnimationFrame的使用，然后经过大家的努力《Timing control for script-based animations》在2013年成为了w3c的候选标准。

requestAnimationFrame的方式的优势如下：

1.经过浏览器优化，动画更流畅

2.窗口没激活时，动画将停止，省计算资源

3.更省电，尤其是对移动终端

requestAnimationFrame的使用方式，简单调用代码如下。

function animate() {
  // Do whatever
  requestAnimationFrame(animate);
  // Do something animate
  
}
//go->
requestAnimationFrame(animate);

有的时候我们必须要加一些控制，