問題タブ [requestanimationframe]

requestAnimationFrameを使用して視差スクロールを行うサイトを構築しています。複数のセクションがあり、それぞれにフルサイズの背景画像といくつかの中景および前景画像があります。requestAnimationFrameを使用して、これを比較的スムーズにアニメーション化することができましたが、アニメーションにはまだ時折ジッターがあります。

Chromeのタイムラインをフレームモードで見ると、「ジャンク」の原因となっているプロセスに「画像デコード」というラベルが付いていることがわかります。さらに、アニメーションが1回完了すると、ジャンクは再発しません。

現在、ほとんどのブラウザは、まだ表示されていない画像のデコードを延期しているようです。画像をユーザーに表示せずに（プリロードするだけでなく）プリデコードする方法はありますか？

Windows 8の読み込みアニメーションに基づいて、単純な小さなスピナーウィジェットを作成しましたが、各ドットがわずかにジッターしているように見える理由を理解できませんでした。値を正規化するためにさまざまなことを試しましたが、それを滑らかにするものは見つかりませんでした。

http://jsbin.com/ilafov/16

私は何が間違っているのですか？

ほんの少し前に発見requestAnimationFrameしたので、私はそれについて見つけることができるすべての情報に飛び込みました。それについてもっと情報を探している他の人がいる場合に備えて、私が出くわしたリソースのほんの一部を挙げます。

• http://creativejs.com/resources/requestanimationframe/-それについての基本を説明します。
• http://www.html5rocks.com/en/tutorials/speed/animations/-使用方法を説明しています。

とにかく、これらのリソースはすべて、どのようrequestAnimationFrameに機能するか、またはどのように使用できるか/使用する必要があるかについて何かを教えてくれますが、いつ使用するのが正しいかについては教えてくれません。

• アニメーション（CSSアニメーションのように、要素のスタイルを繰り返し変更する）に使用する必要がありますか？
• 自動化されたイベントが1つまたは複数の要素のCSS/クラスを変更したい場合に使用する必要がありますか？
• 自動化されたイベントが1つまたは複数の要素のテキスト値を変更したい場合に使用する必要がありますか？（たとえば、1秒に1回時計の値を更新する）
• 自動化されたイベントがDOMを変更したい場合に使用する必要がありますか？
• 自動化されたイベントに.offsetTop、.offsetLeftなどの値が必要で、topやleftなどのスタイルをさらに数行変更したい場合に使用する必要がありますか？
• ユーザーが生成したイベントによって上記の変更が発生した場合に使用する必要がありますか？

TL; DR： requestAnimationFrameを使用するのはいつ正しいですか？

例を実行しようとしました：http：//tutorials.jenkov.com/html5-canvas/animation.html。
ただし、Opera 12以降では次のエラーが発生し
ます。キャッチされない例外：TypeError：'reqAnimFrame'は関数ではありません。

ありがとう
Sneha

アニメーションを使用してjQueryアプリを構築しています。

現在、requestAnimationFrameブラウザを最小化するか、ブラウザのタブを変更すると、API はアニメーションを一時停止し、アプリケーションに戻ると再び開始します。

現在のタブを離れてもアニメーションが実行され続けるように、この一時停止を回避することは可能でしょうか?

HTML5 ゲームの場合、モバイル デバイス用のキャンバス アニメーションを使用します。

各デバイスと他のデバイスの間で速度が異なるいくつかのパフォーマンスの問題に直面しています。

requestAnimationFrameは、デバイスの速度に応じてゲームのアニメーションを高速化します。
setIntervalは、デバイスから別のデバイスへの遅延があることにショックを受けました。
setTimeoutは、キャンバスへの描画も遅くなります。

以前にモバイル HTML5 ゲームの経験があった人は、さまざまなモバイル デバイスで安定してキャンバス上でアニメーションを開発するための 3 つの方法 (または利用可能な場合は他の手法) の最良の方法を教えてくれますか?

そのため、私は良きネット市民であり、機能検出を使用してブラウザーがサポートしているかどうかを確認し、それ以外の場合はベースのソリューションrequestAnimationFrameにフォールバックするだけです (ポール アイリッシュの有名な投稿の行の周りの何か)。setTimeout

Internet Explorer 10 が登場するまで、これはどこでもうまく機能していました。IE10 では、time渡されたパラメーターは現在の時刻とは関係がないようで、 の計算が台無しになりますtimePassed。

どうしたの？

これはエラーの原因です (FF、Chrome、および ?):

JSF中出しレクリエーション

完全なコンテキストは次のとおりです。

FF のエラーは次のとおりです - mozRequestAnimationFrame(): NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object

エラーは Chrome では次のとおりです - webkitRequestAnimationFrame(): Uncaught TypeError: Illegal invocation

行で：

ログは「準備完了」ではなく「完了」を出力します

ネイティブの RAF メソッドの代わりに関数だけを使用すると、機能します (「完了」がログに記録されます)。

JSF中出しレクリエーション

RequestAnimationFrames で何が起こっていますか?

1. プレーンな JS で次のものに相当するものは何ですか?

   $(window).scroll(function() { });

2. また、スクロールをアニメーション化することも検討しています。

   $('html, body').animate({scrollTop:1750}, 'slow');

を使用する必要がありrequestAnimationFrameますか?

http://paulirish.com/2011/requestanimationframe-for-smart-animation/

連続レンダリングではなく、クリックで 1 回アニメーションをトリガーする例はありますか?

画面上でボールが動き回る小さなゲームがあり、FPS を計算したいと思います。内部で requestAnimationFrame を利用する KineticJS (4.3.1) を使用しています。

「フレーム」オブジェクトには、アニメーションが最初に開始されてからの時間をミリ秒単位で測定する frame.time でアクセスできる time プロパティがあります。

FPS を正確に測定するにはどうすればよいでしょうか?