TweenJS と描画系ライブラリーの組み合わせ

GraphicalWeb Advent Calendar 2012 の 25日目の記事です。

CreateJS を構成するライブラリーの一つに、TweenJS があります。TweenJS は、アニメーションのタイムラインや tween を仕込むことができる機能を有しています。

EaselJS と TweenJS の組み合わせ

CreateJS を構成する EaselJS と TweenJS を組み合わせてアニメーションを実現するなら、次のようなコード (抜粋) で可能です。

createjs.Tween.get( circle, { loop: true } )
.to( { x: 300 }, 1000, createjs.Ease.quadOut )
.wait( 300 )
.to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut )
.to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut )
.call( function() {
  console.log( 'done!' );
} );

コードを見てわかる通り、任意のオブジェクトに対して、アニメーションさせたいプロパティーと値を指定し、加えて遷移時間とイージング種を指定して利用します。何もしない待ち時間 (wate) や、途中でコールバック (call) を挟むこともできます。

EaselJS と組み合わせた demo / コードを見る

一方で、TweenJS は、EaselJS 以外とも組み合わせて利用することができ、これによりさまざまなライブラリー上でもアニメーションの管理を行うことができます。

Paper.js と TweenJS の組み合わせ

例えば、Paper.js と組み合わせ、TweenJS によるアニメーションを、Paper.js 上で利用することができます。

Paper.js と組み合わせた demo / コードを見る

THREE.js と TweenJS の組み合わせ

THREE.js と組み合わせても、TweenJS によるアニメーションを、THREE.js 上で利用することができます。WebGL は 2D canvas と座標系が異なるため、上記の demo たちとは上下が逆の動きになります。

THREE.js と組み合わせた demo / コードを見る

このように、TweenJS のアニメーション管理はとても便利で応用も効くので一度覚えておき、いろいろなライブラリーと組み合わせて利用してみるといいかもしれませんね