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')