【CreateJS】Tweenの並列実行

スポンサーリンク

Tweenさせるプロパティごとに、Easingを変えたい時やTweenを管理したい時がある。
そんな時はTimelineクラスを使う。

var tween = createjs.Tween.get(item).to({ x: 100 }, 500, Ease.bounceOut);
var timeline = new Timeline([tween], { start: 0 }, { paused: true });

使用時の注意点

対象オブジェクトをキャッシュすると上手く動かない。
Tweenさせる度に毎回取得すること。

良い例

var timeline = new Timeline([], { start: 0 }, { paused: true });
timeline.addTween(
    // 毎回 get() を実行
    createjs.Tween.get(item).to({ x: 100 }, 500, Ease.bounceOut),
    createjs.Tween.get(item).to({ y: 100 }, 500, Ease.bounceOut)
);
timeline.gotoAndPlay('start');

悪い例

var target = createjs.Tween.get(item);
var timeline = new Timeline([], { start: 0 }, { paused: true });
timeline.addTween(
    // 対象を変数にキャッシュすると並列実行にならない
    target.to({ x: 100 }, 500, Ease.bounceOut),
    target.to({ y: 100 }, 500, Ease.bounceOut)
)
timeline.gotoAndPlay('start')