2012-01-18 12 views
1

jsfiddle hereキャンバス

で複数のインスタンスをアニメーション私は仕事で今日退屈ので、私はちょうどいくつかのものを試してみて、自分自身を教えるためのキャンバスで何かを構築し始めています。私はこの部分に立ち往生し、壁に頭をむかつくのではなく、SOのコミュニティに手を差し伸べることに決めました。

基本的な考え方は、クリックをリッスンしてから、ユーザーがクリックしてより大きなサイズにアニメーション化してフェードアウトするランダムな色の円を作成することです。

クリックしてフェードアウトすると効果的です。この問題は、キャンバスに複数の円が同時に表示されている場合に発生します。私は私のアニメーションループをやっているので、これが起こっていると言うことができますが、私の人生では、より良いやり方を見つけることができません。

円を拡大/縮小するsetIntervalとは別のアニメーションループを使用する必要がありますか?もしそうなら、そのループは何をするべきですか?私は、実際のレンダリングからサークルの配置/拡大/フェードを分離する必要があるように感じます。

編集:私はこれが唯一のChromeで動作しているよう注意してくださいました(多分あまりにもSafariなど)

答えて

1

ソリューションは、あなたのsetIntervalコールバックは、すべてを再描画できるように、一つの場所にあなたの図面のすべてを統一することです。

それをチェックアウト: http://jsfiddle.net/ybcHk/7/

+0

おかげで、それはとてもうまくいきました。修正コードのいくつかの部分が私を少し混乱させていますが、私は大部分のことが起こっていると思います。ここでちょっと更新:http://jsfiddle.net/ybcHk/11/ – idrumgood

+1

更新されたバージョンは、いくつかのトリッピー、不思議の国のアリスのアリスです。私は私のバージョンにコメントを追加しました:http://jsfiddle.net/ybcHk/12/;それらが何か奇妙な点を説明するのを助けるかどうか見てください – ellisbben

+0

パーフェクト。私はそれのほとんどすべてを考え出した。私はCirclesNextでその部分を削除し、しばらくすると配列が大きくなりました。私はあなたがそうしたと思うので、誰かが約20分間演奏した場合(...私が持っているかもしれない)、それは記憶を殺すことはないでしょう。 – idrumgood