requestAnimationFrame 之前不必要的延迟？

Question

一个有趣的案例，其中 IE 实际上运行是我想要的方式 :-) 我使这个函数通过 requestAnimationFrame 做 SVG 动画（对于这个例子我省略了值计算等......但是我的第一个实验是对 SVG 矩形的 'fill' 属性的变化进行动画处理）。无论如何，IE 运行的动画效果很好而且速度很快......但是所有其他浏览器在它们运行动画之前都有明显的延迟。几乎就像那些浏览器每次都需要 "spin up" 一个引擎来处理这个......我还看了一些其他在线示例，一些动画似乎 "choppy"。我想我可以使用 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 是正确的 :-) 好吧，至少我现在有一个超级酷的 web worker 启用了 RAF 动画功能。卫生部

requestAnimationFrame 之前不必要的延迟？

Unwanted delay before requestAnimationFrame?

javascript

css

animation

svg

requestanimationframe