缓动函数requestAnimationFrame用法

Posted 妖精的理想乡

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之缓动的应用

js实现滚动条滑动到底部

用缓动函数模拟物理动画

Easing 缓动函数收集

JS动画之缓动函数分析及动画库

封装缓动动画函数