[JavaScript] requestAnimationFrame, cancelAnimationFrame はこう使ってる

2013.05.05 17:11 author: taikiken | 0件のコメント

以前、requestAnimationFrame, cancelAnimationFrame のネット上の下位互換実装コードを紹介する記事を書いてました。
requestAnimationFrameを下位互換実装するために
実践に投入しようとするとおかしなところもあったのであらためて投稿しました。

今、使用しているコードです。

// animationFrame
var lastTime = 0;
var vendors = [ 'ms', 'moz', 'webkit', 'o' ];
for( var x = 0, limit = vendors.length; x &lt; limit &amp;&amp; !window.requestAnimationFrame; ++x ) {
    window.requestAnimationFrame = window[vendors[ x ]+'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[ vendors[ x ]+'CancelAnimationFrame'] || window[vendors[ x ]+'CancelRequestAnimationFrame' ];
}
 
if ( !window.requestAnimationFrame ) {
    window.requestAnimationFrame = function( callback ) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) );
        var id = window.setTimeout( function() { callback(currTime + timeToCall); }, timeToCall );
        lastTime = currTime + timeToCall;
        return id;
    };
}
 
if ( !window.cancelAnimationFrame ) {
    window.cancelAnimationFrame = function( id ) {
        clearTimeout( id );
    };
}
 
var requestAnimationFrame = window.requestAnimationFrame,
    cancelAnimationFrame = window.cancelAnimationFrame
;

Opera開発エンジニアのErik Möllerさんのコードほぼそのままです。
requestAnimationFrame for smart(er) animating

【使用方法】
上記コードを使用するクラスっぽいものを作成してます。

 var Main = ( function (){
    var _id;
 
    function _loop () {
        _id = requestAnimationFrame( _loop );
 
        // 以下にループ実行したいコード
    }
 
    function Main () {}
 
    var p = Main.prototype;
 
    p.start = function (){
        _loop();
    };
 
    p.stop = function (){
        cancelAnimationFrame( _id );
    };
 
    return Main;
}());
 
var main = new Main();

ループを開始する時はstart関数を実行します。

// loop開始
main.start();

ループを止める時はstop関数を実行します。

// loop停止
main.stop();

「こうすればいいのに」とか「間違ってるよ」とかあれば是非教えていただきたいです。

日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル