requestAnimationFrame能替代setInterval吗?

JavaScript 2014-09-08 requestAnimationFrame,setInterval,WebGL

没有requestAnimationFrame之前

先来看看传统的动画效果是怎么制作的?大多数都是使用setTimeout或者setInterval加上一个延迟时间以及每一个动作单元的大小实现每一帧的绘制效果,连贯后看起来即成了动画。如下实例:

var $div = $("#myDiv");

var loop = setInterval(function(){
    if($div.position().left > 500){
         clearInterval(loop);
         loop = null;
    }else{
         $div.css("left", $div.posisition().left + 5 + "px");
    }
}, 20);

有了requestAnimationFrame之后

var $div = $("#myDiv");

var loop = function(){
     if($div.position().left < 500){
          $div.css("left", $div.position().left + 5 + "px");
          requestAnimationFrame(loop);
     }
};

requestAnimationFrame是一个监听帧的API,即每绘制完一帧后就执行一下requestAnimationFrame函数。

浏览器支持:

requestAnimationFrame相比传统setInterval有什么优势?

先来看看一个例子

http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/Default.html

这是一个很好的对比,一眼就能看出各自优势,很多浏览器显示频率是16.7ms,所以相当于1秒60帧,这个帧速是很多动画帧率的最低要求值。高于60就有丢帧发生了,所以setTimeout/setInterval推荐最小值为17ms。requestAnimationFrame则不用理会这个速率,如果你是10ms频率,那么久每10ms绘制一帧,如果是20ms就每20ms绘制一帧。

WebGL的好搭档

requestAnimationFrame在IE10才被支持,而支持WebGL的浏览器都支持requestAnimationFrame API,所以在制作3D效果绘图方面,requestAnimationFrame是制作动态3D效果的好搭档。

文字链接:《requestAnimationFrame能替代setInterval吗?

文章地址:http://www.qttc.net/201409446.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 0

    Hi,你想第一个做沙发么?