当动画化2个或多个元素( RaphaelJS )时，SVG性能下降

Question

我正在使用RaphaelJS库测试SVG的性能。我的代码工作，可以在这里找到：JSFiddle

当您键入文本框"1“并按下”添加“时，将在屏幕上生成一个矩形，并在其上循环4个动画--移动的右、下、左、上(也是旋转、缩放和改变颜色)。

表演似乎没问题。但是在舞台上再加上一个元素，表演就会在3-4秒内降到最低。签入Chrome时间线，正在堆积的东西是“动画帧启动->安装计时器”。

也许我做的循环不对？通过回调函数，下一个动画在前一个动画结束时开始。还是拉斐尔自己？我应该试着用SVG和SMIL这样做吗？(Raphael使用VML)

有什么想法吗？

------------------------------------UPDATE

使用RaphaelJS，我做了糟糕的动画循环挂钩，见下面的答案。

但是另一个问题确实发生了--添加一个元素10次，您可以看到动画是如何被扭曲的，没有完成它们的整个周期，或者添加10个元素1次，几秒钟后，您可以在其中一些元素上看到延迟的动画。

我制作了SMIL版本的JSFiddle (这里没有拉斐尔)，动画不滞后，延迟，但它们得到同步。有人能解释原因吗？以及如何使这些动画不是同步的，而是独特的？

Answer 1

我认为问题在于，您正在递归地调用集合上的动画。

所以在每个动画的末尾，集合中的每一个元素都会再次调用一个动画，所以它会旋转并停止运转。您可以通过使用“this”而不是“矩形”来绕过这个问题。

//define 4 animations
var move_up = Raphael.animation({fill: "green", transform: "t0,0r360s1,1"}, 400, function(){ this.attr({"transform" : "t0,0"}); this.animate(move_right); });
var move_left = Raphael.animation({fill: "yellow", transform: "t0,100r270s0.5,0.5"}, 400, function(){ this.animate(move_up); });
var move_down = Raphael.animation({fill: "red", transform: "t100,100r180s1,1"}, 400, function(){ this.animate(move_left); });
var move_right = Raphael.animation({fill: "blue", transform: "t100,0r90s1.5,1.5"}, 400, function(){this.animate(move_down); });

小提琴