feeds2012/07/31カテゴリー:JavaScriptTweenJSのTimelineを使ったテキストアニメーションTweet前回の投稿「トゥイーンで簡単canvasアニメーション!TweenJSの使い方」では、TweenJSの基本的な使い方を紹介しましたが、TweenJSにはTimelineクラスが用意されており、Flashのタイムラインに似た概念で複数のトゥイーンをまとめて操作することができます。今回は、TweenJSのTimelineクラスを使って、EaselJSのTextクラスをアニメーションさせてみます。目次TweenJSのTimelineを使ったアニメーションのサンプルEaselJSのTextクラスTweenJSのTimelineクラスTimelineの再生コントロールTimelineのuseTicksオプションTweenJSのTimelineを使ったアニメーションのサンプルTweenJSのTimelineを使ったアニメーションのサンプルを作ってみました。canvas上をクリックするとテキストがアニメーションで切り替わります。このサンプルを使って、EaselJSのTextクラスとTweenJSのTimelineクラスについて解説していきたいと思います。Download(zip)EaselJSのTextクラスまず、EaselJSのTextクラスを見てみましょう。Textクラスは、HTML5のcanvasにテキストを表示することができるクラスで、new演算子でインスタンスを生成します。コンストラクタの第1引数で表示したい文字列、第2引数でフォントの指定、第3引数でテキストの色を指定します。下記は、引数で受け取った文字列からTextインスタンスを生成するメソッドです。今回は、一文字ずつアニメーションさせたかったので、引数で受け取った文字列を一文字ずつ取り出し、それぞれの文字でTextインスタンスを生成しています。生成したTextインスタンスは、addChild()で表示リストに加えることにより、canvas上に表示されます。scaleYといったプロパティを指定することができます。createTimeline();}TweenJSのTimelineクラス続いて、TweenJSのTimelineクラスを見てみます。gotoAndStop()といった機能も用意されています。下記は、サンプル内のTimelineを生成するメソッドです。最初にnew演算子でTimelineインスタンスを生成しています。コンストラクタの第1引数でトゥイーンを格納した配列、第2引数でラベル名とミリ秒のペアをオブジェクト形式で指定します。pausedといったオプションをオブジェクト形式で指定します。トゥイーンやラベルは後から追加することもできます。トゥイーンを追加するには、addTween()で追加するTweenの参照を渡します。ラベルを追加するには、addLabel()の第1引数でラベル名、第2引数でミリ秒を指定します。gotoAndPlay()といったメソッドでコントロールできます。下記は、フレームインやフレームアウトのトゥイーン終了時に呼ばれる関数です。setPaused()やgotoAndPlay()でTimelineの再生をコントロールしています。}}TimelineのuseTicksオプションTimelineは、コンストラクタの第3引数でuseTicks:trueを指定することにより、Flashのフレームに似た概念で操作することもできます。この場合、トゥイーンのdurationはミリ秒でなく、フレーム数で指定します。下記は、Timelineを生成するメソッドをuseTicks:trueで書き直したものです。Flashのタイムラインになれている人にとってはわかりやすい反面、Ticker.setFPS()で容易にFPSを変更できなくなるデメリットもあるので、好みに応じて使い分けると良いと思います。