Herlockで作るiOSアプリ(もちろんAndroidも!) – TweenJS編 –

この記事はHerlockシリーズの続きです。

TweenJSを利用して画面遷移時にアニメーションさせるように修正してみました。

TweenJSを利用する

さっそくプロジェクトへ読み込んで利用するための設定を行いましょう。

ライブラリの読み込み

ライブラリをHerlockへ読み込みます。
IDEを起動したらライブラリメニューからプロジェクトへTweenJSを読み込んで下さい。

requirejsへ設定

依存関係をrequirejsへ記述します。
mainjsのshimへ依存関係を記述してconfigのdepsに追加します。
2014/3/14時点では0.4.1が読み込まれます。

'../lib/TweenJS/tweenjs-0.4.1.min': {
	exports: 'createjs'
},
'config' : {
    deps : ['SceneManager','../lib/JSDeferred/jsdeferred','../lib/TweenJS/tweenjs-0.4.1.min']
},

利用するための設定は以上で完了です。
アニメーションさせるためのロジックを記述していきましょう。

game画面の表示

top画面からgame画面へ遷移した時に、game画面が上からスライドしてバウンズするようにしてみした。
game画面の表示時にアニメーションさせるので、addChildren内にロジックを記述していきます。

まずはフレームを進めるためのイベントを準備します。

//tweemjsを進めるためのイベント
this.tweenTick = function(){
    createjs.Tween.tick(1000/60);
}

addChildrenにイベントの追加とアニメーションロジックを追加します。
画面の外から指定の位置へ上からスライドさせるので、初期のy軸を画面幅分マイナス(上部へ移動)にしています。
アニメーション開始で本来の位置へ移動させます。

//画面オブジェクトの追加
this.addChildren = function(){
    //背景画像の描画
    _stage.addChild( _sprite_image_bg );
    //ボタンの描画
    _stage.addChild( _sprite_button );
    _sprite_button.addEventListener( "touchTap",this.goToTop, false );
    //ボタンのアニメーション
    var startY = config.height*(-1);
    var oldY = _sprite_button.y;
    _sprite_button.y = startY + oldY;
    createjs.Tween.get(_sprite_button,{loop:false}).to({y:oldY},1000, createjs.Ease.bounceOut);
    //背景のアニメーション
    _sprite_image_bg.y = startY;
    createjs.Tween.get(_sprite_image_bg,{loop:false}).to({y:0},1000, createjs.Ease.bounceOut);
    //TweenJSを進める為のイベント
    _stage.addEventListener("enterFrame",this.tweenTick);
}

onHideにイベント解除処理を追加します。

//非表示処理
Page.prototype.onHide = function () {
	//追加
    _stage.removeEventListener("enterFrame",this.tweenTick);
    _sprite_button.removeEventListener( "touchTap", this.goToTop );
    _stage.removeChild(_sprite_button);
    _stage.removeChild(_sprite_image_bg);
};

デバッグツールで確認

コードの記述が完了したらデバッグツールで確認してみてください。
少しのコードで簡単にアニメーションを再現することが出来ました!
Herlockはドキュメントが少なくて手探りが多いですが、まだベータ版なので今後に期待したですね！

game.jsの全体は下記の通りです。
つたないコードですが参考にしてみてください。

/* 画面遷移の管理 */
define( ['config'], function ( config) {
    //画面オブジェクト
    var _sprite_image_bg, _sprite_button;
    var _loaded = false;
    //Gameページの追加
    var Page = function (path){
        Scene.call(this,path);
        //Topイベント
        this.goToTop = function(){
            //ゲーム画面の描画
            Scene.goto("/");
        }
        //tweemjsを進めるためのイベント
        this.tweenTick = function(){
            createjs.Tween.tick(1000/60);
        }
        //画面オブジェクトの追加
        this.addChildren = function(){
            //背景画像の描画
            _stage.addChild( _sprite_image_bg );
            //ボタンの描画
            _stage.addChild( _sprite_button );
            _sprite_button.addEventListener( "touchTap",this.goToTop, false );
            //ボタンのアニメーション
            var startY = config.height*(-1);
            var oldY = _sprite_button.y;
            _sprite_button.y = startY + oldY;
            createjs.Tween.get(_sprite_button,{loop:false}).to({y:oldY},1000, createjs.Ease.bounceOut);
            //背景のアニメーション
            _sprite_image_bg.y = startY;
            createjs.Tween.get(_sprite_image_bg,{loop:false}).to({y:0},1000, createjs.Ease.bounceOut);
            //TweenJSを進める為のイベント
            _stage.addEventListener("enterFrame",this.tweenTick);
        }
    };
    Page.prototype = new Scene();
    //準備処理
	var deferred = Deferred();
    //読込処理
    Page.prototype.onEnter = function () {
        //ボタンの準備
        var image_button = new Image(config.button + "top.png");
        image_button.onload = function() {
            _sprite_button = new Sprite(170,90);
            _sprite_button.x = 117;
            _sprite_button.y = 500;
            _sprite_button.addChild( new Bitmap( new BitmapData( image_button ) ) );
            //背景画像の描画
            var image_bg = new Image(config.background.game);
            image_bg.onload = function(){
                //背景画像の準備
                _sprite_image_bg = new Bitmap( new BitmapData( image_bg ) );
                //onShowの呼び出し
                deferred.call();
                _loaded = true;
            };
        }
    };
    //表示処理
    Page.prototype.onShow = function () {
        //コンテキスト
        var self = this;
        if(!_loaded){
            deferred.next( function () {
                //背景画像の描画
                self.addChildren();
            });
        }else{
            this.addChildren();
        }
    };
    //非表示処理
    Page.prototype.onHide = function () {
        _stage.removeEventListener("enterFrame",this.tweenTick);
        _sprite_button.removeEventListener( "touchTap", this.goToTop );
        _stage.removeChild(_sprite_button);
        _stage.removeChild(_sprite_image_bg);
    };
    //シーンの追加
    Scene.mapping({
        "/game": Page
    });
});