Raphael SVG动画在某些浏览器中不稳定

Question

我有一个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看到的关于波涛汹涌的动画的其他问题,我看到提到"进入胆量"为动画函数添加超时......(如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(视口在页面加载时进行缩放).

是否有可能如果我让设计师将图像调整为1000x1000画布并且我从一开始就以全尺寸显示我将会有所提升？也许是"更顺畅的骑行"？我不确定哪些因素会影响SVG动画和性能.

Answer 1

您应该查看 Element.animateWith ( http://raphaeljs.com/reference.html#Element.animateWith )。它具有一项功能，可让您将一个动画与另一个动画同步，以便所有内容都同步更新。如果浏览器或设备速度很慢，那么不稳定就无济于事，但同步动画应该会让它看起来更好。