拉斐尔SVG动画在某些浏览器中时断时续
我有一个SVG对象，我正在使用Raphael将其添加到我的页面中。在6个集合中大约有175条路径，我怀疑它是复杂的。
我正在使用.animate函数对6组中的每一组进行动画处理
function anim(direction, duration){
return Raphael.animation({transform: "r"+direction+"360 250 250"}, duration).repeat("Infinity");
}
IG.sets.white_outer.animate(anim("",100000)); // 2 paths
IG.sets.grey_outer.animate(anim("-",100000)); // 25 paths
IG.sets.grey_inner.animate(anim("",100000)); // 25 paths
$(window).load(function(){
IG.sets.BLUE.animate({transform: "r0 250 250"}, 4000, ">"); // 32 paths
IG.sets.RED.animate({transform: "r0 250 250"}, 3000, ">"); // 29 paths
IG.sets.GREEN.animate({transform: "r0 250 250"}, 2000, ">"); // 24 paths
}问题是，在某些浏览器中，这看起来非常不稳定。
它在Mac上像黄油一样平滑(测试过: FF，Chrome，Safari)。它在Chrome的Windows上也很可爱，但当我加载windows FF、Safari或IE8时，动画效果不稳定，而且有点卡顿。
它甚至在iPad上看起来都很棒！
我很乐意让它们看起来都很棒...所以我试图找出是什么在FF和Safari中耗费了所有的能量(最终，希望我管理的任何覆盖都能为IE8带来一个修复)。
从我在拉斐尔上看到的其他关于断断续续的动画的问题中，我看到了“进入内脏”来为动画功能添加超时……(如raphael-min.js中所示)
cz= window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
function(a){setTimeout(a,16)}, /* there is a function here that animates */例如，尽管在FF中看起来像是RequestAnimationFrame，但它的性能比setTimeout更流畅。(我通过删除mozRequestAnimationFrame条件并重新加载来测试这一点，尝试了不同的超时间隔)
有没有其他我可能遗漏的东西，可能有助于提高我的动画的跨浏览器帧率？
注意，例如，图像是默认的500x500，并且围绕图像中心(250x250点)进行旋转，但是图像在页面上以1000x1000显示(在页面加载时使用viewport进行缩放。
有没有可能，如果我让设计师将图像调整到1000x1000的画布上，并且我从一开始就以全尺寸显示，我会有一个提升吗？也许是“更顺畅的旅程”？我不确定哪些因素会影响SVG动画和性能。
回答 1
Stack Overflow用户
发布于 2013-04-07 08:41:31
您应该研究一下Element.animateWith (http://raphaeljs.com/reference.html#Element.animateWith)。它有一个功能，可以让你同步一个动画与另一个动画，以便一切都在锁定步骤中更新。如果浏览器或设备速度很慢，这种波动性是无能为力的，但同步动画应该会让它看起来更好。
https://stackoverflow.com/questions/12665007
复制相似问题