enchant.js Timeline moveBy moveTo 終了イベントのonactionendを取得する

enchant.jsのTimelineのmoveBy()やmoveTo()で終了イベントを取る方法ないか調べました。

結論からいうとその2つの関数にはないです。

moveBy()の中ではtween()関数が呼ばれてるだけです。

tween()関数は終了イベントが取れるので同じような関数を作ってあげちゃいます。

 

moveBy()の定義はこのようになっています。

    moveBy: function(x, y, time, easing) {
        return this.tween({
            x: function() {
                return this.x + x;
            },
            y: function() {
                return this.y + y;
            },
            time: time,
            easing: easing
        });
    }

継承してもしなくてもどっちでもOKです。やりやすいやり方でやると良いでしょう。
仮にmoveByEx()とでも名づけましょう。

moveByEx:function(x, y, time, eventFunctions){
	var self = this;
	var params = {
		x: function() {
			return self.x + x;
		},
		y: function() {
			return self.y + y;
		},
		time: time,
		easing: enchant.Easing.SIN_EASEINOUT
	};
	// Event [onactionstart,onactiontick,onactionend]
	if(eventFunctions !== undefined){
		for(var key in eventFunctions){
			params[key] = eventFunctions[key];
		}
	}
	this.tl.tween(params);
}

呼びだすときは次のようにします。

this.moveByEx(this.x, this.y, frame, {
	"onactionstart": function(){
		console.log("start");
	},
	"onactiontick": function(){
		console.log("tick");
	},
	"onactionend": function(){
		console.log("end");
	}
});

これでonactionstartで開始
onactiontickで実行中
onactionendで終了が取れます。

※2013/9/29 追記
折角なのでprototype継承をした例を作ってみました。

enchant.Timeline.prototype.moveByEx = function(x, y, time, easing, eventFunctions){
	var params = {
		x: function() {
			return this.x + x;
		},
		y: function() {
			return this.y + y;
		},
		time: time,
		easing: easing
	};
	//-Event register [onactionstart,onactiontick,onactionend]
	if(eventFunctions !== undefined){
		for(var key in eventFunctions){
			params[key] = eventFunctions[key];
		}
	}
	return this.tween(params);
};

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です