一、setTimeout VS. requestAnimationFrame

傳統(tǒng)js動(dòng)畫實(shí)現(xiàn)一般使用setTimeout/setInterval等定時(shí)方式執(zhí)行一個(gè)動(dòng)畫更新操作，但這種方式在使用中存在一些問題。

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

2. 頁面不可見時(shí)繼續(xù)執(zhí)行，浪費(fèi)資源、電量

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

1. 瀏覽器自動(dòng)根據(jù)當(dāng)前顯示器刷新頻率來設(shè)置動(dòng)畫每幀的間隔時(shí)間interval。例如，顯示器是10ms，則interval就是10ms；如果是16.7ms，則interval自動(dòng)是16.7ms

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

二、使用requestAnimationFrame

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

    function renderFrame() { 
   
        // do something
    }

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

    // requestAnimationFrame
    var hanlder = requestAnimationFrame(renderFrame);

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

三、瀏覽器兼容性

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

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

如果想更保險(xiǎn)，可以參考Opera瀏覽器的技術(shù)師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。同時(shí)還支持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/

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。