問題タブ [requestanimationframe]

requestAnimationFrame現在、 （理想的には）60FPSで実行されるWebGLコンテンツをレンダリングしています。また、を使用してAIや物理などを処理する「更新」プロセスも同時にスケジュールしていsetTimeoutます。後者を使用するのは、オブジェクトを1秒間に約30回更新するだけでよく、実際には描画シーケンスの一部ではないためです。私のアニメーションのほとんどはかなりハードウェアを集中的に使用するため、実際のレンダリングパスのために残りのCPUを節約することは良い考えのように思えました。

私の質問はベストプラクティスの1つです。setTimeoutまたsetInterval、特にブラウザにフォーカスがない場合は、バッテリーの寿命やCPUの消費量に特に優しいわけではありません。一方、使用するrequestAnimationFrame（または更新を既存のレンダリングフェーズに直接結び付ける）と、厳密に必要な数よりもはるかに多くの更新が毎秒強制される可能性があり、ブラウザーにフォーカスがない場合やブラウザーが判断した場合は、更新が完全に停止する可能性があります。 「アニメーション」には不要です。

コンテンツをレンダリングせずに更新するための最善の行動は何ですか？

window.requestAnimFrame に問題があります。FF、Chrome と IE9、Opera では異なる方法で動作します。たとえば、このhttp://jsfiddle.net/vZP3u/2/ (requestAnimFrame に関する別の質問から引用)。FF 9.0.1 と Chrome 16.0.912.77 m で約 60 fps (30 になるはずです) を示しています。しかし、IE9 と Opera では問題なく動作します。これを修正する方法はありますか？

ターゲットの位置が変化するのに合わせて徐々に近づいていくスムーズなアニメーションを作成するにはどうすればよいですか?

この jsFiddle が示すようmoveTarget()に、アニメーションは新しいターゲット座標に向かって続行するのではなく、途中で停止またはブロックされます。

望ましい効果を達成するための理想的な実装/構造は何ですか?

実験以外で requestAnimationFrame を使用しても安全かどうか疑問に思っていますか? ベンダー プレフィックス (moz、ms など) がまだ必要だと思います。それをサポートしている最新のブラウザーはいくつありますか? そして、違いはどのくらいですか？FF が 62.5 - コールバック時間での fps キャッピングに問題があったことは知っています。

また、setInterval ループと比較した場合の requestAnimationFrame の使用の実際の違いは何ですか?

楽しみのために小さな HTML キャンバス ビジュアライザーを作成しましたが、Chrome ではひどく動作し、Firefox ではかなり動作が悪いことに気付きましたが、iPhone や iPad を含む Safari ではまったく驚くほど動作します!

誰でも理由を説明できますか？

コードはかなり単純である必要があると思いますが、基本的には、マウス (またはタッチ) の位置のポイントを描画してから、drawImage を使用してキャンバスを一時的なキャンバスにコピーしています。そこからディスプレイ キャンバスをクリアし、一時キャンバスをコピーして戻します (4 回)。ただし、回転、オフセット、透明度、スケールなどのいくつかを適用し (そしていくつかの異なる globalCompositeOperations をいじって)、すべて drawImage を使用します。したがって、drawImage は各ループで合計 5 回呼び出されます。

ここでデモを見ることができます: http://lakenen.com/vis.html

どんな洞察も大歓迎です！

PS。可能であれば、iPad でこれを試してください。マルチタッチでかなりきれいです:)

私のアプリケーションには、ウィンドウサイズに応じてCSSサイズ（htmlではなくCSS）が更新されるキャンバスがあります。

私はこのように見えるメインのgameplayLoopを持っています：

私のrequestAnimFrame関数はPaulIrishのものです：

つまり、基本的に問題は、requestAnimFrame呼び出しと有効な関数呼び出しの間の時間を測定するログに記録するタイマーが完全に変更されることです。ブラウザがフルスクリーンの場合は50/60ミリ秒になり、ウィンドウが小さい場合は10ミリ秒になります。

requestAnimFrame呼び出しは、60 fpsのリズム（30 msのようなものだと思います）で関数を常に呼び出すことになっているので、タイマーの作成とチェックの間に基本的に何も起こらないので、このような結果は得られないはずです。 requestAnimFrame

また、2/3秒ごとのように発生するマイクロフリーズ（1秒未満）が繰り返し発生します。ただし、タイマーは時間の変化を検出しません（javascriptのタイムカウンターもブロックされているように）

私のタイマー機能はこんな感じですが、ここでは関係ありません

10.7.1 を実行している Mac で Chrome を 17 から 18.0.1025.142 に更新したところ、サイトのパフォーマンスが低下しました。画面上で多数のアイテムを移動できる場合は、translate3d を使用しています。requestAnimationFrame でアニメーション化しています。17 では、フレームレートが 50 fps を超えていました。15fpsを取得できてラッキーです。それは本当に悪いです。

ハードウェア アクセラレーションはデフォルトでオフになっていますか? 他の誰かがこのような問題に気づきましたか? フォントのレンダリングが改善され、現在は Safari (サイトを美しく実行しています) と同等になっていることに気付きました。この変更は、一般的なレンダリング パフォーマンスに影響を与えたのでしょうか?

残念ながら、NDA のためリンクを共有することはできません。しかし、どんな助けでも大歓迎です！

アップデート：

私が知る限り、まだ GPU で高速化されていますが、パフォーマンスは非常に悪いです。他の人も同様のことを報告しています。v19 の Chromium ビルドは、以前の品質のパフォーマンスに戻っているようです。

chrome --show-composited-layer-borders を起動すると、gpu アクセラレーション要素の周りに赤い境界線を表示するフラグがありました。このオプションは chrome://flags/ に追加されたようですが、レイヤーの周りに緑の境界線を描画し、GPU 要素を区別していないようです。要素が GPU によってレンダリングされているかどうかを表示するオプションを知っている人はいますか?

chrome://gpu/ は、すべてがハードウェアアクセラレーションされていると言います...

キャンバスに画像をレンダリングするためのjqueryプラグインを書いています。

最終的な目標は、次のようなものを達成することです

プラグインが正しく動作するには、いくつかのクラス、ヘルパー、その他の jquery プラグインが必要です。

依存関係があるとしましょう

• マウスホイール jquery プラグイン
• jquery プラグインではなく、プロトタイプといくつかの列挙型を持つオブジェクトであるキャッシュ ライブラリ

グローバル変数 (または少なくともプラグイン レベル) を必要とするループであるアニメーション エンジンがあります。

そして、私は自分のようなオブジェクトを定義する必要があります

• 点
• 矩形
• ビューポート
• イメージソース
• アニメーション1

だから私の試みは次のようなものです:

だから私の質問は：

• このままでいいと思いますか？
• 私がそうすると、 ImageSource の定義はプラグインの外では利用できなくなります
• 代わりに配列を使用するために ImageSource オブジェクトを放棄する必要があるので、オブジェクト定義に問題はありません
• アニメーションなどのプラグイン内で定義されたグローバル変数のライフサイクルはどのようなものですか? いつでも利用できますか?
• アニメーションなどの変数を使用するのがベスト プラクティスですか、それとも .data jquery 関数を使用する方がよいのですが、この場合、変数を共有する方法はありますか?

助けてくれてありがとう

フレッド

使用するアニメーションの約50％をRaphael.jsに大きく依存する、かなりリソースを大量に消費するWebアプリケーションに取り組んでいます。残りは、webkitRequestAnimationFrameをWebAudioAPIのcontext.currentTimeと組み合わせて使用​​する独自のアニメーションメソッドを使用しています。アニメーションをオーディオコンポーネントと同期します。

現在、かなりひどいパフォーマンスを経験しており、Raphaelのソースを見ると、requestAnimationFrameも使用していることがわかります。私が経験しているラグのほとんどは、私のアニメーションとRaphaelの両方が同時に実行されているときに発生するようです。これは、requestAnimationFrameが基本的に描画サイクルごとに2回呼び出されているためですか？

基本的に私が求めているのは、基本的に、ラファエルオブジェクトのアニメーションの独自の実装を再ロールして、既存のrequestAnimationFrameに貼り付ける必要があるかどうかです。

クロムで requestAnimationFrame を使用して、ラファエルで単純なビューボックス アニメーションを実行しています。すべてのスクリプティングおよびレンダリング タスクが完了していることに気付きましたが、まだ 30 ～ 60 ミリ秒の「デッド スペース」があり、ブラウザが何もしていないように見えます。これについての洞察はありますか？