投稿者 tel | 2013年9月23日

requestAnimationFrameで時間を指定する

requestAnimatioFrameはブラウザの再描画間隔に依存しているみたいなので、setIntervalのように時間指定できるようなラッパーを作ってみた。

var setAnimFrame = function(callback, interval) {
    var elapsed = 0,
        time = Date.now(),
        stop = false;

    var update = function() {
        var delta = Date.now() - time;
        time = Date.now();
        elapsed += delta;
        if(elapsed >= interval) {
            var n = elapsed / interval ^ 0;
            elapsed -= n * interval;
            callback();
        }
        if(!stop) {
             requestAnimationFrame(update);
        }
    };

    update();

    return {
        play: function() {
            stop = false;
            update();
        },
        pause: function() {
            stop = true;
        },
        step: function() {
            stop = true;
            elapsed = interval;
            update();
        },
        toggle: function() {
            if(stop) {
                this.play();
            } else {
                this.pause();
            }
        }
    };
};

clearIntervalみたいにキャンセルする関数を用意するのが難しそうだったので、制御するオブジェクトを返すことにした。
setIntervalだと第3引数にコールバックに渡す引数を指定するが、特に使わなそうなので実装していない。

https://developer.mozilla.org/ja/docs/Web/API/window.setInterval

上記のコードを使ってリサージュ曲線を30fpsで描いてみた。ただしほんとに30fpsになってるかは測ってない。

http://jsdo.it/sapphire_al2o3/xo50


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。