JavaScriptのrequestAnimationFrameを使ってみる

JavaScriptのrequestAnimationFrame()を使ってみます。

サンプルコード

requestAnimationFrame()は、指定した関数を画面の再描画毎に呼び出すことができます。
その際、引数にタイムスタンプを受け取ります。

例として、1秒ごとに10px広がっていく要素を実装してみます。

<div id="sample"></div>

stepという関数を設定して、引数の確認と要素の幅の設定を行います。

const step = (ts) => {
  console.log(ts);
  document.getElementById("sample").style.width = `${ts / 100}px`
  window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);

コールバック関数で受け取る引数がミリ秒なので、100で割って1秒毎に10px広がる設定にしています。
requestAnimationFrame()のデモページ