JavaScript で ActionScript っぽく onEnterFrame を実装してみた (でぃべろっぱーず・さいど)

« JavaScript勉強会 | メイン | 続・JavaScript で ActionScript っぽく onEnterFrame を実装してみた »

JavaScript で ActionScript っぽく onEnterFrame を実装してみた

Flash を作る際、ActionScript でタイムラインであるフレームを管理するonEnterFrame というプロパティがあります。

MovieClip クラスのonEnterFrame に関数を代入すると、フレーム毎にそれを実行してくれるので、アニメーションの表現がやりやすいわけです。

JavaScript も ActionScript も同じECMAScript の実装なわけで、じゃあ JavaScript で onEnterFrame を実現したらどうなるなるかなぁと。

で、↓こんな感じで作ってみました。

var Frame = function(){
    this.stopFrame();
    this.objects = new Array();
    this.frameRate = 24;
    this.intervalId = false;
};
Frame.prototype = {
    objects : [],
    frameRate : null,
    intervalId : false,
    setObject : function(obj){
        this.objects.push(obj);
    },
    startFrame : function(rate){
        this.stopFrame();
        var timer = 1000/this.frameRate
        var self = this;
        if(rate) this.frameRate = rate;
        this.intervalId = setInterval(function(){
        for(var i=0,len = self.objects.length;i<len;i++){
                try{
                    self.objects[i].onEnterFrame();
                }catch(e){
                }
            }
        },timer);
    },
    stopFrame :function(){
        clearInterval(this.intervalId);
    }
};
var FrameElement = function(element){
    if(typeof element == 'string' || element instanceof String){
        this.obj = document.getElementById(element);
    }else{
        this.obj = element;
    }
};
FrameElement.prototype = {
    obj : null,
    getX : function(){
        try{
            return parseInt(this.obj.style.left);
        }catch(e){
            throw new Error("this element doesn't has style property");
        }
    },
    getY : function(){
        try{
            return parseInt(this.obj.style.top);
        }catch(e){
            throw new Error("this element doesn't has style property");
        }
    },
    setX :function(_x){
        this.obj.style.left = parseInt(_x) + 'px';
    },
    setY :function(_y){
        this.obj.style.top = parseInt(_y) + 'px';
    }
}

動作サンプルはこちら

エラーチェックとかちゃんとしていないので、実用的なコードではありませんが、僕がやりたいことはつかんでいただけるかと。

ただ、この方法だと、Frame クラスが管理するオブジェクトが増えれば増えるほど、動作がもっさりするのは目に見えてますね。

というか、ここまでするならFlashでええやんって話かな。

日時: 2007年11月13日 22:44 | 固定リンク |

コメントを投稿

名前:

メールアドレス:

URL:

この情報を登録しますか?

コメント: (スタイル用のHTMLタグが使えます)

プロフィール

検索

最近のエントリー

アーカイブ

カテゴリー