【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')
五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.