Question

我正在使用RaphaelJS库测试SVG性能。我的代码有效，可在此处找到：JSFiddle

当您输入文本框＆＃34; 1＆＃34;然后按＆＃34;添加＆＃34;，将在屏幕上生成一个矩形，4个动画将在其上循环 - 向右，向下，向左，向上移动（也可以旋转，缩放和更改颜色）。

表现似乎没问题。但是在舞台上添加另一个元素，性能在3-4秒内降到最低。在Chrome时间轴中检查，堆积起来的东西是＆＃34;动画框架被解雇 - ＆gt;安装计时器＆＃34;。

也许我做错了循环？通过回调函数，当前一个动画结束时，Altough下一个动画开始。或者拉斐尔本身？我应该尝试使用SVG和SMIL吗？（拉斐尔使用VML）

有什么想法吗？

------------------------------------的更新 --- -----------------------------------

使用RaphaelJS我做了不好的动画循环挂钩，请参阅下面的答案。

但确实发生了另一个问题 - 添加1个元素10次，你可以看到动画如何变形，没有完成整个周期，或者1次添加10个元素，几秒钟后你可以看到一些元素的延迟动画。

我制作了SMIL版本JSFiddle（这里没有Raphael），动画不会滞后，延迟，但它们会同步。有谁能解释为什么？如何使这些动画不同步，但独一无二？

Answer 1

我认为问题是你在一个集合上递归调用动画。

因此，在每个动画结束时，集合中的每个元素都会再次调用该集合的动画，因此它会旋转并停止播放。你可以使用'this'而不是set'rectangles'来解决这个问题。

//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); });

jsfiddle

在动画2个或更多元素时，SVG性能下降，RaphaelJS

1 个答案: