requestAnimationFrameを使用してfpsを制御するにはどうすればよいですか?

fps という言葉は通常、アニメーションを使用する必要があるビデオやゲームを連想します。 fps は Frame per Second の略で、現在の画面が再レンダリングされる回数を表します。

たとえば、ビデオは連続した画像の行です。これは、非常に短い間隔で画像を表示するため、ユーザーは画像を個別に表示していることを知る方法がありません。動画のfpsを下げると、動画ではなく画像アニメーションのように見える場合があります。したがって、fps が高いほど良い結果が得られます。基本的に、fps は 1 秒間に画面を何回更新する必要があるかを示します。

JavaScript を使用して fps を制御する必要がある場合があります。使用できるさまざまな方法がありますが、それについてはこのチュートリアルで学習します。

SetTime() 関数を使用する

setTimeout() 関数は、最初のパラメータとしてコールバック関数を受け取り、2 番目のパラメータとして時間間隔を受け取ります。ここでは、各時間間隔の後に画面を再レンダリングすることで fps を制御できます。

ユーザーは setTimeout() 関数を使用して、次の構文に従って fps を制御できます。

上記の構文では、requestAnimationFrame() メソッドを使用して animate() 関数を呼び出しました。

- totalFrames 変数を定義し、ゼロに初期化します。総フレーム数を記録します。

• ステップ 2
- さらに、fps 変数を定義し、fps の値を保存します。

• ステップ 3
- IntervalOffps 変数を定義し、それに間隔を格納します。 1000/fps が保存されます。1000 はミリ秒であり、それを fps で割ることで時間間隔を取得します。

• ステップ 4
- 現在の時刻を startTime 変数に保存します。

• ステップ 5
- animate() 関数を呼び出します。

• ステップ 5.1
- 各 intervalOffps の後に setTimeout() 関数を使用して requestAnimationFrame() 関数を呼び出します。

• ステップ 5.2
- setTimeout() 関数のコールバック関数で、ユーザーは画面を再レンダリングしたり、キャンバス上に図形を描画したりするコードを作成できます。

• ステップ 5.3
- Date() オブジェクトを使用して、現在時刻を取得します。現在の時刻から開始時刻を減算して、経過時間を取得します。

• ステップ 5.4
- 数学関数を使用して、合計 fps と合計時間を取得します。

• 例 1

次の例では、setTimeout() 関数を使用して fps を制御します。 fps の値として「3」を使用します。したがって、fps 間隔は 1000/3 に等しくなります。したがって、requestAnimationFrame() メソッドを 1000/3 ミリ秒ごとに呼び出します。

Date() オブジェクトの使用

Date() オブジェクトを使用して、現在の時間と前のフレーム時間の差を取得できます。時間差がフレーム間隔を超える場合は、画面を再描画します。それ以外の場合は、1 つのフレームが完了するまで待機します。

ユーザーは、次の構文に従って時間間隔を使用してフレーム レートを制御できます。

上記の構文では、経過時間は現在の時間と最後のフレームが完了した時間の差です。

例 2

以下の例では、現在のフレームと最後のフレームの間の時間差を取得します。時間差が時間間隔より大きい場合は、画面が再レンダリングされます。

例 3

以下の例では、ユーザーは入力範囲を使用して fps を設定できます。その後、ユーザーがボタンをクリックすると、startAnimation() 関数が実行され、fps 間隔が設定され、animate() 関数が呼び出されます。 animate() 関数は、drawShape() 関数を呼び出して、キャンバス上に形状を描画し、fps を制御します。

ここでは、いくつかのメソッドを使用してキャンバス上に図形を描画します。ユーザーは入力範囲を使用して fps を変更したり、形状をアニメーション化してみたり、アニメーションの違いを観察したりできます。

以上がrequestAnimationFrameを使用してfpsを制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。