例えば横移動のアニメーションをする際、どちらが速いのでしょうか?
- transitionプロパティを使ったアニメーション
- requestAnimationFrameでtransform:translate3D等を動かしたアニメーション
速さ = FPS が良い方を知りたいです。
例えばスペックの悪いデバイス等でも、
FPSが高いのはどちらなのかなという疑問からの
質問でした。
例えば横移動のアニメーションをする際、どちらが速いのでしょうか?
速さ = FPS が良い方を知りたいです。
例えばスペックの悪いデバイス等でも、
FPSが高いのはどちらなのかなという疑問からの
質問でした。
CSS transition と requestAnimationFrame()
の双方とも、ハードウェアのリフレッシュレートに従って描画が更新されます。よって、CPUが十分に速ければどちらでもFPSは同じになります。
CPUが遅かったりアニメーション処理や他の処理が重いとき、requestAnimationFrame()
のほうがFPSが落ちやすくなります。ブラウザのネイティブコードとJavaScriptの世界を橋渡しするためのオーバヘッドが常に存在するからです。