0

例えば横移動のアニメーションをする際、どちらが速いのでしょうか?

  • transitionプロパティを使ったアニメーション
  • requestAnimationFrameでtransform:translate3D等を動かしたアニメーション

速さ = FPS が良い方を知りたいです。

例えばスペックの悪いデバイス等でも、
FPSが高いのはどちらなのかなという疑問からの
質問でした。

2
  • 2
    なんの早さを知りたいのでしょうか? 開発の早さ?
    – int32_t
    Commented 2021年5月12日 4:18
  • 仮に「アニメーションの動作速度」であるなら、いずれもプロパティやコード等で時間を指定するようなので、設計次第 という答えになりそうです。
    – cubick
    Commented 2021年5月12日 8:18

1 件の回答 1

1

CSS transition と requestAnimationFrame() の双方とも、ハードウェアのリフレッシュレートに従って描画が更新されます。よって、CPUが十分に速ければどちらでもFPSは同じになります。

CPUが遅かったりアニメーション処理や他の処理が重いとき、requestAnimationFrame() のほうがFPSが落ちやすくなります。ブラウザのネイティブコードとJavaScriptの世界を橋渡しするためのオーバヘッドが常に存在するからです。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。