Animation Raphaeljs动画杀死我的浏览器

我有一段代码，我用20条路径创建了一个字符，并将其放入一个集合中。 现在，当我设置动画集时，第一个转换运行平稳，第二个动画断断续续，第三个动画没有按应有的方式发生，第四个动画杀死了我的电脑，浏览器挂起，在任务管理器中，我可以看到它消耗了高达70%的CPU。我怎样才能避免这种情况并释放资源，使所有动画顺利运行

*我必须在那个角色上执行10个简单的y轴变换动画

---

您期望来自动画的回调的工作方式与实际不同

变量

字符

包含一组路径。Raphaël目前没有将这些映射到可以同时为所有儿童设置动画的组。这里的情况是，每条路径都分别设置了动画。实际上，每个这样的动画在完成时都会触发回调。这样，对于第一个动画，

chartrnsfrm1

，回调被触发20次。因此，您可以为整个角色安排第二个动画，

chartrnsfrm2

，20次。当您到达chartrnsfrm3时，您的回调将被触发20^3=8000次。安排这些动画会扼杀你的浏览器

我所做的是记住最后一个形状，并且仅当当前回调调用的元素（

this

）等于

lastShape

时，才安排整个角色的动画

var lastShape = shape;

//1st animation.. 
var chartrnsfrm = Raphael.animation({
    transform:'...t0,-48'        
},1000,"easeout",function(){
    if (lastShape == this)
        character.animate(chartrnsfrm1.delay(2000))
});
character.animate(chartrnsfrm.delay(2000));

---

您可以看到整个更新的小提琴，它启用了第四个动画，并且所有动画都运行平稳。

非常奇怪。。。如果您使用

setTimeout（）

而不是

animation.delay（）

，会发生这种情况吗？这里“我尝试使用setTimeout（），但仍然不能正常工作。我做对了吗？嗯。。。这似乎没有帮助。这个怎么样？当然，为什么链式动画失败的问题仍然有效。这是一个非常好的解决方案。谢谢。文档中没有足够明确地说明这一点，即使我在开始调试之前并不知道这一点。我将尝试更新文档。虽然我的fiddle不是一个理想的实现，但它是修复所提供代码的最简单方法。理想情况下，您不会首先使用所有这些回调，而是从其他地方安排动画。另外：我不知道调度是否正在终止您的浏览器，或者更确切地说是同时运行的动画。我没有费心去检查，因为两者都应该避免。谢谢你的解决方案和详细的解释。帮助很大。

var lastShape = shape;

//1st animation.. 
var chartrnsfrm = Raphael.animation({
    transform:'...t0,-48'        
},1000,"easeout",function(){
    if (lastShape == this)
        character.animate(chartrnsfrm1.delay(2000))
});
character.animate(chartrnsfrm.delay(2000));