Question

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

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

JS Fiddle

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

Answer 1

您希望动画中的回调与实际操作的方式不同。

变量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));

你可以看到整个更新的小提琴here，它启用了第四个动画，所有动画都顺利运行。

Raphaeljs动画杀死了我的浏览器

1 个答案: