一些浏览器下，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）。在Windows的Chrome中也很好看，但当我在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 */

尽管在Firefox中，RequestAnimationFrame比setTimeout表现更平滑（我通过删除mozRequestAnimationFrame条件并重新加载，尝试了各种timeout间隔进行了测试），但这并非万无一失。是否还有其他可改进跨浏览器动画帧率的方法？例如，请注意图像默认为500x500，旋转围绕图像中心（点250x250），但图像显示在页面上的大小为1000x1000（视口在页面加载时进行缩放）。如果将设计师调整图像大小到1000x1000的画布上，并从一开始就以全尺寸显示，是否可能会提高性能？也许可以实现更“平滑”的效果？我不确定哪些因素会影响SVG动画和性能。

- Alex C

---

我怀疑你很难快速修补Raphael。除非你绕过动画引擎。http://jsfiddle.net/qSZ75/ 在Windows上对你来说是否更好？ - methodofaction

看到一个合适的回答会很好，解释一下 Raphael 2 动画引擎在某些情况下在某些浏览器中导致卡顿的原因，并大概说一下何时更好地自己开发动画引擎。我有这样一种印象，即 Raphael 在某些浏览器中动画多个路径同时进行时存在问题，由于每个路径都有自己的线程，而 @Duopixel 建议的方法涉及为每个动画路径或形状类型的每个帧调用一次，但我可能错了。 - user56reinstatemonica8

@user568458 说实话，在这件事上我和你一样知之甚少。如果你不需要支持旧版IE，D3在动画方面会更高效一些，参见https://dev59.com/QV3Va4cB1Zd3GeqPBYud。希望能有更深入了解Raphael内部工作的人解答这个问题。 - methodofaction

@Duopixel - 很遗憾，我确实需要IE支持。据我所知，Raphael在SVG模式下和D3基本上是等效的 - 两者都使用Javascript控制SVG形状，并且理论上，SVG中的任何内容都可以被重写为SVG模式Raphael的补丁。您是否了解Raphael动画SVG的方法与D3动画SVG的方法有何不同？（我不介意使用经过修补的Raphael版本，在<= IE8的VML上提供笨拙、断断续续但功能性动画，并为其他所有内容提供流畅、平滑的动画 - 困在旧版IE上的人现在必须习惯使用更丑陋的网络） - user56reinstatemonica8

你是否也向Rafael团队提出了这个问题？（http://groups.google.com/group/raphaeljs，irc.freenode.net上的#raphael.js，或在https://github.com/DmitryBaranovskiy/raphael上提交问题）。如果他们回答了一个值得在这里列出的答案，那就更好了。 - Mike 'Pomax' Kamermans

Answer 1

您应该查看Element.animateWith (http://raphaeljs.com/reference.html#Element.animateWith)。它具有一种功能，可以让您将一个动画与另一个动画同步，以便所有内容都可以同步更新。如果浏览器或设备很慢，则无法解决卡顿问题，但是同步动画应该可以使其看起来更好。

- r2jitu