Jump to the content

【CreateJS】Tweenの並列実行

JavaScript

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

注目記事

最近の記事

プロフィール

イソップ

ページの先頭に戻る

Search results

×