問題タブ [requestanimationframe]

requestAnimationFrmae を使用して作成したスクリプトがあります。

ペーストビンのコードはこちら

クロムでは美しく機能します。滑らかで完璧。ただし、FF、Opera、および Safari では、ひどくぎくしゃくしています。

ブラウザが requestAnimationFrame を処理でき、timeOut() に戻れない場合に機能するステートメントがあります。

誰か教えてくれませんか / なぜこれがそんなに貧弱なのか分かります / ぎくしゃくしています。そして、どうすればパフォーマンスを向上させることができるか。

ありがとう。

touchmoveでアニメーションを作成しようとしていますが、デバイスのハードウェアにどれだけ要求するかが心配なので、requestAnimationFrameを使用しようとしましたが、これが正しいかどうかわかりません。

感想いただけると嬉しいです(;_;

このデモを Firefox 19 で動作させようとしていますが、RequestAnimationFrame が正しく呼び出されていないようです。

http://受賞歴のあるfjords.com/projects/sequence/apple.html

他のすべてのブラウザーとバージョンは、FF19 (Mac) でのみ正常に動作します

以前にこの問題を抱えている人はいますか？

ありがとう

Web Audio APIを使用して、再生中のオーディオの視覚化を表示しています。<audio>再生を制御している要素があり、要素MediaElementSourceからノードを作成してWebAudioAPIに接続し<audio>ます。次に、aGainNodeとに接続されAnalyserNodeます。'sはに設定されますAnalyserNodesmoothingTimeConstant0.6。次に、GainNodeがに接続されますAudioContext.destination。

次に、オーディオ処理関数を呼び出しますonAudioProcess()。その関数は、以下を使用して継続的に自分自身を呼び出します。

この関数は、オーディオからのAnalyserNodetoを使用してから、（現在入力されている）をループし、要素の2Dコンテキストで各周波数の大きさを描画します。これはすべて正常に機能します。getByteFrequencyDataUint8Array<canvas>

私の問題は、<audio>要素を一時停止すると、onAudioProcess関数がループし続け（それ自体でアニメーションフレームを要求することにより）、CPUサイクルを不必要に消費することです。できますcancelAnimationFrame(audioAnimation)が、最後に描画された周波数がキャンバスに残ります。キャンバスの2Dコンテキストも呼び出すことで解決できますclearRectが、オーディオ処理ループを続行するだけの場合と比べると、非常に奇妙に見えます（これにより、各バーがキャンバスの下部にゆっくりと下がりますsmoothingTimeConstant）。

だから私がやったの<audio>は、アニメーションフレームをキャンセルする前に、が一時停止したときにタイムアウトを設定することでした。これを行うことで、オーディオが再生されていないときにCPUサイクルを節約でき、に描画された周波数バーのスムーズな低下を維持することができました<canvas>。

私の質問：アニメーションフレームをキャンセルするためのタイムアウトを適切に設定できるように、AnalyserNodeの値に基づいて、255の周波数の大きさが0（範囲は0〜255）に達するまでにかかるミリ秒数を正確に計算するにはどうすればよいですか？smoothingTimeConstant？

requestAnimationFrameおよび_cancelAnimationFrame

http://paulirish.com/2011/requestanimationframe-for-smart-animation/

およびここで提供されるさまざまなポリフィル:

https://gist.github.com/paulirish/1579671

これらの関数を使用するセマンティクスは、私には少しトリッキーです。具体的には、あなたがrequestAnimationFrame(callback)一度だとします。最初のコールバックが呼び出される前にもう一度呼び出す必要がありcancelAnimationFrameますか? requestAnimationFrame(callback)ブラウザはコールバックを繰り返し呼び出しますか? それとも、ブラウザは二重の呼び出しを単一の呼び出しに自動的に置き換えますか?

私の現在のアニメーションは Firefoxで非常に遅く、 requestAnimationFrame はあまり役に立っていないようです。しかし、私は複数のソースからそれを呼び出すのが早すぎるかもしれません. これに関する権威ある答えは素晴らしいでしょう。

requestAnimationFramed3 のデフォルトのアニメーションが既にコールバックに使用されているのか、それとも自分で行う必要があるのか​​を把握しようとしています。たとえば、再描画関数を繰り返し呼び出して、グラフ上のあるドメインから別のドメインへの遷移をアニメーション化するカスタム トゥイーンを定義しました (これは coffeescript にあります)。

再描画する他のすべての呼び出しでは、次のようにスケジュールしrequestAnimationFrameます。

ただし、ここで同じことをする必要があるかどうかは疑問です。私はd3ソースを見てきましたが、への唯一の参照がrequestAnimationFramed3タイマークラスにあることがわかりました。うまくいけば、d3 についてもう少し知識のある人が、次の質問に答えるのに役立ちます。

• d3 タイマーは、すべての d3 アニメーションとトランジションでグローバルに使用されていますか?
• requestAnimationFrameここで手動で使用する必要がありますか? そうでない場合、d3 の使用中に自分で使用する必要がある場合はありますか?

こんにちは、私のコンピューターの外にいる皆さん ;-) HTML 5 & JS & CSS を使ってゲームを自分で開発しようとしています。多くのチュートリアルで、メソッド「requestAnimationFrame」を見ました。「requestAnimationFrame」の仕組みをコピーして認識しようとしました。

ソースコード（fullJSCode）をいくつか示します。私の問題が何であるかを理解していただければ幸いです： http://pastebin.com/YXf7Nkwd

私のループは機能していません...私は（ "W"、 "A"、 "S"、 "D"）にキーをバインドして、長方形の正方形を移動します...しかし、私の正方形は動きません:(

誰でも私を助けてもらえますか？

敬具

http://jsfiddle.net/xwF6E/14/

上記は、作成しようとしているアニメーションの JSfiddle です。Chrome では 100% 正常に動作しますが、他のブラウザーではさまざまな問題が発生します。

Firefox ではアニメーションがレンダリングされないようです。Mozilla Dev Network のドキュメント @ https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrameに従って、クロス ブラウザ サポートを追加したと思いますが、おそらく何か間違ったことをしているのでしょう。

IE（少なくとも8 + 10）では、アニメーションも放射状グラデーションもレンダリングしません（誰かが助けることができる場合の副次的な問題でもあります）。

IE では、このコード行で IndexSizeError エラーが発生します

しかし、それが具体的に何を意味するのかわかりません。そのエラー/その方法についてはあまり見つかりません。

誰でも私を啓発できますか？

乾杯

Erik Möller による requestAnimationFrame ポリフィル (Paul Irish と Tino Zijdel による修正) を使用しています。

コードは次のとおりです。

だから私の質問はこの行についてです:

「要素」は何をしますか？

事前にどうもありがとうございました、

ジョアン