CreateJSで遊んでみる 2日目 TweenJS

CreateJS触ってみたいなーということで、
ドキュメントとサンプルコードを見ながらもまったり書いていこうと思います。

2日目 TweenJS

上のURLの飛び先からZIPボタンを押してダウンロードしてきます。

展開するとlibフォルダの中にtweenjsが入っています。
現時点での最新版v0.4.0を使います。

TweenJSはCreateJSのライブラリ群の一つです。
指定した時間で、現在値から指定した数値までオブジェクトのプロパティの値を変化させてくれる
Tweenを簡単に作成することができます。

同じライブり群のEaselJSに依存していますので、
先にEaselJSを読み込んだ後にTweenJSを読み込むようにしましょう。

事前にTickerクラスでsetFPSを呼び出し、 FPSを設定しておくことができます。

createjs.Ticker.setFPS(60);

Tweenの設定を行います。
下記のように書くことでTweenを動作させられます。

createjs.Tween.get(shape)
    .to({x:toX,y:toY,alpha:0.1},1000,createjs.Ease.get(1));
// Tween.get() の引数で対象の要素を指定
// toで第一引数に変更するプロパティと値を指定する。
// 指定された値までアニメーションさせることができる。
// 第二引数 → duration をmsで指定する
// 第三引数 → イージングを指定する

簡単なデモ

メソッドチェーンで複雑なアニメーションも設定可能

TweenJSはメソッドチェーンを使って処理を書いていくことができます。

以下のようなコードを書くことで、

to(アニメーション) → wait(1秒待つ) → log(ログを出力) → to(アニメーション)

といった一連のフローを実行させることが可能です。

createjs.Tween.get(shape)
    .to({x:toX,y:toY,alpha:0.1},1000,createjs.Ease.get(1))
    .wait(1000)
    .call(function(){ console.log("waiting..."); })
    .to({x:0,y:0,alpha:1},1000,createjs.Ease.get(1))

第三引数で指定されているイージングは、
たくさんの種類が用意されていて、

http://www.createjs.com/#!/TweenJS/demos/sparkTable

を見ればひと通りの動きが確認することができます。

HTML要素に対してもTweenを設定できる

また、Tween.jsはCSSPluginを導入することで、
HTML要素に対して設定することもできます。

こちらのデモでは大量のdivを放射状にアニメーションさせていますね。

http://www.createjs.com/#!/TweenJS/demos/plugins

事前にeasel.jsの後にCSSPlugin.jsを読み込みます。
CSSPlugin.jsは最初にダウンロードしてきて展開したデータの中の src/tweenjs/の中に入っています。

<script type="text/javascript" src="../lib/CSSPlugin.js"></script>

CSSPluginを読み込んだら以下のメソッドを呼び出します。


createjs.CSSPlugin.install(createjs.Tween);

これによりCSSPlugingが有効になります。
後はdomに対してTweenを適用させるだけです。

div要素を作って、ボタンを押したらランダムに指定した値まで移動するというだけのコード例です。

こんな感じで使用することができます。

var div = document.createElement("div");

document.body.appendChild(div);

createjs.CSSPlugin.install(createjs.Tween);
createjs.Ticker.setFPS(60);

$('button').on('click',function(){
    var toX = Math.random() * 300;
    var toY = Math.random() * 300;

    createjs.Tween.get(div)
     .to({top:toX,left:toY,opacity:1},1000, createjs.Ease.bounceOut);
});

上のコードが含まれたデモ

現時点でCSSPluginを利用することで指定できるようになるcssプロパティは、

top、left、bottom、right、width、height、opacity

の7つのようです。

CSSPlugin.js中にCSSPlugin.cssSuffixMapという変数が用意されていて、
ここでプロパティと対応する単位(px)を設定しているようです。

他のプロパティを追加したい場合はこの辺をもっと深く掘り下げる必要がありそうです。

TweenJSはEaselJSでしか使えないわけではないので、
他のライブラリと組み合わせて使ってみてもよいかもしれませんね。