Question

My site：

jQuery Animation (`comsat.js`: `showPlayerActionView()`):   

if (container == cs_characterSliderPlayerOne){
    container.show("slide", {direction: "left"}, 500);
} else if (container == cs_characterSliderPlayerTwo){
    container.show("slide", {direction: "right"}, 500);
}

拉斐尔动画：

this.hover(function(event) {
                    cs_playerList[i].animate({
                        fill: HEX_HOVER_COLOR
                    }, 500);
                }, function(event) {
                    cs_playerList[i].animate({
                        fill: DEFAULT_HEX_COLOR
                    }, 500)
                });

因此，当另一个动画被禁用时，每个动画似乎都能完美平滑地运行，但是当两个动画都启用时，它们似乎会与另一个动画进行对抗，以便渲染最多次，从而导致速度变慢。有办法解决这个问题吗？要么告诉动画他们不需要每秒200帧渲染（猜测）并共享资源，以便其他东西看起来流畅？

当我使用任何CSS3过渡动画（未在网站上显示）时，会发生同样的减速。也许多线程会有所帮助？如何在JavaScript中做到这一点？

Answer 1

Raphael 2于2011年10月发布，对动画代码进行了一些更改：现在使用新的浏览器API“requestAnimationFrame”运行动画，旧版浏览器的回退速度大约为60FPS。

jQuery在1.6系列的早期采用了requestAnimationFrame，但是当各种jQuery用户报告他们的动画队列得到备份并导致可怕的追赶动画时窗口丢失并重新获得焦点时，它又被删除了。

动画应该与Raphael 2一起运行得更顺畅，但也许不像jQuery也使用requestAnimationFrame那样顺利

javascript：如果jQuery或CSS动画，Raphael会停止顺利运行？

1 个答案: