requestAnimationFrameを使ったアニメーションに対するfpsの計測 – browser-land

requestAnimationFrameを使ったアニメーションに対するfpsの計測

 JavaScript

var pFps_St;
var pFps_Et;
var pFps_Val = 0;
var pFps_Cnt = 0;

function animate(t){
 requestAnimationFrame(animate);
 pFps_Cnt ++;
 if(pFps_Cnt == 1){
  pFps_St = new Date().getTime();
 }
 if(pFps_Cnt == 60){
  pFps_Et = new Date().getTime();
  pFps_Val = Math.round(pFps_Cnt / (pFps_Et – pFps_St) * 1000);
  pFps_Cnt = 0;
 }
}

requestAnimationFrame()
このメソッドを使うメリットは、fps (フレームレート) を計測出来る点にあります。
fpsとは単位時間あたりに処理させるフレーム数(静止画像数、コマ数)を指します。

スマホでもPCでも同様のレスポンシブデザインによって作られたwebページにおいて、
閲覧する端末によってアニメーションの速度が大きく異なるのは問題となります。
例えば、【fps20】と【fps60】では【fps20】が3倍遅くアニメーションが進みます。
しかし【fps20】の総コマ数を3分の1にすれば、アニメーション速度は等倍の示結果を得る事が出来ます。(ただしアニメーションの滑らかさは失われます。)
このようにfpsを用いる事でレスポンシブデザインの完成度が高くなります。

if(pFps_Cnt == 1)
サンプルの単位時間は、「描画が60コマまで完了するまでの時間」としています。
※サンプルでは60コマを指定していますが、任意の値で問題ありません。
条件式として単位時間の開始時刻 (1コマ目) を時間を取得しています。

if(pFps_Cnt == 60)
条件式として単位時間の終了時刻 (60コマ目) を取得しています。
※サンプルでは60コマを指定していますが、任意の値で問題ありません。
開始時刻と終了時刻の差をコマ数で割った値がfpsとなります。

例えば
「開始:0秒」「終了:1秒」「コマ数:60」の場合、fpsは60となります。

Browser-Land

: DATA

: BLOG

All
CSS
HTML5
JavaScript
WordPress

: MAIL


 

 

 

: PRAVACY POLICY

タイトルへ

サウンド設定

スクリーン設定

プレイ
データ
設定
停止
次へ
戻る
戻る
戻る
削除
再配置
戻る
戻る
メール
ブログ
Twitter
ポリシー
ユニット
武器
サークル
ボックス
コード
キング
ソルジャー
アーチャー
ウィザード
スペーサー
ギア
ホイール
クランク
フレームA
フレームB
レール
ウォール
ワイヤー
ゴム紐
カップ
大砲
弾倉
ウッド材
アイアン材
透過材
+5 deg.
-5 deg.
+45 deg.
-45 deg.
右回転
左回転
動力無し
Turn Right
Turn Left
Neutral
ロード
セーブ
バトル
ロード