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

Posted 2023-03-06

【中文标题】Raphael SVG 动画在某些浏览器中不稳定

【英文标题】：Raphael SVG animations choppy in some browsers

【发布时间】：2012-09-21 19:32:24

【问题描述】：

我有一个 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 动画和性能。

【问题讨论】：

我怀疑你会在修补 Raphael 时获得快速点击。也许如果你绕过动画引擎。 jsfiddle.net/qSZ75 这在 Windows 上更适合您吗？

@Duopixel 这看起来真的很有趣，您能否添加一个答案来解释您在实现您自己的动画引擎时所做的基本工作，该引擎固定为每 2 毫秒 (？) 的帧以及为什么它会有所帮助？跨度>

很高兴看到对此的正确答案 - 解释 Raphael 2 动画引擎在某些情况下会导致在某些浏览器中出现卡顿的原因，以及大致在什么情况下最好滚动你自己。我的印象是 Raphael 在某些浏览器中无法同时为多个路径设置动画，因为每个路径都有自己的线程，我认为@Duopixel 建议的方法涉及为每个动画路径或类型的形状的每个帧调用一次，但是我很可能是错的。

@user568458 说实话，我对这件事的了解和你一样多。如果您不需要旧的 IE 支持，D3 的动画性能会更好***.com/questions/8239235/…。让我们希望对拉斐尔内部运作有更深入了解的人能够回答这个问题。

您是否也向 Rafael 小组提出了这个问题？ （groups.google.com/group/raphaeljs，irc.freenode.net 上的#raphael.js，或在github.com/DmitryBaranovskiy/raphael 上提交问题）如果他们回来的答案也值得在这里列出。

【参考方案1】：

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