HTML5 アニメーションループ

こんにちわ。
職人見習いの小森です。

今回は、HTML5におけるアニメーションループについてです。
私はゲームを作っていた経験もあり、HTML5におけるゲーム開発にも興味あるので調べてみました。

○setInterverlを使ったループ

function render(){
     // アニメーション 1フレーム分の処理
}
setInterval(render, 1000 / 60);

setTimeoutやsetInterverlを利用したやり方が一般的ですが、requestAnimationFrameというのが新たに用意されています。

○requestAnimationFrameを利用したループ

if ( !window.requestAnimationFrame ) {

    window.requestAnimationFrame = ( function() {

        return window.webkitRequestAnimationFrame ||
               window.mozRequestAnimationFrame ||
               window.oRequestAnimationFrame ||
               window.msRequestAnimationFrame ||
               function(callback, element) {
                   window.setTimeout( callback, 1000 / 60 );
               };
    } )();
}

requestAnimationFrameを利用する場合も非対応ブラウザへの対処も必要なため、非対応ならsetTimeoutやsetInterverlでループする対策も必要になります。

※この記事は、なかの人（spitz8008）が書いています。