一、setTimeout VS. requestAnimationFrame

傳統js動畫實現一般使用setTimeout/setInterval等定時方式執行一個動畫更新操作，但這種方式在使用中存在一些問題。

1. 動畫幀間隔interval問題
   大部分顯示器的刷新頻率是16.7ms，如果setTimeout的interval小于這個值，就會出現繪制的幀無法在顯示器上展現的問題，好像被吞掉了一樣。
   另外，各個顯示器的刷新頻率不同，也使得一套代碼無法自適應不同頻率，難以對動畫效果最優化。

2. 頁面不可見時繼續執行，浪費資源、電量

而requestAnimationFrame則可以解決這些問題：

1. 瀏覽器自動根據當前顯示器刷新頻率來設置動畫每幀的間隔時間interval。例如，顯示器是10ms，則interval就是10ms；如果是16.7ms，則interval自動是16.7ms

2. 瀏覽器優化動畫繪制
   瀏覽器可以合并requestAnimationFrame的動畫操作、CSS動畫、CSS變換等各種動畫效果到一次渲染周期中完成。并且在頁面不可見時，可以選擇不進行動畫渲染的執行（似乎是暫停動畫），節約資源、電量。

二、使用requestAnimationFrame

代碼使用上，requestAnimationFrame和setTimeout很相似。

    function renderFrame() { 
   
        // do something
    }

    // setTimeout / setInterval
    var handler = setTimeout(renderFrame, 100);

    // requestAnimationFrame
    var hanlder = requestAnimationFrame(renderFrame);

從上面可以看出，兩者的差別在于是否指定interval的值。

三、瀏覽器兼容性

目前，有些低版本瀏覽器不支持requestAnimationFrame，這種情況下為了進行兼容，還是需要使用setTimeout/setInterval來實現動畫。另外，各廠商瀏覽器中requestFrameAnimation的名稱也有差別，所以可以使用下面的最簡單的方法，來進行兼容。

window.requestAnimFrame = (function() {
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

如果想更保險，可以參考Opera瀏覽器的技術師Erik M?ller的封裝

(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); }; }());

在這里，代碼判斷了是使用4ms還是16ms的延遲，來最佳匹配60fps。同時還支持cancel方法。

參考資料

1. https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
2. http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/

總結

以上是生活随笔為你收集整理的js动画效果_js动画函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。