問題タブ [requestanimationframe]

レンダラー domElement を plot_area という div 内に配置しました。

初期化子は次のとおりです (ほとんどが標準の Three.js)。

コントロールをまったく同じdivにアタッチしました。回転またはパンしようとすると (ただし、ズームは問題ありません)、div は完全に空白になります。ドキュメント全体をコントロールのスコープとして使用すると、すべてがうまく機能します。

グローバル名とローカル名の競合があった可能性がある (すべきではない) のではないかと思いましたが、すべてのinit*関数パラメーターの名前を変更しても問題は解決しませんでした。init*もう 1 つの推測は、返されるオブジェクトが実際には何にも関連しないように、ある種のコピー コンストラクターが返されるときに呼び出されるというものです。(はい、私は js の専門家ではありません)。フォーカスが合っていないときにリクエスト アニメーション フレームが機能しないという問題が発生した可能性があります。

いくつかの例:ドキュメント スコープのコントロール、div スコープのコントロール。

私が間違っていることに関する提案はありますか？

ブラウザーのネイティブ スクロールが無効になっている webapp を構築していますが、代わりに iScroll を使用しています。最新の Firefox で以下の問題が発生しました。

Firefox 23.0.1 を搭載した MacBook Air で 2 本指スクロールを使用すると、iScroll 4 はスクロール ジェスチャごとに 10 ピクセル未満しかスクロールしません。古い Firefox では、スクロールは Safari や Chrome と同様にスムーズで、スクロールの長さは数十ピクセルの長さでした。 . マウスホイールを回転させて通常のマウスを使用すると、スクロールは正常になります。

Macbook と firefox バージョン 23 を使用しているユーザーは、iScroll のデモ ページhttp://lab.cubiq.org/iscroll/examples/simple/でも問題をテストできます。

新しいバージョンのリリース ノートhttp://www.mozilla.org/en-US/firefox/23.0.1/releasenotes/には、「プレフィックスのない requestAnimationFrame を追加しました」と書かれています。

現在のブラウザに基づいて、css-transfomations などのベンダー (moz-、webkit-o- など) を決定する iScroll のコードから問題の解決策を見つけようとしました。残念ながら、私はそれで運がありませんでした。

Firefox をバージョン 23.0.1 に更新しました。その前に、問題はまったく発生せず、すべてが完全に機能していました。

誰かが問題についての予感や事実を持っているなら、私は感謝します!

乾杯、パイリー

私は Web Audio API を使用しており、メトロノームなどの繰り返しコールバックScriptProcessorのイベントです。onaudioprocess

同じアプリでオーディオの視覚化にノードを使用してみrequestAnimationFrameました。analyser

またはを使用して描画しようとすると、イベントが発生する速度がonaudioprocess半分に遅くなるようです。canvasrequestAnimationFramesetInterval

問題は、他のものがonaudioprocess速度を妨げるのは正常なことですか? または私は何か非常に間違っていますか？

それとも、canvas絵を描くことによって影響を受けていますか？私はRAFを使用してみて、インターバルを設定してコンソールにログを記録しましたが、何の影響もありませんでした。

私は小惑星をあからさまに食い物にしようとしていますが、深刻なメモリ管理の問題に直面しています。

私は window.requestAnimationFrame を使用して、「gameloop」関数に自分自身を引数として requestAnimationFrame を呼び出すことで、ゲームのフレームを提供しています。ただし、ゲームのメモリ使用量が膨大で、ガベージ コレクションが頻繁に発生し、パフォーマンスが低下するため (およびそれに関連する典型的なノコギリのメモリ使用パターン)、私は何か非常に間違ったことをしているに違いありません。この問題の理由は、関数とコールバックのこのループによって多くの関数オブジェクトが作成されていることだと確信しています。おそらく、再利用される代わりに関数が作成される無害なステートメントです...おそらくゲームループ関数. ..

この投稿からこのアイデアを得ました: https://www.scirra.com/blog/76/how-to-write-low-garbage-real-time-javascript

ここに私のコードを載せた jsfiddle があります: http://jsfiddle.net/LEqUr/ (新しい小惑星を表示するには、フォーカスのあるウィンドウでスペースを押してください)。私の作品のいくつかはキャメルケースであり、いくつかはアンダースコアで行われていることを知っています-申し訳ありません.

これが（私が思うに）コードの最も関連性の高い部分です：

以上のことを踏まえて、私のコードがどのように構成されているかについてのフィードバック（間違いなくいくつかの作業を使用する可能性があります）、コールバックに関する情報、クレイジーなネストされたコールバック内でオブジェクトがどのように/いつ作成されるかに関する情報、およびその他の役立つ情報を本当に求めていますあなたが持つかもしれないアドバイス。

ありがとう！

弧のパーセンテージのアニメーションを作成しようとしていますが、作成されているものが見栄えが悪いです。円弧にステップ*が表示されます。*アンチエイリアスの欠如

これを適切に行う方法を知りたいですか？

http://jsbin.com/AqaBAWA/1/

ご覧いただきありがとうございます。

Chrome for Android のアドレス バーのように機能するヘッダーを作成しています。その効果は、ヘッダーが疑似スティッキー ヘッダーであり、下にスクロールするとビューの外にスクロールし、次に上にスクロールし始めると、ヘッダーがスクロールしてビューに戻るということです。

現在、デスクトップ (約 60fps) では正常に動作しますが、Chrome for Android (Nexus 7 2013) ではジャンクがいっぱいです。

デモ: jsFiddle

ヘッダーとコンテンツ領域の両方が、pos:top よりもパフォーマンスの高い変換 translateY で移動されます。

また、 requestAnimationFrame を使用してスクロールをデバウンスし、ブラウザーにとって最も便利な場合にのみプロパティを変更しています。

ヘッダーはposition: fixed; top: 0;、 で表示および非表示にスクロールされtransform: translateY(...);ます。また、margin-top を使用してヘッダーの下からコンテンツを取得する代わりに、使用していますtransform: translateY(...);

私のjsの基本構造は次のようになります。

スクロールが終了した後 (およびコード化された後) 折り畳みを解決する必要があるため、効果は完全ではありませんが、ヘッダーへのスクロール移動ロックだけがジャンクを引き起こしている場合に問題を複雑にしたくありません。gpu が処理していてペイントすべきではないと想定しているトランスフォームを変更しているにもかかわらず、上下にスクロールするとペイント長方形が表示されます。

編集: ADB でデバッグすると、各フレームに明確な灰色の輪郭が描かれた時間がたくさんあるようです。

JavaScript パフォーマンス コンテスト用のテスト プラットフォームを構築しています。タスクの 1 つは、カンバス アニメーションの処理を担当する JavaScript コードを最適化することを競技者に課します。ソリューションが送信された後、サーバーはPhantomJSを使用してソリューションを実行し、アニメーションの 20 秒後に平均 FPS 数を読み取ります。問題は、最適化されたコードと最適化されていないコードの両方で 3 ～ 4 FPS が得られることです。これにより、コードが改善されたかどうかを判断できなくなります。

いくつかの事実:

• phanotmjs がアニメーションを正しくレンダリングしていることは 100% 確信しています (いくつかのスクリーンショットを作成しました)。
• ブラウザーでは、最適化されていないコードは 13 FPS で実行され、最適化されたコードは 58 FPS で実行されます
• phantomjsはサポートしていないため、ポリフィルrequestAnimationFrameを使用する必要がありました
• 以下のコードを使用して、FPS の数をテストしています。

frameCounter.js

私の質問は、キャンバスアニメーションのパフォーマンスをプログラムで測定するにはどうすればよいですか?

HTML 5 JavaScript ゲーム開発を始めたばかりで、requestAnimationFrame ポリフィルを使用する方が良いことを学びました。

関数は理解できますが、その背後にある数学は理解できません。

正確には：

私が理解していない数学の行は次のとおりです。

そのコード行がどのように機能するかについて、誰かが簡単な説明をしてくれると助かります。

メルビン・テフビジュルウ

Win32 プログラミングは初めてです。ブラウザのjavascripアニメーションに関する私の予備知識を持っています。requestAnimationFrameを使用することが重要であることはわかっていました。しかし、 GDI+で同様の関数が見つかりませんでした。win32 が同様のブラウザ API をすべて備えているとは期待できませんが、知りたいのですが、間違った方向を見ているのでしょうか?