calc-framerateというライブラリを作りました

calc-framerate: https://github.com/artprojectteam/calc-framerate

requestAnimationFrameは動作がブラウザに依存するということもあってsetIntervalやsetTimeoutのような使い方はあまり向いていません。
しかし、フレームレートと取得したいミリ秒を元に総シート数を割り出し、現在何フレーム目かを取得することでsetIntervalのような実は動作時間が保証されていない関数よりは正確に割り出すことができます。
これはそんな計算をするライブラリです。

ライブラリはファイル単体をHTMLで読み込んで使うこともできますが、npmでインストールしてimportして使うこともできます。

ダウンロードして使う場合

distディレクトリ内のファイルを使ってください(calc_framerate.min.jsはminify化したファイルです)。

npmでインストール

$ npm i -D calc-framerate

上記コマンドでプロジェクトにインストールできます。
i -> install、-D -> --save-devの略。

import CalcFrameRate from 'calc-framerate'

babelなどで利用する際は、上記の名前で呼び出せます。

初期化

利用するにまずインスタンスを生成する必要があります。

var Frame = new CalcFrameRate(30.0, 4000);

引数は任意です。省略した場合は上記の値がデフォルト値になります。
30.0はFPS、4000はミリ秒です。

使い方

requestAniationFrame内で取得します。
FPSを元に指定したミリ秒までの総フレーム数を計算し、昇順か降順で現在のフレーム数が0かどうかを検証します。
requestAnimationFrameの特性上、同じフレーム番号が何度も取得されるので、内部で取得したフレーム番号を保持し、最初に0になったタイミングのみtrueを返し、それ以降の連続した0に関してはfalseが返ってきます。

isAscTrue()=昇順。
isDescTrue()=降順。
どちらも引数はありません。
※昇順の場合はスタート直後が0なのでtrueが返却されます

const Frame = new CaclFrameRate(30.0, 4000)

function render(){
  const is_asc = Frame.isAscTrue()
  const is_desc = Frame.isDescTrue()

  if(is_asc){
    // 0ms時を含むtrue処理
  }

  if(is_desc){
    // 0ms時を含まないtrue処理
  }
}

render()

その他使うことはほぼありませんがフレーム番号を返すonAscFrame()|onDescFrame()もあります(フレーム番号は秒数によって総数が違います)。

requestAnimationFrameを操作する際には是非利用してみてください。
calc-framerate: https://github.com/artprojectteam/calc-framerate