ICS MEDIA - インタラクションデザイン×ウェブテクノロジー

HTML5 と CreateJS で学ぶインタラクションデザイン

CreateJS でのトゥイーン実装方法まとめ

CreateJSのトゥイーンは便利で多くの機能を持っています。ここではリファレンスとしてトゥイーンの使い方をまとめました。必要に応じて参考ください。

アニメーションを待機させる wait() メソッド

wait()メソッドを使うとアニメーションを待機させることができます。待機時間をミリ秒で指定することにより、その時間が経過するまで次のアニメーションが行われなくなります。下記の例では、wait()メソッドを使って各トゥイーンの間で待機するようにしています。

createjs.Tween.get(circle) // ターゲットを指定
              .wait(2000) // 2.0 秒待機
              .to({x: 640}, 1000)
              .wait(1000)// 1.0 秒待機
              .to({x: 320}, 1000);

特定のタイミングで関数を呼ぶ call() メソッド

call() メソッドを使うとトゥイーンの途中で関数を呼び出すことができます。トゥイーンが終わってから関数を実行させたいときに役立ちます。call()メソッドで関数を指定するときは関数名の後ろ側に括弧表記()をつけないように注意しましょう。

createjs.Tween.get(circle) // ターゲットを指定
        .to({x: 640}, 2000)
        .call(step1) // 関数を呼び出す
        .to({x: 320}, 2000)
        .call(step2); // 関数を呼び出す

function step1(){
  // 円の色を変える
  circle.graphics.clear().beginFill("blue").drawCircle(0, 0, 50);
}
function step2(){
  alert("トゥイーンが終わりました");
}

トゥイーンを繰り返す loop オプション

get()メソッドの第二引数にオプションとしてloop : trueを設定すると、トゥイーンを無限に繰り返すことができます。

createjs.Tween.get(circle, {loop: true}) // ターゲットを指定
        .to({x: 640}, 1000)
        .to({x: 0}, 1000);

次の記事へ