Edited at

tmlib.jsで簡単アニメーション

More than 5 years have passed since last update.


tmlib.jsで簡単アニメーション

tmlib.jsには、オブジェクトを簡単にアニメーションさせるtweener機能がついてます。


tweener

連続で指定すると、アニメーション終了後に次のアニメーションにすすみます。

tm.display.RectangleShape(100,100)

.addChildTo(this)
.setPosition(0, 0)
.tweener.clear()
.to({x: 300, y: 200, alpha: 0.5}, 1000)
.to({x: 500, y: 600, alpha: 1.0}, 1000)
;

// 変化させる値,アニメーションする時間(ミリ秒),イージングの順番で指定する


timeline

timelineはtweenerと違い、開始する時間を指定できます。

tm.display.RectangleShape(100,100)

.addChildTo(this)
.setPosition(0, 0)
.timeline.clear()
.to(0, {x: 300, y: 200, alpha: 0.5}, 1000)
.to(300, {x: 500, y: 600, alpha: 1.0}, 1000)
;

// 開始する時間,変化させる値,アニメーションする時間,イージングの順番で指定する


そもそもイージングって何

イージングは、アニメーションをなめらかに行うためのものです。

ここらへんみると分かりやすいかと。

こんな感じで書きます。

tm.display.RectangleShape(100,100)

.addChildTo(this)
.setPosition(0, 0)
.tweener.clear()
.to({x: 300, y: 200, alpha: 0.5}, 1000, "easeInOutQuad")
.to({x: 500, y: 600, alpha: 1.0}, 1000, "easeInOutQuad")
;

// 変化させる値,アニメーションする時間(ミリ秒),イージングの順番で指定する

一時変数も使わず一気にかけるチェーンメソッドすばらしいすなぁ。