缓动函数requestAnimationFrame用法

Posted 2020-07-02 妖精的理想乡

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了缓动函数requestAnimationFrame用法相关的知识，希望对你有一定的参考价值。

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||

   window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element){
    window.setTimeout(callback, 1000 / 60);
  };

})();

具体这是什么有什么好处请找度娘大致就是无限setTimeout 的递归套

我只做个简单的demo

<!DOCTYPE html>
<html>
<meta charset="utf-8" content="text/html">
<head>
    <title></title>
</head>
<body>
    <div id="div1" style="width: 100px; height: 100px; background: red; color:#fff ;position: absolute; left: 0; top: 0;">
        
        点我停下来
    </div>


<script type="text/javascript">
         // shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
        return  window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element){
          window.setTimeout(callback, 1000 / 60);
        };
})();

var Animate=false;

var x=0;

//普通递归
    // feiris();
    // function feiris(){
    //                 if(Animate){return false;}
    //                 x++;
    //                 document.getElementById("div1").style.left=x+"px";
                    
    //                 setTimeout(function(){
                                                
    //                         feiris();
                         
    //                 },16);
    // };
//利用缓动
 function autoMove() {
     x++;
     document.getElementById("div1").style.left=x+"px";
}

(function animloop(){
     autoMove();
     if(!Animate){requestAnimFrame(animloop);}//elem没有用
})();
document.getElementById("div1").onclick=function(){
            
             Animate=true;
            
}

</script>
</body>

</html>

然后各位可以chrome对比性能

以上是关于缓动函数requestAnimationFrame用法的主要内容，如果未能解决你的问题，请参考以下文章

requestAnimationFrame之缓动的应用