問題タブ [requestanimationframe]

1 つの画像から始めて、画像をクリックするたびに循環させたい 3 つのアニメーションがあります。このスイッチを作成しました：

1 つの静的ステート + 3 つのアニメーション ステート。

私が持っているアニメーションでは、Paul Irish の requestAnimframe Polyfill を使用しています。

各アニメーションは基本的にこれと同じコードですが、画像が異なります。コードを直接テストすると機能しますが、スイッチにコピーすると機能しません。

複数の方法を使用してこれらをスイッチに接続しようとしましたが、何も機能しないようです。任意のヒント？ありがとうございました！

次のような app-object コンストラクターがあります。

それから私がするとき：

私は得る：

requestAnimationFrame が呼び出されると、ループ関数内の this-value が wi​​ndow に設定されるためです。

「theApp」オブジェクトを this-value として設定して requestAnimatinFrame を呼び出す方法を知っている人はいますか?

で遊んでいますrequestAnimationFrameが、Chrome 以外のブラウザでは非常にぎくしゃくしたアニメーションが表示されます。

次のようなオブジェクトを作成します。

現在、キャンバス要素に単一の長方形を描画して移動しています。これは、プロセッサ上での非常に軽量な操作です。これは Chrome で非常にスムーズに実行されており、デルタ値をコンソール ログに記録すると、約 17 前後でほぼ一貫しています。ただし、Firefox または Safari で同じことを行うと、次のデルタ値が得られます。

ブラウザがディスプレイとうまく同期していないように見えますが、Chrome 以外の場合は、ターゲット タイムアウトとして 16 ミリ秒の古い setTimeout メソッドを使用すると、よりスムーズなアニメーションが得られます。

requestAnimationFrameChrome 以外のブラウザを使用してよりスムーズなアニメーションを取得できるかどうかは誰にもわかりませんか? Firefox で上記に投稿されたものよりも安定したデルタ値を取得することに成功した人はいますか?

requestAnimationFrame複数のアニメーションを実行している場合、複数のコールバックを追加してもパフォーマンスは問題ありませんか? 例:

それとも、単一のコールバックを使用するよりも悪いことが証明されています:

舞台裏で何が起こっているのかよくわからないので質問していrequestAnimationFrameます。複数回呼び出すときにコールバックをキューに入れていますか?