requestAnimationFrame之前的不需要的延遲？

一個有趣的情況，其中IE實際上運行我想要的方式:-)我做了這個函數來通過requestAnimationFrame做SVG動畫（對於這個例子我省略了值計算，等等......但我的第一個實驗是動畫變化SVG rect的'fill'屬性）。無論如何，IE瀏覽器運行的動畫不錯，速度快......但所有其他瀏覽器在運行動畫之前都有明顯的延遲。幾乎就像那些瀏覽器需要「啓動」一個引擎來處理這個每次...我也看了一些其他在線的例子，一些動畫看起來「波濤洶涌」。我想我可以使用requestAnimationFrame的IE瀏覽器和CSS3關鍵幀的其他瀏覽器:-(真的不想要。我缺少的東西？爲什麼動畫之前延遲播放？requestAnimationFrame之前的不需要的延遲？

animateViaRequestAnimationFrame = function() { // 

    var duration = arguments[0].duration; 

    // requestAnimationFrame is ~60 frames/second 
    var quantityFrameCalls = parseInt((duration/1000)*60); 

    i = 1; 
    function callFrame(){ 

     // here, bunch of values math and updating the target element properties 

     i++; 
     if (i < quantityFrameCalls+1) { 
      requestAnimationFrame(function(){ 
       callFrame();  
      }); 
     } // if 

    } // callFrame 

    requestAnimationFrame(function(){ 
     callFrame();  
    }); 

}; // animateViaRequestAnimationFrame

來源

2017-06-20 Ted Fitzpatrick

哎呀，謝謝Ben，yeah callFrame函數的開頭不會有幫助:-)我確實有一些循環來轉換十六進制值，但我不認爲這些是因爲他們console.log瞬間減速然後延遲播放動畫。我想我只是想知道是否有一些魔術mojo在IE瀏覽器以外的瀏覽器中使用requestAnimationFrame –

只是一個非常簡單的提示，當你做'requestAnimationFrame（function（）{callFrame（）;}）;'你實際上可以只是請'requestAnimationFrame（callFrame）;' –

謝謝帕特里克是的，我也嘗試過這種方式。 –

OMG，通過錯，我在測試矩陣上留下了一個css過渡，從而推遲了過渡。所以，Ben是正確的:-)至少我現在有一個超酷的網絡工作者啓用了RAF動畫功能。 DOH

來源

2017-06-23 16:01:01

requestAnimationFrame之前的不需要的延遲？

回答

相關問題