javascript - 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 显示在页面上(视口(viewport)在页面加载时进行缩放。

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

Answer 1

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