問題タブ [requestanimationframe]

サイトのスクロール中にいくつかの要素を移動する視差サイトを構築しようとしています。しかし、私が使用しているスクロール イベント リスナーを使用する代わりに、ポールアイリッシュによるこの投稿と、スクロール リスナーは少しバグがあると述べたこのビデオrequestAnimationFrameを読んだ後です。私の質問は次のとおりです。

1. Chrome では非常に滑らかに見えますが、Firefox ではひどくちらつきます。ここで何か間違ったことをしましたか？
2. 私のコードは、実際に通常のスクロール イベント リスナーを使用するよりも多くのリソースを消費していますか? このコードで遊んでいるたびに、ラップトップのファンが燃えているのが聞こえます。

私のファイルはhttp://www.socialbuzz.com.au/index.htmlにあります。ページの一番下までスクロールして、JavaScript から操作されている要素を確認してください。

キャンバスのいくつかの基本的な機能を試して自動化するために、coffeescript クラスを使用しています。上記のコードはほとんどの場合問題なく動作しますが、requestanimationframe代わりにsetInterval.

ここに投稿されたポリフィルを使用したいと思います: https://gist.github.com/1579671

残念ながら、私はそれを取得していません。このクラスを書き直して、同じように機能し、requestanimationframe代わりに使用するにはどうすればよいでしょうか?

firefox で mozRequestAnimationFrame を呼び出そうとしていますが、エラーが発生し続けます。これが私のコードです：

obj.animFrame(a);次のエラー メッセージが表示され、エラーが発生します。

WrappedNative プロトタイプ オブジェクトに対する不正な操作

SO: requestAnimationFrame with this キーワードでこのスレッドを見つけた 後、おそらく requestanimationframe には正しい「この」コンテキストがなかったので、試してみました

それでも同じエラーメッセージが表示されます。では、なぜエラーが発生するのでしょうか。

私が行っているいくつかのプロジェクトでは、60fps はまったく必要ないと考えていました。そのフレームレートでスムーズに動作させることができれば、30 fps で動作するオブジェクトやものをもっと増やすことができると考えました。three.js 内で requestAnimationFrame shim を編集すれば、そのように 30 に制限できると考えました。しかし、提供されている three.js 自体を使用してこれを行うためのより良い方法があるかどうか疑問に思っていました。また、これにより、私が考えているようなパフォーマンスの向上が得られるでしょうか。30fps では 60 の 2 倍のオブジェクトをレンダリングできますか? 30 と 60 で実行することの違いはわかっていますが、スムーズに一定の 30 fps で実行することはできますか?

私は通常、WebGLRenderer を使用し、必要に応じて Canvas にフォールバックします。例外として、具体的に 1 つをターゲットにしているプロジェクト (通常は webgl シェーダー プロジェクト) を除きます。

そこで、Paul Irish の requestAnimationFrame を使用して、ページにサイドバーを「貼り付け」ます。少なくとも Webkit ブラウザーでは、これにより、ウェイポイントなどの他のソリューションよりもパフォーマンスが大幅に向上することがわかりました。ただし、Firefox では、ページのスクロールを開始すると CPU が屋根を通過し、これが原因でページが非常に遅くなることに気付きました。これを間違って実装していますか、それとも Firefox 用に別の方法を使用する必要がありますか?

どんな助けでも大歓迎です！また、これにアプローチする方法については、まったく異なるソリューションに対してオープンです（ただし、ウェイポイントはうまく機能するほどパフォーマンスが高くありませんでした）。

ウィンドウのサイズが変更されると、ウィンドウ全体を自動的に埋めるようにサイズが変更される Canvas があります。

キャンバスの 1 つの隅に、アニメーション化された 5 つのスプライトを描画しています。ここでは問題ありません。

これは完全な 60 fps で実行されますが、ウィンドウを最大化して画面いっぱいにすると、fps は 30 fps に低下し、30 fps から 60 fps の間で変動します。ウィンドウを再び小さくすると、一貫した 60 fps に戻ります。

すべてのアニメーションはキャンバスの 1 つの隅だけにあり、キャンバスの残りの部分は空白です。ティックごとにキャンバス全体を再描画するのは非常に非効率的であり、変更されている部分のみを再描画する必要があることを理解しています。

しかし、私の質問は - これは正常な動作ですか? 隅にあるいくつかのスプライトを除いて画面が空白であっても、画面全体を再描画すると、fps が 30 から 60 fps の間で変動しますか?

ブラウザ: Chrome 20 OS: OSX Lion コンピューター: Macbook Air

私はフィドルを含めました: http://jsfiddle.net/XQpzU/3561/

レンダリング ウィンドウを大きくすると、FPS が低下します。

私は単純なフレーム/秒のアニメーション ベンチマーク Javascript ユーティリティを作成しようとしています。FPS はおそらくここでは用語として使われませんが、理想的には、さまざまなアニメーション (CSS3/canvas/webgl) がブラウザーとデバイス間でどのように実行されているかをより正確に比較および測定できるようにするものです。（特定のコードをテストするだけのものではなく、ページに含まれていて、それ自体で実行できるJSライブラリです）

そして、このテーマに最適にアプローチする方法についてのアイデアを探しています。

たとえば、私は requestAnimationFrame が探しているものであることを望んでいます-私はそれについて少し読んでいますが、ブラウザが何かを再描画/アニメーション化できるようになるたびに呼び出されるようです? したがって、(アニメーションを実行しているときに) ブラウザーが頻繁に使用できない場合 (たとえば、空の実行の場合と同じように)、同じロジックにより、すぐに再度比較できるいくつかの数値が既にあります。

もちろん、問題は requestAnimationFrame が私が望むほど広くサポートされていないことです（特にモバイルでは）。setInterval を何らかの方法で使用できますか? 信頼性が低いことは理解していますが、それを有利に使用できる可能性があります.

ここでの唯一の問題は、そのメソッドがアニメーションだけでなく、任意の数の問題の測定値を返すことです。たとえば、ブラウザが DOM で何かを行っているなどの理由で間隔をスキップしていると想像できます。は単一プロセスの動物なので、DOM の変更もアニメーションに影響しますが、たとえば CSS3 アニメーションが GPU ハードウェアでアクセラレートされている場合でも、それは当てはまりますか?

現時点では理論にすぎません - したがって、どんなアイデアでも大歓迎です! ;-)

requestAnimationFrame を使用する JavaScript アニメーション ライブラリはありますか?

今日、私は新しい HTML5 が提供しなければならないもの、特に canvas について知りたがっています。www.html5canvastutorials.com というサイトにたどり着き、いくつかのチュートリアルに従って、さまざまなブラウザーでコードをいじり始めました。次の例にたどり着いたとき、Google chrome に奇妙な点があることに気付きました。http://www.html5canvastutorials.com/advanced/html5-canvas-oscillation-animation/

webkitRequestAnimationFrame 関数は、別のタブに移動するときなど、サイトでアクティブでないときに FPS (したがって CPU コスト) を削減するのに役立つはずです。しかし、この例を試してみると、必ずしも満足のいく結果が得られるとは限らないことに気付きました。

• アクティブなウィンドウとしての Google Chrome、現在のタブのサイト: 約 60 FPS を取得します。
• 別のタブのアクティブなウィンドウとしての Google Chrome: 約 1 FPS を取得します。非常に良好です。
• アクティブ ウィンドウとしての Google Chrome、テレビ (セカンド モニターとして使用)、120 FPS、奇妙ですが、不満はありません。
• Google Chrome はアクティブなウィンドウではなく、別のタブで、1 FPS 程度で完璧です。

悪い点: サイトが現在のタブにあり、別のウィンドウが Google Chrome ウィンドウを完全に覆っている場合 (たとえば、最大化されたウィンドウなど)、FPS は約 2500 まで上昇します (その結果、1 つの CPU コアが最大になります)。

Firefox で同じサイトを試してみると、すべて正常に動作します。

このフィドルは、最後の更新以降の平均 FPS を示す例です: http://jsfiddle.net/kmKZa/55/ (チュートリアル サイトからほとんどコードをコピーしました)

誰かアイデアがあれば、これらの恐ろしい CPU スパイクを防ぐ方法を知りたいです。アドバイスをよろしくお願いします！

キャンバスをレンダリングする関数は、次のようなクラスのプロトタイプ メソッドです。

このコードを直接実行しようとすると、正常に動作します。

Chrome または Firefox で requestAnimationFrame を使用して実行しようとすると、次のようになります。

実行されますが、常にエラーがスローされます。それはクールではない。

次のように実行しようとすると：

それは何もしません。

クロージャーを使用してこの問題を解決できましたが、そのような関数を requestAnimationFrame に渡すことができない理由を知りたいです。