topical media & game development
mobile-graphic-enchant-dev-src-Timeline.js / js
@scope enchant.Timeline.prototype
enchant.Timeline = enchant.Class.create(enchant.EventTarget, {
@name enchant.Timeline
@class
[lang:ja]
アニメーションを管理するためのクラス.
操作するノードひとつに対して、必ずひとつのタイムラインが対応する。
tl.enchant.js を読み込むと、Node クラスを継承したすべてのクラス (Group, Scene, Entity, Label, Sprite)の
tl プロパティに、タイムラインクラスのインスタンスが生成される。
タイムラインクラスは、自身に様々なアクションを追加するメソッドを持っており、
これらを使うことで簡潔にアニメーションや様々な操作をすることができる。
タイムラインクラスはフレームとタイムのアニメーションができる。
parameter: node 操作の対象となるノード
parameter: [unitialized] このパラメータがtrueならば、最初のaddメソッドが呼ばれる時nodeにenchant.Event.ENTER_FRAMEイベントリスナを追加される。
[/lang]
[lang:en]
Time-line class.
Class for managing the action.
For one node to manipulate the timeline of one must correspond.
* Reading a tl.enchant.js, all classes (Group, Scene, Entity, Label, Sprite) of the Node class that inherits
* Tlthe property, an instance of the Timeline class is generated.
* Time-line class has a method to add a variety of actions to himself,
* entities can be animated and various operations by using these briefly.
* You can choose time based and frame based(default) animation.
parameter: node target node
parameter: [unitialized] if this param is true, when add method called in the first time,
enchant.Event.ENTER_FRAME event listener will be added to node (for reducing unused event listeners)
[/lang]
@constructs
initialize: function(node) {
enchant.EventTarget.call(this);
this.node = node;
this.queue = [];
this.paused = false;
this.looped = false;
this.isFrameBased = true;
this._parallel = null;
this._activated = false;
this.addEventListener(enchant.Event.ENTER_FRAME, this.tick);
},
@private
_deactivateTimeline: function() {
if (this._activated) {
this._activated = false;
this.node.removeEventListener('enterframe', this._nodeEventListener);
}
},
@private
_activateTimeline: function() {
if (!this._activated && !this.paused) {
this.node.addEventListener("enterframe", this._nodeEventListener);
this._activated = true;
}
},
[lang:ja]
一つのenchant.Event.ENTER_FRAMEイベントはアニメーションに一つの時間単位になる。 (デフォルト)
[/lang]
setFrameBased: function() {
this.isFrameBased = true;
},
[lang:ja]
一つのenchant.Event.ENTER_FRAMEイベントはアニメーションに前のフレームから経過した時間になる。
[/lang]
setTimeBased: function() {
this.isFrameBased = false;
},
[lang:ja]
キューの先頭にあるアクションを終了し、次のアクションへ移行する。
アクションの中から呼び出されるが、外から呼び出すこともできる。
アクション実行中に、アクションが終了した場合、
もう一度 tick() 関数が呼ばれるため、1フレームに複数のアクションが処理される場合もある。
ex.
sprite.tl.then(function A(){ .. }).then(function B(){ .. });
と記述した場合、最初のフレームで A・B の関数どちらも実行される
[/lang]
[lang:en]
[/lang]
next: function(remainingTime) {
var e, action = this.queue.shift();
e = new enchant.Event("actionend");
e.timeline = this;
action.dispatchEvent(e);
if (this.queue.length === 0) {
this._activated = false;
this.node.removeEventListener('enterframe', this._nodeEventListener);
return;
}
if (this.looped) {
e = new enchant.Event("removedfromtimeline");
e.timeline = this;
action.dispatchEvent(e);
action.frame = 0;
this.add(action);
} else {
// remove after dispatching removedfromtimeline event
e = new enchant.Event("removedfromtimeline");
e.timeline = this;
action.dispatchEvent(e);
}
if (remainingTime > 0 || (this.queue[0] && this.queue[0].time === 0)) {
var event = new enchant.Event("enterframe");
event.elapsed = remainingTime;
this.dispatchEvent(event);
}
},
[lang:ja]
ターゲットの enterframe イベントのリスナとして登録される関数
1フレーム経過する際に実行する処理が書かれている。
(キューの先頭にあるアクションに対して、actionstart/actiontickイベントを発行する)
[/lang]
tick: function(enterFrameEvent) {
if (this.paused) {
return;
}
if (this.queue.length > 0) {
var action = this.queue[0];
if (action.frame === 0) {
var f;
f = new enchant.Event("actionstart");
f.timeline = this;
action.dispatchEvent(f);
}
var e = new enchant.Event("actiontick");
e.timeline = this;
if (this.isFrameBased) {
e.elapsed = 1;
} else {
e.elapsed = enterFrameEvent.elapsed;
}
action.dispatchEvent(e);
}
},
add: function(action) {
if (!this._activated) {
var tl = this;
this._nodeEventListener = function(e) {
tl.dispatchEvent(e);
};
this.node.addEventListener("enterframe", this._nodeEventListener);
this._activated = true;
}
if (this._parallel) {
this._parallel.actions.push(action);
this._parallel = null;
} else {
this.queue.push(action);
}
action.frame = 0;
var e = new enchant.Event("addedtotimeline");
e.timeline = this;
action.dispatchEvent(e);
e = new enchant.Event("actionadded");
e.action = action;
this.dispatchEvent(e);
return this;
},
[lang:ja]
アクションを簡単に追加するためのメソッド。
実体は add メソッドのラッパ。
parameter: params アクションの設定オブジェクト
[/lang]
action: function(params) {
return this.add(new enchant.Action(params));
},
[lang:ja]
トゥイーンを簡単に追加するためのメソッド。
実体は add メソッドのラッパ。
parameter: params トゥイーンの設定オブジェクト。
[/lang]
tween: function(params) {
return this.add(new enchant.Tween(params));
},
[lang:ja]
タイムラインのキューをすべて破棄する。終了イベントは発行されない。
[/lang]
clear: function() {
var e = new enchant.Event("removedfromtimeline");
e.timeline = this;
for (var i = 0, len = this.queue.length; i < len; i++) {
this.queue[i].dispatchEvent(e);
}
this.queue = [];
this._deactivateTimeline();
return this;
},
[lang:ja]
タイムラインを早送りする。
指定したフレーム数が経過したのと同様の処理を、瞬時に実行する。
巻き戻しはできない。
parameter: frames
[/lang]
skip: function(frames) {
var event = new enchant.Event("enterframe");
if (this.isFrameBased) {
event.elapsed = 1;
} else {
event.elapsed = frames;
frames = 1;
}
while (frames--) {
this.dispatchEvent(event);
}
return this;
},
[lang:ja]
タイムラインの実行を一時停止する
[/lang]
pause: function() {
if (!this.paused) {
this.paused = true;
this._deactivateTimeline();
}
return this;
},
[lang:ja]
タイムラインの実行を再開する
[/lang]
resume: function() {
if (this.paused) {
this.paused = false;
this._activateTimeline();
}
return this;
},
[lang:ja]
タイムラインをループさせる。
ループしているときに終了したアクションは、タイムラインから取り除かれた後
再度タイムラインに追加される。このアクションは、ループが解除されても残る。
[/lang]
loop: function() {
this.looped = true;
return this;
},
[lang:ja]
タイムラインのループを解除する。
[/lang]
unloop: function() {
this.looped = false;
return this;
},
[lang:ja]
指定したフレーム数だけ待ち、何もしないアクションを追加する。
parameter: time
[/lang]
delay: function(time) {
this.add(new enchant.Action({
time: time
}));
return this;
},
[lang:ja]
@ignore
parameter: time
[/lang]
wait: function(time) {
// reserved
return this;
},
[lang:ja]
関数を実行し、即時に次のアクションに移るアクションを追加する。
parameter: func
[/lang]
then: function(func) {
var timeline = this;
this.add(new enchant.Action({
onactiontick: function(evt) {
func.call(timeline.node);
},
// if time is 0, next action will be immediately executed
time: 0
}));
return this;
},
[lang:ja]
then メソッドのシノニム。
関数を実行し、即時に次のアクションに移る。
parameter: func
[/lang]
exec: function(func) {
this.then(func);
},
[lang:ja]
実行したい関数を、フレーム数をキーとした連想配列(オブジェクト)で複数指定し追加する。
内部的には delay, then を用いている。
@example
sprite.tl.cue({
10: function(){ 10フレーム経過した後に実行される関数 },
20: function(){ 20フレーム経過した後に実行される関数 },
30: function(){ 30フレーム経過した後に実行される関数 }
});
parameter: cue キューオブジェクト
[/lang]
cue: function(cue) {
var ptr = 0;
for (var frame in cue) {
if (cue.hasOwnProperty(frame)) {
this.delay(frame - ptr);
this.then(cue[frame]);
ptr = frame;
}
}
},
[lang:ja]
ある関数を指定したフレーム数繰り返し実行するアクションを追加する。
parameter: func 実行したい関数
parameter: time 持続フレーム数
[/lang]
repeat: function(func, time) {
this.add(new enchant.Action({
onactiontick: function(evt) {
func.call(this);
},
time: time
}));
return this;
},
[lang:ja]
複数のアクションを並列で実行したいときに指定する。
and で結ばれたすべてのアクションが終了するまで次のアクションには移行しない
@example
sprite.tl.fadeIn(30).and.rotateBy(360, 30);
30フレームでフェードインしながら 360度回転する
[/lang]
and: function() {
var last = this.queue.pop();
if (last instanceof enchant.ParallelAction) {
this._parallel = last;
this.queue.push(last);
} else {
var parallel = new enchant.ParallelAction();
parallel.actions.push(last);
this.queue.push(parallel);
this._parallel = parallel;
}
return this;
},
@ignore
or: function() {
return this;
},
@ignore
doAll: function(children) {
return this;
},
@ignore
waitAll: function() {
return this;
},
[lang:ja]
true値 が返るまで、関数を毎フレーム実行するアクションを追加する。
@example
sprite.tl.waitUntil(function(){
return this.x-- < 0
}).then(function(){ .. });
// x 座標が負になるまで毎フレーム x座標を減算し続ける
parameter: func 実行したい関数
[/lang]
waitUntil: function(func) {
var timeline = this;
this.add(new enchant.Action({
onactionstart: func,
onactiontick: function(evt) {
if (func.call(this)) {
timeline.next();
}
}
}));
return this;
},
[lang:ja]
Entity の不透明度をなめらかに変えるアクションを追加する。
parameter: opacity 目標の不透明度
parameter: time フレーム数
parameter: [easing] イージング関数
[/lang]
fadeTo: function(opacity, time, easing) {
this.tween({
opacity: opacity,
time: time,
easing: easing
});
return this;
},
[lang:ja]
Entity をフェードインするアクションを追加する。
fadeTo(1) のエイリアス。
parameter: time フレーム数
parameter: [easing] イージング関数
[/lang]
fadeIn: function(time, easing) {
return this.fadeTo(1, time, easing);
},
[lang:ja]
Entity をフェードアウトするアクションを追加する。
fadeTo(1) のエイリアス。
parameter: time フレーム数
parameter: [easing] イージング関数
[/lang]
fadeOut: function(time, easing) {
return this.fadeTo(0, time, easing);
},
[lang:ja]
Entity の位置をなめらかに移動させるアクションを追加する。
parameter: x 目標のx座標
parameter: y 目標のy座標
parameter: time フレーム数
parameter: [easing] イージング関数
[/lang]
moveTo: function(x, y, time, easing) {
return this.tween({
x: x,
y: y,
time: time,
easing: easing
});
},
[lang:ja]
Entity のx座標をなめらかに変化させるアクションを追加する。
parameter: x
parameter: time
parameter: [easing]
[/lang]
moveX: function(x, time, easing) {
return this.tween({
x: x,
time: time,
easing: easing
});
},
[lang:ja]
Entity のy座標をなめらかに変化させるアクションを追加する。
parameter: y
parameter: time
parameter: [easing]
[/lang]
moveY: function(y, time, easing) {
return this.tween({
y: y,
time: time,
easing: easing
});
},
[lang:ja]
Entity の位置をなめらかに変化させるアクションを追加する。
座標は、アクション開始時からの相対座標で指定する。
parameter: x
parameter: y
parameter: time
parameter: [easing]
[/lang]
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
});
},
[lang:ja]
Entity の opacity を0にする (即時)
[/lang]
hide: function() {
return this.then(function() {
this.opacity = 0;
});
},
[lang:ja]
Entity の opacity を1にする (即時)
[/lang]
show: function() {
return this.then(function() {
this.opacity = 1;
});
},
[lang:ja]
Entity をシーンから削除する。
シーンから削除された場合、 enterframe イベントは呼ばれなくなるので、
タイムラインも止まることに注意。
これ以降のアクションは、再度シーンに追加されるまで実行されない。
[/lang]
removeFromScene: function() {
return this.then(function() {
this.scene.removeChild(this);
});
},
[lang:ja]
Entity をなめらかに拡大・縮小するアクションを追加する。
parameter: scaleX 縮尺
parameter: [scaleY] 縮尺。省略した場合 scaleX と同じ
parameter: time
parameter: [easing]
[/lang]
scaleTo: function(scale, time, easing) {
if (typeof easing === "number") {
return this.tween({
scaleX: arguments[0],
scaleY: arguments[1],
time: arguments[2],
easing: arguments[3]
});
}
return this.tween({
scaleX: scale,
scaleY: scale,
time: time,
easing: easing
});
},
[lang:ja]
Entity をなめらかに拡大・縮小させるアクションを追加する。
相対縮尺 (ex. アクション開始時の縮尺の n 倍) で指定する。
parameter: scaleX 相対縮尺
parameter: [scaleY] 相対縮尺。省略した場合 scaleX と同じ
parameter: time
parameter: [easing]
[/lang]
scaleBy: function(scale, time, easing) {
if (typeof easing === "number") {
return this.tween({
scaleX: function() {
return this.scaleX * arguments[0];
},
scaleY: function() {
return this.scaleY * arguments[1];
},
time: arguments[2],
easing: arguments[3]
});
}
return this.tween({
scaleX: function() {
return this.scaleX * scale;
},
scaleY: function() {
return this.scaleY * scale;
},
time: time,
easing: easing
});
},
[lang:ja]
Entity をなめらかに回転させるアクションを追加する。
parameter: deg 目標の回転角度 (弧度法: 1回転を 360 とする)
parameter: time フレーム数
parameter: [easing] イージング関数
[/lang]
rotateTo: function(deg, time, easing) {
return this.tween({
rotation: deg,
time: time,
easing: easing
});
},
[lang:ja]
Entity をなめらかに回転させるアクションを追加する。
角度は相対角度 (アクション開始時の角度から更に n 度) で指定する
parameter: deg 目標の相対角度 (弧度法: 1回転を 360 とする)
parameter: time フレーム数
parameter: [easing] イージング関数
[/lang]
rotateBy: function(deg, time, easing) {
return this.tween({
rotation: function() {
return this.rotation + deg;
},
time: time,
easing: easing
});
}
});
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.