21

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

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

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

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

4

2 に答える 2

3

あなたはまだすべきではありません。少なくとも、そうではありません。これはまだ実験段階であり、完全な推奨に達する場合とならない場合があります（現時点ではまだ草案です）。とは言うものの、古いブラウザを気にしない場合、または利用可能なポリフィルを使用するのに最適なタイミングは、ブラウザが再描画する必要がある画面に物を描画しようとしているときです（ほとんどのアニメーション）。

DOMの多くの単純な変更では、この方法はやり過ぎです。これは、アイテムをすばやく描画または移動するアニメーションを実行していて、ブラウザの再描画がスムーズになるように十分に維持されていることを確認する必要がある場合にのみ役立ちます。これにより、計算するすべてのフレームが画面に確実に描画されるようになります。また、アニメーションのより正確な時間測定のためのユーティリティも提供します。最初の引数はペイントが発生する時間であるため、その時点で本来あるべき場所にいることを確認できます。

DOMに多くの単純な変更を加えている場合、またはスムーズに移行する必要がない場合は、これを使用しないでください。これはユーザーのコンピューターではより高価になるため、トランジション、動き、アニメーションで物事をスムーズにするためにこれを制限する必要があります。ページに変更を加えるたびにフレームの再描画を強制する必要はありません。ほとんどの場合、描画間の余分な数ミリ秒を心配する必要がないため、応答が十分に高速になるためです。

于 2012-11-23T03:22:34.433 に答える
-2

前の回答が言っているように、不連続なアニメーションではスムーズに移行する必要がないため、使用しないでください。ほとんどの場合、時間とともに連続的に変化するプロパティに使用されます。

于 2017-06-19T03:08:10.340 に答える