アニメーションは初めてですが、最近 を使用してアニメーションを作成しましたsetTimeout。FPS が低すぎるため、このリンクrequestAnimationFrameで説明されている使用する解決策を見つけました。

これまでのところ、私のコードは次のとおりです。

これは最初のフレームで停止します。関数にコールバック関数requestAnimFrame(animloop);がありchopElementます。

また、この API を使用するためのより完全なガイドはありますか?

いくつかの変換を適用して、アニメーションGIFをキャンバスに表示したいと思います。テストするために、私は現在、アニメーションGIFをキャンバスに表示しようとしているだけなので、基本的にgifを通常の<img>タグとして表示するのと同じです。

Chromeとを使用してwebkitRequestAnimationFrameいます。リクエストフレームごとに、画像を描画します。gifフレームが変更された場合、これはキャンバスに反映されます。これは部分的にしか機能しません：

• キャンバスを見ているだけでは更新されません。代わりに、1つの静止フレームが描画され始めます。
• タブを再度選択すると（つまり、別のタブを選択してキャンバスタブを再度選択すると）、新しいフレームに更新されますが、その後は再びフリーズします。

これは私が設定したフィドルです：http：//jsfiddle.net/eGjak/93/。

実際にアニメーション化したアニメーションGIFをキャンバスに描画するにはどうすればよいですか？

編集:この質問は現在、歴史的な関心事のみです:

ベンダー プレフィックスとベンダー固有の動作が削除されたようです。

必要に応じて、古いベンダー固有の動作をエミュレートする方法について気軽に質問してください。

requestAnimationFrameChrome、Firefox、Internet Explorer、Operaでは、それぞれ異なる機能を持っている場合があります。

• webkitRequestAnimationFrame
• mozRequestAnimationFrame
• msRequestAnimationFrame
• oRequestAnimationFrame

仕様は、共有する必要がある動作について非常に明確ですが、どのように異なるかについて信頼できる回答を持っている人はいますか?

編集：当分の間、私は自分の答えを受け入れています。私はまだ IE 10 の実装の詳細に興味があり、Opera がそれを実装する必要がある場合は Opera のものです。大きな違いがある場合は、質問を更新します。

なぜ地獄window.requestAnimationFrameが 2 番目のパラメーターを要素として受け入れているのかを理解しようとしていますが、その背後にある理由は何ですか?

この関数の根底にある実行を知りたい....

一部のブラウザはをサポートrequestAnimationFrameしているので、それを使用してみませんか？結局のところ、それはグーグルクローム10以来サポートされています。それにもかかわらず、jQueryはそれを使用していないようです。それについてのバグレポートを見つけましたが、本当の説明はありませんでしたか？ただし、jQueryの人々には理由があると確信しています。

なぜ彼らはこの素晴らしいAPIを使用しないのでしょうか？

I'm wondering if I should switch my game over to requestAnimationFrame. If there even is still a reason to do so anymore, as I've read that setTimeout() now also pauses when you switch tabs in the major browsers.

Anyway, say I want to control the FPS of my animation.

Currently I can do it like this:

Where k.settings.engine.fps is the wanted fps.

If I do it the requestAnimationFrame way, I lose that possibility, and it'll just give me whatever it can give:

I have seen some people suggest to place the requestAnimFrame in another loop:

So... What should I go with? Leave it as it is?

What are the exact benefits of requestAnimationFrame, now that setTimeout is also paused when switching tabs?

キャンバス ゲーム アプリケーションの FPS を計算するにはどうすればよいですか? いくつかの例を見てきましたが、それらのどれも requestAnimationFrame を使用しておらず、そこにソリューションを適用する方法がわかりません。これは私のコードです:

ところで、パフォーマンスを監視するために追加できるライブラリはありますか?

次のコードで 0.002 を掛ける特別な目的はありますか?

このコードの抜粋はhereから取得されました。以下のコード全体も提供しました。

[answered]

HTML5 ゲームのブラウザの fps をテストしています。
私はこのコードを持っています:

Chrome で次のエラーが発生します:
Uncaught Error: TYPE_MISMATCH_ERR: DOM Exception 17
行番号 27:requestAnimationFrame( step );

W3 は、このエラーは次If the type of an object is incompatible with the expected type of the parameter associated to the object.
のように述べています。window

しかし、割り当てられた無名関数の呼び出し括弧を削除しstep、代わりにその関数を宣言し、新しい行に次のように記述した場合:
step();

できます。
どうしてこれなの？
どちらも同じように機能するべきではありませんか？

Chromeでいくつかのテストを行ったところ、requestAnimationFrame61 fpsがsetTimeOut( callback, 0 )得られましたが、233fpsが得られました。
61 fpsを超えたい場合（これは何のためにあるのかわかりません）、setTimeOutでレンダリングし、requestAnimationFrameを使用してウィンドウがフォーカスを失ったことを検出し、フォーカスが来るまでタイムアウトを停止する方がよいでしょう。戻り値？

そして副次的な質問：requestAnimationFrameがコールバックを呼び出さない以外に、ウィンドウがフォーカスを失ったことを検出する別の方法はありますか？