2012-02-11 6 views
0

の散布図をアニメーション化。は(ポイントは時間をかけて移動します)私はいくつかのデータの散布図をアニメーション化しようとしている(私はHTML5 ...に新たなんだので、小さな言葉を使う)</p> <p>をデータ

は今のところ、私は特定の座標とcontext.arc一連の()は、アニメーションの一つ「フレーム」を作成することができます。フレームのシーケンスを作成し、これらの間、いくつかの遅延で順次それらをプロットします

私の最初に考えたのは、アニメーションGIFと同様の戦略を使用することです。

これは実行可能なアプローチですか?もしそうなら、どのようにレンダリングを遅らせるべきですか?私の最初の読書は、本当の睡眠機能がないことを示しているので、私はこの戦略が悪いのだろうかと思っています。

(また、代わりに私の低レベルのコーディングの散布のためのHTML5のマークアップを作成するためのソフトウェアの任意のポイントは素晴らしいことだ)

おかげ

答えて

1

canvas要素はあなたがsetTimeoutを使用することができ、JavaScriptから満たされているので、 JavaScriptタイマーの詳細については、setInterval関数、see hereを参照してください。これにより、所定の時間が経過した後に各フレームを描画することができます。 SVGのようなオブジェクト指向の言語はおそらくより適切でしょう。だから要素を引っ張るのではなく要素を動かすことができます。 「HTML5と互換性がある」と宣伝しているほとんどのブラウザでは、それを適切にサポートする必要があります。

+0

これは私の考えでした。しかし、これは動作するようには思えない。 関数円(){ context.beginPath()。 } function frame1(){ 円(.1、.2); 円(.6、.7); } function frame2(){ 円(.3、.8); 円(.8、.2); } setTimeout( "frame1()"、3000); setTimeout( "frame2()"、3000); しかし フレーム1()。 frame2(); です。 – topepo

+0

@topepoこれは、 'setTimeout(frame1()...)'と 'setTimeout(frame2()...) 'が同時に呼び出されているためです。秒。アニメーションを50fpsで実行したい場合、2番目のフレームを3020ミリ秒に呼び出す遅延を変更してみてください。 – lpd

+0

ありがとうございます。私はクロムとそのデバッガを使用するのが良いセンスを持っていた。この問題は、setTimeout( "frame1()"、3000)を使用しているときに "Uncaught ReferenceError:frame1が定義されていません"と思われます。しかし、これをframe1()に置き換えると円が生成されるので、私は困惑します。 – topepo

関連する問題

 関連する問題