Javascript 使用 requestAnimationFrame 实现动画

lixj 3年前
   <p>requestAnimationFrame优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销,这篇文章给大家详细介绍使用requestAnimationFrame实现js动画:仪表盘效果。</p>    <p>废话不多说,先看看一个效果:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/5cc49a87a8c67ac65aa2fe8e45a53dcb.gif"></p>    <p>直接上代码:</p>    <pre>  <code class="language-javascript"><!DOCTYPE html>  <html>     <head>    <meta charset="UTF-8">    <title>canvas仪表盘动画效果</title>    <style type="text/css">     html,     body {      width: 100%;      height: 100%;      margin: 0;     }          canvas {      display: none;      border: 1px solid red;      display: block;      margin: 0 auto;      background: -webkit-linear-gradient(top, #0e83f5 0%, #21bdf6 100%);     }    </style>    <script type="text/javascript">     window.onload = function() {      window.requestAnimFrame = (function() {       return window.requestAnimationFrame ||        window.webkitRequestAnimationFrame ||        window.mozRequestAnimationFrame ||        function(callback) {         window.setTimeout(callback, 1000 / 60);        };      })();            var canvas = document.getElementById('canvas'),       ctx = canvas.getContext('2d'),       cWidth = canvas.width,       cHeight = canvas.height,       score = canvas.attributes['data-score'].value,       radius = 100, //圆的半径       deg0 = Math.PI / 9, //每一格20度       mum = 100, //数字步长       /*        * 要求:圆弧走完,数字得自加完,就得确定圆弧走的次数和数字走的次数相等!        数字最大10000,对应的度数是11*PI/9,那每个步长mum对应的度数如下:        */       deg1 = mum * Math.PI * 11 / 9 / 10000; // 每mum对应的度数        var angle = 0, //初始角度       credit = 0; //数字默认值开始数        var drawFrame = function() {       if(score < 0 || score > 10000) {        alert('额度只能是0--10000')        score = 10000;       }       ctx.save();       ctx.clearRect(0, 0, cWidth, cHeight);       ctx.translate(cWidth / 2, cHeight / 2);       ctx.rotate(8 * deg0); //160度         var aim = score * deg1 / mum; //数字对应的弧度数,先确定要走几次,除以mum,然后计算对应的弧度数       if(angle < aim) {        angle += deg1;       }         if(credit < score) {        credit += mum; //默认数字间隔是mum       } else if(credit >= 10000) {        credit = 10000;       }       //信用额度       ctx.save();       ctx.rotate(10 * deg0);       ctx.fillStyle = 'white';       ctx.font = '28px Microsoft yahei';       ctx.textAlign = 'center';       ctx.fillText('信用额度', 0, 50);       ctx.restore();       //       text(credit);         ctx.save();       ctx.beginPath();       ctx.lineWidth = 5;       ctx.strokeStyle = 'rgba(255, 255, 255, 1)';       ctx.arc(0, 0, radius, 0, angle, false); //动画圆环       ctx.stroke();       ctx.restore();       ctx.save();       ctx.rotate(10 * deg0); //200度       ctx.restore();       ctx.beginPath();       ctx.strokeStyle = 'rgba(255, 0, 0, .1)';       ctx.lineWidth = 5;       ctx.arc(0, 0, radius, 0, 11 * deg0, false); //设置外圆环220度       ctx.stroke();       ctx.restore();         window.requestAnimFrame(drawFrame);        }        function text(process) {       ctx.save();       ctx.rotate(10 * deg0); //200度       ctx.fillStyle = 'red';       ctx.font = '40px Microsoft yahei';       ctx.textAlign = 'center';       ctx.textBaseLine = 'top';       ctx.fillText("¥:" + process, 0, 10);       ctx.restore();      }        setTimeout(function() {       document.getElementById("canvas").style.display = "block";       drawFrame();      }, 10)       }    </script>   </head>     <body>    <canvas id="canvas" width="300" height="300" data-score='8100'></canvas>   </body>    </html></code></pre>    <p>使用requestAnimationFrame实现js动画性能好。先给大家简单介绍下requestAnimationFrame比起setTimeout、setInterval有哪些优势?</p>    <p>requestAnimationFrame 比起 setTimeout、setInterval的优势主要有:</p>    <p>1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。</p>    <p>2、在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的的cpu,gpu和内存使用量。</p>    <p>3.浏览器可以优化并行的动画动作,更合理的重新排列动作序列,并把能够合并的动作放在一个渲染周期内完成,从而呈现出更流畅的动画效果。比如,通过 requestAnimationFrame() ,JS动画能够和CSS动画/变换或SVG SMIL动画同步发生。另外,如果在一个浏览器标签页里运行一个动画,当这个标签页不可见时,浏览器会暂停它,这会减少CPU,内存的压力,节省电池电量。</p>    <h2><strong>基本用法与区别:</strong></h2>    <ul>     <li>setTimeout(code, millseconds)  用于延时执行参数指定的代码,如果在指定的延迟时间之前,你想取消这个执行,那么直接用 clearTimeout(timeoutId) 来清除任务, timeoutID  是  setTimeout  时返回的;</li>     <li>setInterval(code, millseconds) 用于每隔一段时间执行指定的代码,永无停歇,除非你反悔了,想清除它,可以使用  clearInterval(intervalId) ,这样从调用 clearInterval 开始,就不会在有重复执行的任务, intervalId  是  setInterval  时返回的;</li>     <li>requestAnimationFrame(code) ,一般用于动画,与  setTimeout  方法类似,区别是  setTimeout  是用户指定的,而  requestAnimationFrame  是浏览器刷新频率决定的,一般遵循 W3C 标准,它在浏览器每次刷新页面之前执行。</li>    </ul>    <p>先看实现思路:</p>    <p><strong>最简单:</strong></p>    <pre>  <code class="language-javascript">var FPS = 60;    setInterval(draw, 1000/FPS);  </code></pre>    <p>这个简单做法,如果draw带有大量逻辑计算,导致计算时间超过帧等待时间时,将会出现丢帧。除外,如果FPS太高,超过了当时浏览器的重绘频率,将会造成计算浪费,例如浏览器实际才重绘2帧,但却计算了3帧,那么有1帧的计算就浪费了。</p>    <p><strong>成熟做法:</strong></p>    <p>引入requestAnimationFrame,这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求。</p>    <p>这个函数类似setTimeout,只调用一次。</p>    <pre>  <code class="language-javascript">function draw() {           requestAnimationFrame(draw);           // ... Code for Drawing the Frame ...   }  </code></pre>    <p>递归调用,就可以实现定时器。</p>    <p>但是,这样完全跟浏览器帧频同步了,无法自定义动画的帧频,是无法满足需求的。</p>    <p><strong>接下来需要考虑如何控制帧频。</strong></p>    <p><strong>简单做法:</strong></p>    <pre>  <code class="language-javascript">  var fps = 30;  function tick() {          setTimeout(function() {                  requestAnimationFrame(tick);                  draw(); // ... Code for Drawing the Frame ...          }, 1000 / fps);  }  tick();    </code></pre>    <p>这种做法,比较直观的可以发现,每一次setTimeout执行的时候,都还要再等到下一个requestAnimationFrame事件到达,累积下去会造成动画变慢。</p>    <p><strong>自行控制时间跨度:</strong></p>    <pre>  <code class="language-javascript">  var fps = 30;  var now;  var then = Date.now();  var interval = 1000/fps;  var delta;    function tick() {          requestAnimationFrame(tick);          now = Date.now();          delta = now - then;          if (delta > interval) {                  // 这里不能简单then=now,否则还会出现上边简单做法的细微时间差问题。例如fps=10,每帧100ms,而现在每16ms(60fps)执行一次draw。16*7=112>100,需要7次才实际绘制一次。这个情况下,实际10帧需要112*10=1120ms>1000ms才绘制完成。                  then = now - (delta % interval);                  draw(); // ... Code for Drawing the Frame ...          }  }  tick();    </code></pre>    <p><strong>针对低版本浏览器再优化:</strong></p>    <p>如果浏览器没有requestAnimationFrame函数,实际底层还只能用setTimeout模拟,上边做的都是无用功。那么可以再改进一下。</p>    <pre>  <code class="language-javascript">  var fps = 30;  var now;  var then = Date.now();  var interval = 1000/fps;  var delta;  window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;    function tick() {          if(window.requestAnimationFrame)     {              requestAnimationFrame(tick);              now = Date.now();              delta = now - then;              if (delta > interval) {          // 这里不能简单then=now,否则还会出现上边简单做法的细微时间差问题。例如fps=10,每帧100ms,而现在每16ms(60fps)执行一次draw。16*7=112>100,需要7次才实际绘制一次。这个情况下,实际10帧需要112*10=1120ms>1000ms才绘制完成。                      then = now - (delta % interval);                      draw(); // ... Code for Drawing the Frame ...              }     }     else     {         setTimeout(tick, interval);                  draw();     }  }  tick();                  </code></pre>    <p>&nbsp;</p>    <p><strong>最后,还可以加上暂停。</strong></p>    <pre>  <code class="language-javascript">  var fps = 30;  var pause = false;  var now;  var then = Date.now();  var interval = 1000/fps;  var delta;  window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;    function tick() {       if(pause)            return;           if(window.requestAnimationFrame)       {                  ...       }       else       {            ...       }  }  tick();    </code></pre>    <h2><strong>requestAnimationFrame的用法</strong></h2>    <pre>  <code class="language-javascript">// shim layer with setTimeout fallback  window.requestAnimFrame = (function(){    return  window.requestAnimationFrame       ||            window.webkitRequestAnimationFrame ||            window.mozRequestAnimationFrame    ||            function( callback ){              window.setTimeout(callback, 1000 / 60);            };  })();      // usage:  // instead of setInterval(render, 16) ....    (function animloop(){    requestAnimFrame(animloop);    render();  })();  // place the rAF *before* the render() to assure as close to  // 60fps with the setTimeout fallback.  </code></pre>    <h2><strong>对requestAnimationFrame更牢靠的封装</strong></h2>    <p>Opera浏览器的技术师Erik Möller 把这个函数进行了封装 ,使得它能更好的兼容各种浏览器。你可以读一读这篇文章,但基本上他的代码就是判断使用 4ms 还是 16ms 的延迟,来最佳匹配60fps。下面就是这段代码,你可以使用它,但请注意,这段代码里使用的是标准函数,我给它加上了兼容各种 浏览器引擎前缀 。</p>    <pre>  <code class="language-javascript">(function() {      var lastTime = 0;      var vendors = ['webkit', 'moz'];      for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {          window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];          window.cancelAnimationFrame =            window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];      }        if (!window.requestAnimationFrame)          window.requestAnimationFrame = function(callback, element) {              var currTime = new Date().getTime();              var timeToCall = Math.max(0, 16 - (currTime - lastTime));              var id = window.setTimeout(function() { callback(currTime + timeToCall); },                timeToCall);              lastTime = currTime + timeToCall;              return id;          };        if (!window.cancelAnimationFrame)          window.cancelAnimationFrame = function(id) {              clearTimeout(id);          };  }());  </code></pre>    <h2><strong>我来看看使用requestAnimationFrame的效果</strong></h2>    <pre>  <code class="language-javascript">// requestAnim shim layer by Paul Irish      window.requestAnimFrame = (function(){        return  window.requestAnimationFrame       ||                 window.webkitRequestAnimationFrame ||                 window.mozRequestAnimationFrame    ||                 window.oRequestAnimationFrame      ||                 window.msRequestAnimationFrame     ||                 function(/* function */ callback, /* DOMElement */ element){                  window.setTimeout(callback, 1000 / 60);                };      })();        // example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/    var canvas, context, toggle;    init();  animate();    function init() {        canvas = document.createElement( 'canvas' );      canvas.width = 512;      canvas.height = 512;        context = canvas.getContext( '2d' );        document.body.appendChild( canvas );    }    function animate() {      requestAnimFrame( animate );      draw();    }    function draw() {        var time = new Date().getTime() * 0.002;      var x = Math.sin( time ) * 192 + 256;      var y = Math.cos( time * 0.9 ) * 192 + 256;      toggle = !toggle;        context.fillStyle = toggle ? 'rgb(200,200,20)' :  'rgb(20,20,200)';      context.beginPath();      context.arc( x, y, 10, 0, Math.PI * 2, true );      context.closePath();      context.fill();    }</code></pre>    <h2><strong>requestAnimationFrame API</strong></h2>    <pre>  <code class="language-javascript">window.requestAnimationFrame(function(/* time */ time){    // time ~= +new Date // the unix time  });  </code></pre>    <p>回调函数里的参数可以传入时间。</p>    <h2><strong>各种浏览器对requestAnimationFrame的支持情况</strong></h2>    <p>谷歌浏览器,火狐浏览器,IE10+都实现了这个函数,即使你的浏览器很古老,上面的对requestAnimationFrame封装也能让这个方法在IE8/9上不出错。</p>    <p><strong>参考文章:</strong></p>    <p>http://www.jb51.net/article/70678.htm</p>    <p>http://www.webhek.com/requestanimationframe/</p>    <p>http://www.cnblogs.com/kenkofox/p/3849067.html</p>    <p>http://blog.csdn.net/qingyafan/article/details/52335753</p>    <p> </p>    <p>来自:http://www.cnblogs.com/libin-1/p/6096067.html</p>    <p> </p>