javascript - requestAnimationFrame 之前不必要的延迟？

Question

一个有趣的案例，IE 实际上以我想要的方式运行 :-) 我制作了这个函数来通过 requestAnimationFrame 执行 SVG 动画(对于这个例子，我省略了值计算等......但我的第一个实验是动画变化到 SVG 矩形的 'fill' 属性)。无论如何，IE 运行动画的速度很快……但是所有其他浏览器在运行动画之前都有明显的延迟。几乎就像那些浏览器每次都需要“启动”一个引擎来处理这个问题一样……我也在网上看了一些其他的例子，有些动画看起来很“断断续续”。我想我可以为 IE 使用 requestAnimationFrame，为其他浏览器使用 CSS3 关键帧 :-( 真的不想。我错过了什么吗？为什么在动画播放之前有延迟？

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

Answer 1

我的天哪。我错误地在测试矩形上留下了一个 css 过渡，这延迟了过渡。所以，Ben 是正确的 :-) 好吧，至少我现在有一个 super 酷的 web worker 启用了 RAF 动画功能。卫生部