EaselJS から提供される Ticker は、一定間隔で tick イベントを他のオブジェクトに伝える機能を持っています。これと TweenJS を組み合わせてアニメーションを実現するのが CreateJS の基本です。
前の記事でも触れたように、CreateJS に MovieClip が追加される可能性があるため、アニメーション制作の手段は、更に増えるのかもしれません。ともあれ、今回は TweenJS の使い方をご紹介します。
なお、現在公開中の TweenJS のバージョンはまだ 0.1 で、Readme にもアルファ版であることが明記されているので、CreateJS が登場する時には、仕様が変わっているかもしれません。その点はご注意下さい。
Ticker
まず、Ticker の使い方です。フレームレート （もしくはイベントの間隔） を指定して、定期的に時間の経過を通知するオブジェクトを登録する、という使い方をします。
フレームレートの設定は、Ticker.setFPS() メソッドを使います。Ticker からイベントを受け取るオブジェクトは、Ticker.addListener() メソッドで追加します。
下は、Stage オブジェクトを 24 fps で更新する場合の例です。
function init() {
var canvas = document.getElementById("canvas");
var stage = new Stage(canvas);
stage.update();
Ticker.setFPS(24);
Ticker.addListener(stage);
}
Ticker は、指定された間隔で、追加されたオブジェクトの tick() メソッドを呼び出します。そのため、呼び出されるオブジェクトには tick() を定義しておきます。
Ticker のメソッドは全て静的メソッドです。なので、オブジェクトごとにフレームレートを変えるような指定はできません。
Tween
TweenJS の Tween クラスは、指定された属性の値を、指定された時間をかけて指定された値に変化させる （要するにトゥイーン） 機能を提供します。
Tween には tick() メソッドが予め定義されています。また、初期化時に Ticker が存在すれば、自身を Ticker にリスナとして登録します。そのため、Tween を EaselJS と一緒に使うと、Tween のオブジェクトを生成するだけで、tick イベントごとにトゥイーン処理が行われます。
ということで、HTML ファイルは以下のようになります。
<head>
<script src="libs/easel.js"></script>
<script src="libs/Tween.js"></script>
<script>
function init() {
// ここにCreateJSのコードを記述...
}
</script>
</head>
さて、Tween オブジェクトを取得するには Tween.get() を使用します。 （静的メソッドです）
get() の引数には、表示オブジェクトの変数名を指定します。例えば、こんな感じです。
var circle = new Shape();
circle.graphics.beginFill("#FF0000").drawCircle(0,0,50);
// circle操作用のTweenオブジェクトを生成
var tween = Tween.get(circle)
こうして取得した Tween オブジェクトに対して、メソッドを使って、実現したいトゥイーンを指定します。例えば、cicle の x 属性と y 属性を 500 ミリ秒かけて 100 にしたければ、以下のように記述します。
Tween.get(circle).to({x:100,y:100},500);
to() を含めて、Tween オブジェクトの主なメソッドには以下のようなものがあります。
- to() : 指定された期間をかけて属性値を指定された値に変化させる
- wait() : 指定された期間何もしない
- set() : 属性値を設定する
- call() : 関数を呼び出す
- pause() : トゥイーンを一時停止する
- play() : 一時停止を解除する
これらを組み合わせることで、より複雑な指定をすることもできます。例えば、
Tween.get(circle)
.to({x:100},400)
.wait(600)
.set({visible:false})
.call(onComplete);
この例では、
- circle の x 属性を 400 ミリ秒かけて 100 に変化させ
- そのまま 600 ミリ秒待ち
- visible 属性の値を false に設定し
- onComplete 関数を呼び出す
というトゥイーンが出来上がります。
Tween オブジェクト生成時、第 2 引数に以下のような指定をして、トゥイーンの期間をミリ秒ではなく、フレーム数で指定することも可能です。
var tween = Tween.get(circle, {useTicks:true});
Tween には、任意の位置にトゥイーンを移動する setPosition() メソッドも提供されています。
Ease
to() の第 3 引数には、イージングの種類を指定できます。利用可能なイージングが 30 種類ほど Ease.js に定義されています。そのため、イージングを利用するときは Ease.js も HTML ファイルに読み込むようにします。
<head> <script src="libs/easel.js"></script> <script src="libs/Tween.js"></script> <script src="libs/Ease.js"></script> </head>
下は、実際に bounceOut というイージングを指定した例です。
tween.to({scaleX:0.5,scaleY:0.5},1000,Ease.bounceOut)
これで、1 秒かけて scaleX と scaleY の値を 0.5 に変化させる際に、イージング関数として bounceOut が使われます。
事前に定義されたイージング以外も実現できるよう、Ease にはいくつかのメソッドも提供されます。例えば getElasticIn() を使うと、Ease.elasticIn とは強調の度合いや期間を変えた効果を実現できます。
tween.to({x:100},1000,Ease.getElasticIn(1.2,0.3))
Timeline
TweenJS には Timeline も含まれています。Timeline の主要な特徴は、
- 複数のトゥイーンをまとめて扱える
- タイムライン上のポジションにラベルを付けられる
- gotoAndPlay() や gotoAndStop() が使える
です。複数の部品から構成されるアニメーションには特に役に立ちそうです。
下は、Timeline オブジェクトに、2 つの Tween オブジェクトとラベルを追加する例です。
var timeline = new Timeline();
timeline.addTween(Tween.get(circle1).to({x:200},1000));
timeline.addTween(Tween.get(circle2).to({y:100},1000));
timeline.addLabel("half",500);
// タイムラインを途中から再生
timeline.gotoAndPlay("half");
addTween() の引数には Tween オブジェクトを指定します。addLabel() の引数は、ラベルとなるオブジェクトと、ラベルを設定する位置です。addTween() を呼ぶごとに、タイムラインにレイヤーが追加されると考えると分かりやすいかもしれません。
Timeline を使うときは、Timeline.js を HTML ファイルに読み込む必要があります。
<head> <script src="libs/easel.js"></script> <script src="libs/Tween.js"></script> <script src="libs/Ease.js"></script> <script src="libs/Timeline.js"></script> </head>
次回は、EaselJS でインタラクションを扱う方法についてのお話の予定です。
コメントする