1

20 パスを使用してキャラクターを作成し、それをセットに入れているこのコードがあります。セットをアニメーション化すると、最初の変換がスムーズに実行され、2 番目のアニメーションが途切れ、3 番目のアニメーションが正常に実行されず、4 番目のアニメーションで PC が強制終了され、ブラウザーがハングし、タスク マネージャーで消費されることがわかります。 CPU の最大 70%。これを回避してリソースを解放し、すべてのアニメーションがスムーズに実行されるようにするにはどうすればよいですか?

*そのキャラクターに対して 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したがって、キャラクター全体の 2 番目のアニメーション を 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));

ここで更新されたフィドル全体を確認できます。4番目のアニメーションが有効になっており、すべてがスムーズに実行されます。

于 2012-10-26T15:33:31.743 に答える