js动画最佳实现 -- requestAnimationFrame

我们经常用setInterval来实现动画，其实这种做法不是太好，因为不同浏览器的刷新频率也不一样（一般认为设置16为最佳,按每秒60帧算，1000/60≈16.67）

实现js动画最好的是requestAnimationFrame:

requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：
1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

特点

　　【1】requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率

　　【2】在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量

　　【3】requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销

 

例子：

　1. setInterval.　

<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div>
<button id="btn">run</button>
<script>
　　var timer;
　　btn.onclick = function(){
　　　　clearInterval(timer);
　　　　myDiv.style.width = '0';
　　　　timer = setInterval(function(){
　　　　if(parseInt(myDiv.style.width) < 500){
　　　　　　myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
　　　　　　myDiv.innerHTML = parseInt(myDiv.style.width)/5 + '%';
　　　　}else{
　　　　　　clearInterval(timer);
　　　　}
　　},16);
}
</script>

 

2. requestAnimationFrame.

<div id="myDiv2" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div>
<button id="btn2">run</button>
<script>
　　var timer;
　　btn2.onclick = function(){
　　　　myDiv2.style.width = '0';
　　　　cancelAnimationFrame(timer);
　　　　timer = requestAnimationFrame(function fn(){
　　　　if(parseInt(myDiv2.style.width) < 500){
　　　　　　myDiv2.style.width = parseInt(myDiv2.style.width) + 5 + 'px';
　　　　　　myDiv2.innerHTML = parseInt(myDiv2.style.width)/5 + '%';
　　　　　　timer = requestAnimationFrame(fn);
　　　　}else{
　　　　　　cancelAnimationFrame(timer);
　　　　}
　　});
}
</script>

 

(转载)