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

小森隆太

小森隆太

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。