share facebook facebook twitter menu hatena pocket slack

2011.12.28 WED

HTML5 アニメーションループ

小森隆太

WRITTEN BY 小森隆太

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

今回は、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)が書いています。

小森隆太

小森隆太