4

徐々に増加して円に変わる円弧を描いています.アニメーションの完了時(円弧が円に変わる)、前の円が持続し、2番目のアニメーションが継続する、半径が大きくなった別の円を描きたいです。

円弧から円へのフィドル

円が描かれた後、それは私が望んでいないものであり、2番目のアニメーションを続けます。完了後に不要なアニメーションが表示されます。

私は何をすべきか？

マイコード:

    setInterval(function(){
        context.save();
        context.clearRect(0,0,500,400);
        context.beginPath();
        increase_end_angle=increase_end_angle+11/500;
        dynamic_end_angle=end_angle+increase_end_angle;
        context.arc(x,y,radius,start_angle,dynamic_end_angle,false);
        context.lineWidth=6;
        context.lineCap = "round";
        context.stroke();
        context.restore();
           if(dynamic_end_angle>3.5*Math.PI){  //condition for if circle completion
                draw(radius+10);//draw from same origin and increasd radius
           }
    },66);

window.onload=draw(30);

更新:CPUサイクルを節約するためにいつ間隔をクリアする必要がありますか?また、3番目の円でアニメーションが遅くなるのはなぜですか??

4

3 に答える 3

4

コードのこのスニペットにはいくつかの欠陥があります。

if(dynamic_end_angle>3.5*Math.PI){  //condition for if circle completion
    draw(radius+10);//draw from same origin and increased radius
}

の再帰呼び出しdraw()は、最初の円が完全に描画された後も引き続き実行されます。これが、パフォーマンスがすぐに低下する理由です。何らかの方法でブロックする必要があります。

簡単な修正を行いました。必要に応じて磨いてください。フィドルのデモ

context.clearRect(0, 0, 500, 400);私の修正は、新しい円の描画ロジックを削除して次のように変更することです。

if (dynamic_end_angle > 3.5 * Math.PI) { //condition for if circle completion
    increase_end_angle = 0; // this will prevent the draw() from triggering multiple times.
    draw(radius + 10); //draw from same origin.
}

このスタックオーバーフロースレッドでは、よりスムーズにする方法について言及しています。最適化には多くの作業が必要になるため、何らかの描画フレームワークを使用することをお勧めします。

于 2013-07-29T18:04:09.080 に答える