requestAnimationFrameの利用

requestAnimationFrameについて

JavaScriptのメソッドにアニメーション等を作るのに便利なrequestAnimationFrameというメソッドがあります。
requestAnimationFramemeメソッドは以前紹介したsetIntervalメソッドと同様に一定間隔で処理を繰り返すメソッドです。
setIntervalメソッドとの違いはrequestAnimationFramemeメソッドには処理の間隔の時間を指定する引数はなく1秒間に60回の処理を行うようになっています。Canvasを用いたアニメーションでは60fpsのアニメーションを描写するともいえます。
またsetIntervalメソッドはブラウザの描写と関係なく指定した間隔でスクリプトを動かします。その結果、描写がカクついたりしてブラウザに負担が掛かる場合があります。requestAnimationFramemeメソッドであればブラウザの描写に合わせてスクリプトを動かしますので滑らかに描写ができます。（描写毎にスクリプトの処理を行うようブラウザに合わせてスクリプトの処理のタイミングを計っているからです）
最近ではブラウザの負担を掛けないことが期待できるrequestAnimationFramemeメソッドを使う場合が多いようです。

requestAnimationFrameの書式

requestAnimationFrameの書式は次のようになります。

    function 関数名() {
        処理する内容
        requestAnimationFrame(関数名);
    }

これで関数内の処理を1秒間に60回行います。


以前作成したsetIntervalメソッドを用いたスクリプトをrequestAnimationFramemeメソッドを用いて作り直してみました。