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之前的不需要的延迟？

回答

相关问题