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

    ×