アニメーション用のタイムライン管理

Javascriptで何場面もあるようアニメーションを実装する場合に、シーンごとにアクションと発火点をタイムラインのように管理できたらよいのかなと思って書いてみた。

(function(window,namespace,$){

    window[namespace] = {

        play: function(){
            var len = this.frame.length;
            for(var i=0; i<len; i++){
                setTimeout(this.frame[i].scene, this.frame[i].timeline);
            }
        },

        frame: [
            {
                scene: function(){
                    console.log(1)
                },
                timeline: 1200
            },
            {
                scene: function(){
                    console.log(2)
                },
                timeline: 2000
            },
            {
                scene: function(){
                    console.log(3)
                },
                timeline: 2200
            },
            {
                scene: scene04,
                timeline: 3500
            }
        ]
    }

    function scene04(){
        console.log(4)
        console.log(this)
        console.log($)
    }

})(this,'FlameAnime',jQuery);


FlameAnime.play();

frame:[] の部分でシーン毎のアニメーションと発火までの時間を設定します。
シーンにアニメが多い場合は外側に関数として切り出してもよいかも。