問題タブ [requestanimationframe]

ビューポート内要素の背景色を変更したい ( を使用overflow: scroll)

これが私の最初の試みでした： http://jsfiddle.net/2YeZG/

ご覧のとおり、新しい色がペイントされる前に、前の色の短いちらつきがあります。他の人も同様の問題を抱えています。

HTML5 rocks instructions に従って、requestAnimationFrameこの問題を解決するために紹介しようとしましたが、役に立ちませんでした。

http://jsfiddle.net/RETbF/

ここで何が間違っていますか？

同じ問題を示す簡単な例を次に示します: http://jsfiddle.net/HJ9ng/

ここで Chromium のバグを報告: http://code.google.com/p/chromium/issues/detail?id=151880

次のjsFiddleをセットアップしましたhttp://jsfiddle.net/ZbhQY/4/

私は小さな requestAnimationFrame ポリフィルを使用し、結果を window.reqeuestAnimFrame に返します。これはすべて正常に機能し、この関数へのすべての呼び出しは期待どおりに機能します。

これを変更して game.reqeuestAnimFrame に戻し、window.reqeuestAnimFrame へのすべての呼び出しを新しい game.reqeuestAnimFrame に置き換えると、機能しなくなります。

なぜこれが当てはまるのか、これを機能させるために何ができるのかを誰かが説明してもらえますか? ありがとう。

「threejs - クラウドの例」( http://mrdoob.com/lab/javascript/webgl/clouds/ ) に触発されて、Web サイトの背景用に webgl アニメーションを作成しようとしています。私のコンピュータでは、かなりうまくいっているように見えます... しかし、一部の PC では非常に遅いです。

コードをさらに最適化し、グラフィック カードが webgl をサポートしていないかどうかを検出する方法はありますか?

私のアニメーション (背景) : http://wabeo.fr/?theme=auriga-7

私のコード:

ご協力いただきありがとうございます ：-）

http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animationingから次の RequestAnimationframe 関数を取得しました

私はそれを使用しようとしています。しかし、それを呼び出す方法と使用する方法がわかりません。誰かが私に簡単な例を教えてもらえますか。私はこのhtml5アニメーションのことは初めてなので、理解できます..

どんな助けでも本当に感謝します！機能は以下の..

WebGLでBox2Dを使用しています。Box2D は、一定のフレーム レート (「ワールド」更新のタイム ステップ) を要求します。

しかし、以下のように定義された requestAnimFrame が正しい方法であることを読みました。

requestAnimFrame では一定のフレーム レートが得られないため、Box2D の変数が非同期になります。

これに対する修正はありますか？

[編集]

John (Cutch) のソリューションを実装すると、次のようになります。

next_attribue私の物理更新関数はs が設定されていることに注意してください。また、updateこの前に物理演算が呼び出され、物理演算の世界を 1 フレーム先に進めます。

結果

アニメーションは非常にスムーズですが、非常に悪いジャンプとランダムに現れる微動が見られる場合を除きます。

このソリューションでは、次の問題が解決されていないと思いました。

----> 1) dtより大きくなる可能性がありtime_stepます : これによりdt/time_step1 より大きくなり、補間式が台無しになります。

一貫しdtてより大きいままである場合、問題が増加します。time_stepタイムギャップが よりも大きくなるという問題を克服することは可能time_stepですか?

つまり、世界をレンダリングの 1 フレーム先に維持したとしても、時間のギャップが一貫して より大きいままであれば、time_stepその「先の」フレームを通過するのに長い時間はかからないでしょう。

----> 2) 1 ミリ秒dt未満であると 想像してください。time_stepすると、世界は一度も更新されません。これで補間が行われ、おおよその位置が見つかりました (あるべき場所から 1 ミリ秒遅れています)。

次回は と の間dtに違いが見られないとしましょうtime_step。

dt現在、とtime_stepが等しいことを考慮して、補間は行われません。では、次に描画されるのは、世界の「前方」フレームですよね?(これらの方程式を使用して、 でt = 1)

しかし、正確には、レンダリングされた世界は、以前よりも 1 ミリ秒遅れているはずです。つまり、ワールド フレームから 1ms 遅れていたということは、消えてはならないということです。しかし、t = 1では、物理ワールド フレームを描画し、その 1ms を忘れます。

私はコードまたは上記の2点について間違っていますか?

これらの問題を明確にしていただきたい。

[編集]

このWeb ページの作成者に、多くの図形を効率的に描画する方法をコメントで尋ねました。

私はこの方法でそれを行うことを学びました: 私は bufferData呼び出しをcreateBuffer節約bindBufferしていbufferDataます。

画面を更新するたびに、すべての形状を反復処理する必要があり、必要な形状のバッファーをバインドした後に呼び出す必要があります (を使用enableVertexAttribArray) 。vertexAttribPointerbindBuffer

私の形は時間とともに変化しません。最初から最後までさまざまな形 (多角形、円、三角形など) があります。

CSSトランジションを開始するためにアニメーションフレームをリクエストすることは意味がありますか？

たとえば、Mozilla CSSトランジションページには、次のjsfiddleの例へのリンクが含まれています。

CSS：

JavaScript：

この例を次のように書き直すのは意味がありますか？（このjsfiddleを参照してください）

JavaScript：

答えてくれてありがとう。

ブラウザー ウィンドウをドッキングするか、タブを切り替えるたびに、requestAnimationFrame の呼び出しが停止することに気付きました (これは起こると予想されます)。

この停止がいつ発生したかを検出する方法はありますか?

理由は、ゲームでタイマーを実行しているためです。requestAnimationFrame がレンダリングされなくなったときにタイマーを停止したい。

「window.blur」イベントと「window.focus」イベントを調べましたが、これらは requestAnimationFrame が停止および開始するタイミングとは関係ありません (たとえば、ブラウザー ウィンドウの外側をクリックすると、window.blur イベントが発生しますが、requestAnimationFrame は保持されます)。ランニング）。

requestAnimationFrame の開始時と停止時にサブスクライブしたい。方法を知っていますか？

iPad の Safari で奇妙な状況に遭遇しています。「ピンポン」方式で再生できるスプライトシート ベースのアニメーション シーケンスがあります。1 回クリックすると、最後のフレームまで順方向に再生され、クリックして戻ると、フレーム 1 に到達するまで逆方向に再生されます。

そのために使用するJSは次のようになります。

これはすべてのデスクトップ ブラウザーで完全に正常に動作しますが、iPad の Safari はアニメーション フレームの要求を停止しません。アニメーションは、画像が (マージンを介して) 長くなくなるまで "オーバーフロー" しますが、番号またはrequestAnimationFrame通話をログに記録すると (Iポール・アイリッシュ・シムを使用しています-それでも、使用しても違いはありませんwebkitRequestAnimationFrame）iOSで再帰呼び出しが停止しないことがわかりpingpongます（デスクトップでは停止します）。cancelAnimationFrameまた、id私の呼び出しを試みても違いはありません。

私の理解にrequestAnimationFrame欠陥がありますか、それともここで何か違うものを見逃していますか? new Date().getTime()iPadでの動作に違いはありますか? 私は現在、setIntervalベースのソリューションを使用していますが、この動作に本当に完全に嘲笑されているので、誰かがここで間違っているのではないかと思いましたか?

私はHTML5Rocksに関する記事を読んでいて、Webページをスクロールし、DOM要素offsetTopの配列をチェックしてそれらが表示されるかどうかを確認する例を示しました。

この記事によると、これを行うためのベストプラクティスの方法は、スクロールイベントが発生するたびに、ウィンドウの現在のオフセットトップで変数を更新することです。最初のスクロールイベントが発生すると、DOM要素のoffsetTopをチェックするrequestAnimationFrameプロセスがトリガーされます。これにより、可視性ロジックがスクロールイベントから切り離されます。

これら2つのプロセスを確実に分離することの利点は理解していますが（スクロールイベントは1秒間に数百回呼び出される可能性があるため）、最初のスクロールイベントの16ミリ秒ごとに可視性ロジックを実行することの利点はわかりません。ユーザーが移動を続けているかどうか。

誰かが私がここで欠けているプロセスのどの部分を説明できますか？

http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precisionは、最近 (Chrome 20) requestAnimationFrame が新しいミリ秒未満の精度のタイマーを取得したことを教えてくれます。それをサポートするためにコードを更新します。

さまざまなポリフィルを見回すと、それらはすべてこの更新よりも前のもののようです。それらは何らかの形で機能していますか (私はそうは思いません)、それとも単に最新のものが利用できないのでしょうか? タイミングは自分でやろうかな(ちょっともったいない)。