Class enchant.Timeline
アニメーションを管理するためのクラス. 操作するノードひとつに対して, 必ずひとつのタイムラインが対応する. タイムラインクラスは, 自身に様々なアクションを追加するメソッドを持っており, これらを使うことで簡潔にアニメーションや様々な操作をすることができる. タイムラインクラスはフレームとタイムのアニメーションができる.
- Defined in: enchant.js
- Extends enchant.EventTarget
Constructor Attributes | Constructor Name and Description |
---|---|
enchant.Timeline(node)
|
Method Summary
Method Attributes | Method Name and Description |
---|---|
action(params)
アクションを簡単に追加するためのメソッド.
|
|
add(action)
タイムラインにアクションを追加する.
|
|
and()
複数のアクションを並列で実行したいときに指定する.
|
|
clear()
タイムラインのキューをすべて破棄する.
|
|
cue(cue)
実行したい関数を, フレーム数をキーとした連想配列(オブジェクト)で複数指定し追加する.
|
|
delay(time)
指定したフレーム数だけ待ち, 何もしないアクションを追加する.
|
|
exec(func)
関数を実行し, 即時に次のアクションに移るアクションを追加する.
|
|
fadeIn(time, easing)
Entityをフェードインするアクションを追加する.
|
|
fadeOut(time, easing)
Entityをフェードアウトするアクションを追加する.
|
|
fadeTo(opacity, time, easing)
Entityの不透明度をなめらかに変えるアクションを追加する.
|
|
hide()
Entityの不透明度を0にする.
|
|
loop()
タイムラインをループさせる.
|
|
moveBy(x, y, time, easing)
Entityの位置をなめらかに変化させるアクションを追加する.
|
|
moveTo(x, y, time, easing)
Entityの位置をなめらかに移動させるアクションを追加する.
|
|
moveX(x, time, easing)
Entityのx座標をなめらかに移動させるアクションを追加する.
|
|
moveY(y, time, easing)
Entityのy座標をなめらかに移動させるアクションを追加する.
|
|
next(remainingTime)
キューの先頭にあるアクションを終了し, 次のアクションへ移行する.
|
|
pause()
タイムラインの実行を一時停止する.
|
|
Entityをシーンから削除する.
|
|
repeat(func, time)
ある関数を指定したフレーム数繰り返し実行するアクションを追加する.
|
|
resume()
タイムラインの実行を再開する.
|
|
rotateBy(deg, time, easing)
Entityをなめらかに回転させるアクションを追加する.
|
|
rotateTo(deg, time, easing)
Entityをなめらかに回転させるアクションを追加する.
|
|
scaleBy(scaleX, scaleY, time, easing)
Entityをなめらかに拡大・縮小させるアクションを追加する.
|
|
scaleTo(scaleX, scaleY, time, easing)
Entityをなめらかに拡大・縮小するアクションを追加する.
|
|
一つのenchant.Event.ENTER_FRAMEイベントはアニメーションに一つの時間単位になる.
|
|
一つのenchant.Event.ENTER_FRAMEイベントはアニメーションに前のフレームから経過した時間になる.
|
|
show()
Entityの不透明度を1にする.
|
|
skip(frames)
タイムラインを早送りする.
|
|
then(func)
関数を実行し, 即時に次のアクションに移るアクションを追加する.
|
|
tick(elapsed)
Timelineの時間を進める.
|
|
tween(params)
トゥイーンを簡単に追加するためのメソッド.
|
|
unloop()
タイムラインのループを解除する.
|
|
waitUntil(func)
trueが返るまで, 関数を毎フレーム実行するアクションを追加する.
|
- Methods borrowed from class enchant.EventTarget:
- addEventListener
- clearEventListener
- dispatchEvent
- on
- removeEventListener
Method Detail
-
{enchant.Timeline} action(params)アクションを簡単に追加するためのメソッド. 実体は enchant.Timeline#add のラッパ.
- Parameters:
- {Object} params
- アクションの設定オブジェクト.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} add(action)タイムラインにアクションを追加する.
- Parameters:
- {enchant.Action} action
- 追加するアクション.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} and()複数のアクションを並列で実行したいときに指定する. and で結ばれたすべてのアクションが終了するまで次のアクションには移行しない.
sprite.tl.fadeIn(30).and().rotateBy(360, 30); // 30フレームでフェードインしながら360度回転する.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} clear()タイムラインのキューをすべて破棄する. 終了イベントは発行されない.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} cue(cue)実行したい関数を, フレーム数をキーとした連想配列(オブジェクト)で複数指定し追加する. 内部的には enchant.Timeline#delay, enchant.Timeline#then を用いている.
sprite.tl.cue({ 10: function() {}, // 10フレーム経過した後に実行される関数 20: function() {}, // 20フレーム経過した後に実行される関数 30: function() {} // 30フレーム経過した後に実行される関数 });
- Parameters:
- {Object} cue
- キューオブジェクト.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} delay(time)指定したフレーム数だけ待ち, 何もしないアクションを追加する.
- Parameters:
- {Number} time
- 待機するフレーム数.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} exec(func)関数を実行し, 即時に次のアクションに移るアクションを追加する. enchant.Timeline#then のシノニム.
- Parameters:
- {Function} func
- 実行する関数.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} fadeIn(time, easing)Entityをフェードインするアクションを追加する. fadeTo(1, time, easing) のエイリアス.
- Parameters:
- {Number} time
- フレーム数.
- {Function} easing Optional, Default: enchant.Easing.LINEAR
- イージング関数.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} fadeOut(time, easing)Entityをフェードアウトするアクションを追加する. fadeTo(1, time, easing) のエイリアス.
- Parameters:
- {Number} time
- フレーム数.
- {Function} easing Optional, Default: enchant.Easing.LINEAR
- イージング関数.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} fadeTo(opacity, time, easing)Entityの不透明度をなめらかに変えるアクションを追加する.
- Parameters:
- {Number} opacity
- 目標の不透明度.
- {Number} time
- フレーム数.
- {Function} easing Optional, Default: enchant.Easing.LINEAR
- イージング関数.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} hide()Entityの不透明度を0にする. (即時)
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} loop()タイムラインをループさせる. ループしているときに終了したアクションは, タイムラインから取り除かれた後, 再度タイムラインに追加される. このアクションは, ループが解除されても残る.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} moveBy(x, y, time, easing)Entityの位置をなめらかに変化させるアクションを追加する. 座標は, アクション開始時からの相対座標で指定する.
- Parameters:
- {Number} x
- x軸方向の移動量.
- {Number} y
- y軸方向の移動量.
- {Number} time
- フレーム数.
- {Function} easing Optional, Default: enchant.Easing.LINEAR
- イージング関数.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} moveTo(x, y, time, easing)Entityの位置をなめらかに移動させるアクションを追加する.
- Parameters:
- {Number} x
- 目標のx座標.
- {Number} y
- 目標のy座標.
- {Number} time
- フレーム数.
- {Function} easing Optional, Default: enchant.Easing.LINEAR
- イージング関数.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} moveX(x, time, easing)Entityのx座標をなめらかに移動させるアクションを追加する.
- Parameters:
- {Number} x
- 目標のx座標.
- {Number} time
- フレーム数.
- {Function} easing Optional, Default: enchant.Easing.LINEAR
- イージング関数.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} moveY(y, time, easing)Entityのy座標をなめらかに移動させるアクションを追加する.
- Parameters:
- {Number} y
- 目標のy座標.
- {Number} time
- フレーム数.
- {Function} easing Optional, Default: enchant.Easing.LINEAR
- イージング関数.
- Returns:
- {enchant.Timeline} 自身.
-
next(remainingTime)キューの先頭にあるアクションを終了し, 次のアクションへ移行する. アクションの中から呼び出されるが, 外から呼び出すこともできる. アクション実行中に, アクションが終了した場合, もう一度 tick() 関数が呼ばれるため, 1フレームに複数のアクションが処理される場合もある.
sprite.tl.then(function A(){ .. }).then(function B(){ .. }); // 最初のフレームで A・B の関数どちらも実行される.
- Parameters:
- remainingTime
-
{enchant.Timeline} pause()タイムラインの実行を一時停止する.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} removeFromScene()Entityをシーンから削除する. シーンから削除された場合, enterframe イベントは呼ばれなくなるので, タイムラインも止まることに注意. これ以降のアクションは, 再度シーンに追加されるまで実行されない.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} repeat(func, time)ある関数を指定したフレーム数繰り返し実行するアクションを追加する.
- Parameters:
- {Function} func
- 実行したい関数.
- {Number} time
- 持続フレーム数.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} resume()タイムラインの実行を再開する.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} rotateBy(deg, time, easing)Entityをなめらかに回転させるアクションを追加する. 角度は相対角度 (アクション開始時の角度から更にn度) で指定する.
- Parameters:
- {Number} deg
- 目標の相対角度. (度数法)
- {Number} time
- フレーム数.
- {Function} easing Optional, Default: enchant.Easing.LINEAR
- イージング関数.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} rotateTo(deg, time, easing)Entityをなめらかに回転させるアクションを追加する.
- Parameters:
- {Number} deg
- 目標の回転角度. (度数法)
- {Number} time
- フレーム数.
- {Function} easing Optional, Default: enchant.Easing.LINEAR
- イージング関数.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} scaleBy(scaleX, scaleY, time, easing)Entityをなめらかに拡大・縮小させるアクションを追加する. 相対縮尺 (アクション開始時の縮尺のn倍) で指定する.
- Parameters:
- {Number} scaleX
- x軸方向の相対縮尺.
- {Number} scaleY Optional
- y軸方向の相対縮尺. 省略した場合 scaleX と同じ.
- {Number} time
- フレーム数.
- {Function} easing Optional, Default: enchant.Easing.LINEAR
- イージング関数.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} scaleTo(scaleX, scaleY, time, easing)Entityをなめらかに拡大・縮小するアクションを追加する.
- Parameters:
- {Number} scaleX
- x軸方向の縮尺.
- {Number} scaleY Optional
- y軸方向の縮尺. 省略した場合 scaleX と同じ.
- {Number} time
- フレーム数.
- {Function} easing Optional, Default: enchant.Easing.LINEAR
- Returns:
- {enchant.Timeline} 自身.
-
setFrameBased()一つのenchant.Event.ENTER_FRAMEイベントはアニメーションに一つの時間単位になる. (デフォルト)
-
setTimeBased()一つのenchant.Event.ENTER_FRAMEイベントはアニメーションに前のフレームから経過した時間になる.
-
{enchant.Timeline} show()Entityの不透明度を1にする. (即時)
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} skip(frames)タイムラインを早送りする. 指定したフレーム数が経過したのと同様の処理を, 瞬時に実行する. 巻き戻しはできない.
- Parameters:
- {Number} frames
- スキップするフレーム数.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} then(func)関数を実行し, 即時に次のアクションに移るアクションを追加する.
- Parameters:
- {Function} func
- 実行する関数.
- Returns:
- {enchant.Timeline} 自身.
-
tick(elapsed)Timelineの時間を進める. (キューの先頭にあるアクションに対して, actionstart/actiontickイベントを発行する)
- Parameters:
- {Number} elapsed
- 経過させる時間.
-
{enchant.Timeline} tween(params)トゥイーンを簡単に追加するためのメソッド. 実体は enchant.Timeline#add のラッパ.
- Parameters:
- {Object} params
- トゥイーンの設定オブジェクト.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} unloop()タイムラインのループを解除する.
- Returns:
- {enchant.Timeline} 自身.
-
{enchant.Timeline} waitUntil(func)trueが返るまで, 関数を毎フレーム実行するアクションを追加する.
sprite.tl.waitUntil(function() { return --this.x < 0; }).then(function(){ .. }); // x座標が負になるまで毎フレームx座標を減算し続ける.
- Parameters:
- {Function} func
- 条件とする関数.
- Returns:
- {enchant.Timeline} 自身.