requestAnimationFrameを使ったアニメーションに対するfpsの計測
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となります。
: DATA
: BLOG
: PRAVACY POLICY
タイトルへ
サウンド設定
スクリーン設定