requestAnimationFrame 等同于定时器

作者: Simon_s | 来源:发表于2016-10-08 19:00 被阅读857次

requestAnimationFrame 等同于定时器
requestAnimationFrame
requestAnimationFrame 定时器
requestAnimationFrame 定时器
速度版运动框架
3D动画
HTML5探秘：用requestAnimationFrame优化
requestAnimationFrame与setTimeout
为什么用requestAnimationFrame
requestAnimationFrame和setTimeout

1、在我们学习 requestAnimationFrame 我们县里啊了解下这个新兴的动画制作方法

HTML5/CSS3时代，我们要在web里做动画选择其实已经很多了:
你可以用CSS3的 animattion+keyframes;
你也可以用css3的 transition;
你还可以用通过在 canvas上作图来实现动画
也可以借助 jQuery动画相关的API方便地实现;
当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来
实现动画，前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果。
现在又多了一种实现动画的方案，那就是还在草案当中的window.requestAnimationFrame()方法。

2、window.requestAnimationFrame() 将告知浏览器你马上要开始动画效果了，后者需要在下次动画前调用相应方法来更新画面。这个方法就是传递给window.requestAnimationFrame()的回调函数。

也可这个方法原理其实也就跟setTimeout/setInterval差不多，通过递归调用同一方法来不断更新画面以达到动起来的效果，

3、requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：

1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
3、优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。

举一个例子来证明下 requestAnimationFrame 强大吧！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<style type="text/css">
    #box{
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>
</head>
<body>
<div id="box"></div>


    <script type="text/javascript">
    
    // 做浏览器适配
        window.requestAnimationFrame =
                    window.requestAnimationFrame ||
                    window.webkitrequestAnimationFrame  ||
                    window.mozrequestAnimationFrame  ||
                    window.msrequestAnimationFrame  ||
                    window.orequestAnimationFrame;
        window.cancelAnimationFrame =
                    window.cancelAnimationFrame ||
                    window.webkitCancelAnimationFrame  ||
                    window.mozCancelAnimationFrame  ||
                    window.msCancelAnimationFrame  ||
                    window.oCancelAnimationFrame;
// 获取box
                 var   box  = document.querySelector("#box");

// 有返回值  取消时使用
                  var   _id  =  window.requestAnimationFrame(run);
 
                  console.log(_id)

// 每秒60帧    不用去考虑性能问题
                   function run(time){

                    // console.log(time);
                   var  width  = parseFloat(getComputedStyle(box).width);

                   if(width>=600){
                    window.cancelAnimationFrame(_id);

                   }else{

                    window.requestAnimationFrame(run);

                    box.style.width = width + 1 + "px";
                   }
               }
    </script>

</body>
</html>