1

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

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

JS小提琴

window.onload = function(){  
var paper = Raphael(0,0,400,400);

    var character = paper.set();
    paper.setStart();
    var attr = {fill:'red',stroke:'none'};  

    var shape = paper.rect(100,100,10,20).attr(attr);
    var shape = paper.rect(100,100,10,20).attr(attr);
    var shape = paper.rect(100,100,10,20).attr(attr);
    var shape = paper.rect(100,100,10,20).attr(attr);
    var shape = paper.rect(100,100,10,20).attr(attr);
    var shape = paper.rect(100,100,10,20).attr(attr);
    var shape = paper.rect(100,100,10,20).attr(attr);
    var shape = paper.rect(100,100,10,20).attr(attr);
    var shape = paper.rect(100,100,10,20).attr(attr);
    var shape = paper.rect(100,100,10,20).attr(attr);
    var shape = paper.rect(100,100,10,20).attr(attr);
    var shape = paper.rect(100,100,10,20).attr(attr);
    var shape = paper.rect(100,100,10,20).attr(attr);
    var shape = paper.rect(100,100,10,20).attr(attr);
    var shape = paper.rect(100,100,10,20).attr(attr);
    var shape = paper.rect(100,100,10,20).attr(attr);
    var shape = paper.rect(100,100,10,20).attr(attr);
    var shape = paper.rect(100,100,10,20).attr(attr);
    var shape = paper.rect(100,100,10,20).attr(attr);
    var shape = paper.rect(100,100,10,20).attr(attr);

    var character = paper.setFinish();
    character.transform("t0,200")



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


    //2nd animation..
    var chartrnsfrm1 = Raphael.animation({
        transform:'...t0,-48'        
    },1000,"easeout",function(){
        character.animate(chartrnsfrm2.delay(2000))
    });


    //3rd animation..
    var chartrnsfrm2 = Raphael.animation({
        transform:'...t0,-48'        
    },1000,"easeout",function(){
        character.animate(chartrnsfrm3.delay(2000))
    });


    //4th animation..
    var chartrnsfrm3 = Raphael.animation({
        transform:'...t0,-48'        
    },1000,"easeout");
}
4

1 回答 1

2

您期望动画中的回调以与实际不同的方式工作。

该变量character包含一组路径。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));

你可以在这里看到整个更新的小提琴，它启用了第四个动画并且它们都运行顺利。

于 2012-10-26T15:33:31.743 回答