Blog

requestAnimationFrame()で、アニメーションの速度をデバイスの処理速度に依存しないようにする

Canvasなどでアニメーションさせる場合、
HTML5のAPIであるrequestAnimationFrame()を使うことで、
setInterval()を使うよりもブラウザの負担を軽減した、アニメーションを実装することができます。(参考: アニメーションを実装するなら知っておきたい「requestAnimationFrame」の使い方 | 株式会社LIG

)

しかしながら、requestAnimationFrame()は、setInterval()とちがい、時間間隔を指定した更新ではないため、
ブラウザやデバイスの処理速度によって、更新間隔が変化します。

そのため、requestAnimationFrame()でアニメーション速度を、デバイスやブラウザに関わらず一定にする場合、
更新毎に時間の経過を計測し、アニメーションの変化に反映させる必要があります。

時間の経過を配慮していないアニメーション
DEMO

 

時間の経過を配慮したアニメーション
DEMO2

時間の経過を配慮したアニメーションでは、performance.now()で前フレームからの経過時間を取得し、
経過時間をアニメーションの変化量に反映させるようにしています。

 

参考サイト

アニメーションを実装するなら知っておきたい「requestAnimationFrame」の使い方 | 株式会社LIG

requestAnimationFrame でフレームと再描画更新を制御する

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ