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")
        ;

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

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