サイトトップ
Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

TweenJSでインスタンスにトゥイーンアニメーションを加える

ID: FN1208001 Technique: HTML5 and JavaScript

CreateJS SuiteのTweenJSライブラリを使うと、いくつものトゥイーンを組合わせてインスタンスに加えられます。また、値の変化のさせかたも、さまざまなイージングの関数から選べます。TweenJSでインスタンスのトゥイーンアニメーションをつくってみましょう。


01 ランダムな塗り色で星形を描く

インスタンスはShapeにして、星形を描くことにします。まだ、トゥイーンアニメーションは設定しません。「EaselJSで描いた星形を回す」で書いたコード001に少し手を加えたのが、以下のコード001です。Canvasの真ん中にランダムな色で星形が描かれます(図001)。

コード001■EaselJSでCanvasの真ん中にランダムな色の星形を描く
  1. <script>
  2. var createjs = window;
  3. </script>
  4. <script src="easeljs/utils/UID.js"></script>
  5. <script src="easeljs/geom/Matrix2D.js"></script>
  6. <script src="easeljs/events/MouseEvent.js"></script>
  7. <script src="easeljs/display/DisplayObject.js"></script>
  8. <script src="easeljs/display/Container.js"></script>
  9. <script src="easeljs/display/Stage.js"></script>
  10. <script src="easeljs/display/Graphics.js"></script>
  11. <script src="easeljs/display/Shape.js"></script>
  12. <script>
  13. var stage;
  14. var nRadius = 40;
  15. function initialize() {
  16.   var canvasElement = document.getElementById("myCanvas");
  17.   var nWidth = canvasElement.width;
  18.   var nHeight = canvasElement.height;
  19.   stage = new Stage("myCanvas");
  20.   var myShape = new Shape();
  21.   stage.addChild(myShape);
  22.   setAppearance(myShape, nWidth, nHeight);
  23. }
  24. function setAppearance(myShape, nWidth, nHeight) {
  25.   myShape.x = nWidth / 2;
  26.   myShape.y = nHeight / 2;
  27.   draw(myShape.graphics);
  28. }
  29. function draw(myGraphics) {
  30.   var randomNumber = Math.floor(Math.random() * 0xFFFFFF);
  31.   var randomColor = Graphics.getRGB(randomNumber);
  32.   myGraphics.beginStroke("blue");
  33.   myGraphics.beginFill(randomColor);
  34.   myGraphics.drawPolyStar(0, 0, nRadius, 5, 0.6, -90);
  35.   stage.update();
  36. }
  37. </script>

図001■Canvasの真ん中にランダムな色で星形が描かれる
図001

Graphicsクラスのメソッドにおける色指定について、少し触れておきます。Graphics.beginStroke()やGraphics.beginFill()メソッドに渡す色を定める引数(文字列)には、「#」で始まる16進数のカラーコードやカラーネーム(前掲コード001第32行目参照)が使えます。

さらに、Graphics.getRGB()メソッドを使えば、数値で定めた色を前述メソッドの引数に渡せる文字列として受取れます。前掲スクリプト001では、ランダムなRGBカラー値を文字列にしてGraphics.beginFill()メソッドの引数に渡しました(第30〜31および第33行目)。引数のアルファは、省くとデフォルト値の1になります。

Graphics.getRGB(赤, 緑, 青, アルファ)
Graphics.getRGB(RGBカラー, アルファ)

02 TweenJSを使った簡単なトゥイーンアニメーション

それでは、Shapeインスタンスにトゥイーンアニメーションを加えます。まず、TweenJSを使ってトゥイーンアニメーションさせるときに、読込むクラス(JavaScriptファイル)です。本体のTween.jsとイージングを定めるEase.jsのほか、Ticker.jsも要ります。TweenJSクラスそのものは、プロパティ値を刻々と変えるだけです。アニメーションとして表示するには、tickイベントでStage.update()メソッドを呼出して画面を描替えなければなりません[*1]。なお、行番号は後に全体を掲げるコード002にもとづきます。

  1. <script src="easeljs/utils/Ticker.js"></script>
  2. <script src="tweenjs/Tween.js"></script>
  3. <script src="tweenjs/Ease.js"></script>

トゥイーンを定める関数(setTween())では、インスタンスにごく簡単なアニメーションを加えます。そのために使うのが、Tween()コンストラクタとTween.to()メソッドのふたつです。

  1. Tween()コンストラクタでトゥイーンするインスタンスと基本設定を定める。
  2. Tween.to()メソッドにトゥイーンするプロパティとその最終的な値、間隔、イージングの仕方を与える。

Tween()コンストラクタには、第1引数でトゥイーンするオブジェクトを定めます。また、第2引数に、必要があれば初期設定のプロパティをObjectインスタンスに納めて渡します。今回は、loopプロパティをtrueに定めて、トゥイーンを繰返します(第42行目)。

new Tween(対象オブジェクト, 初期設定Object)

そして、Tween.to()メソッドには、第1引数にトゥイーンするプロパティ値のObjectインスタンス、第2引数はその間隔、第3引数にはイージングの関数を渡します。さまざまなイージングの関数は、Easeクラスに定められています。

Tweenオブジェクト.to(プロパティ値のObject, 間隔, イージング関数)

Tween.to()メソッドの第1引数には、ふたつのプロパティyとrotationをObjectインスタンスに納めて、インスタンスを360度回しながらCanvasの下端まで垂直に動かします。また、第2引数のアニメーションの間隔は5秒(5000ミリ秒)です。そして、第3引数のイージングとして、トゥイーンの最後にバウンドする静的メソッドEase.bounceOut()を用います(第43行目)[*2]。

  1. function initialize() {
  1.   Ticker.addListener(this);
  2.   setTween(myShape, nWidth, nHeight);
  3. }
  1. function setTween(target, nWidth, nHeight) {
  2.   var myTween = new Tween(target, {loop:true});
  3.   myTween.to({y:nHeight - nRadius, rotation:360}, 5000, Ease.bounceOut);
  1. }
  2. function tick() {
  3.   stage.update();
  4. }

これでランダムな色の星形インスタンスが上から回りながら落ちてきて、下で弾むトゥイーンアニメーションのでき上がりです(図002)[*3]。なお、インスタンスが表れる垂直位置はCanvasの上端にしました(第30行目)。

  1. function setAppearance(myShape, nWidth, nHeight) {
  1.   myShape.y = -nRadius;
  1. }

図002■ランダムな色の星形が回りながら落ちて弾む
図002上

図002中

図002下

[*1] Tickerクラスを使ったアニメーションについては、前出「EaselJSで描いた星形を回す」の02「EaselJSを使ったスクリプトによるアニメーション」をお読みください。

[*2] Easeクラスに備わるさまざまなイージングの静的メソッドについては、TwweenJSのサイトに掲げられた「DEMOS」(デモ)の「SPARK TABLE」で、それぞれの値の変わり方がグラフで確かめられます(図003)。画面右側のリストから見たいイージングメソッドを選べば、縦軸が経過時間、横軸を値の変化としたグラフが描かれます。

図003■Easeクラスのイージングのメソッドによる値の変化が確かめられる「SPARK TABLE」

[*3] Tweenインスタンスは関数(setTween())のローカル変数に納められています(第42行目)。それでも、アニメーションは止まることなくループします。それは、Tweenクラスの中で、インスタンスの参照がキューに保持されているからです。そのため、ローカル変数のインスタンスも消えてしまうことはありません。そして、トゥイーンが終わると参照はキューから除かれて、ガベージコレクトされることになります(CreateJS Support「Is a Tween instance going to be automatically garbage-collected?」参照)。

03 複数のトゥイーンを組合わせる

TweenJSのトゥイーンはいくつも組合わせることができます。星のShapeインスタンスが落ちて完全に弾み終わったら、1秒「ため」をつくり、その後フェードアウトしてみましょう。Tweenインスタンスに定めたトゥイーンは、「キュー」というリストに納められて順に実行されます。ですから、アニメーションさせたい順に、トゥイーンを続けざまに加えて構わないのです。

トゥイーンの「ため」は、Tween.wait()メソッドに待ち時間を渡して定めます。Tween.wait()メソッドは、何もしないトゥイーンをキューに加えると考えてもよいでしょう。

Tween.wait(待ち時間)

1秒の待ちと、2.5秒のフェードアウトの(alphaプロパティを0にする)トゥイーンは、つぎのコード002のようにTweenインスタンスに加えます(第44〜45行目)。フェードアウトのイージングに定めたEase.circIn()メソッドは値を、始めはゆっくり、次第に速く変えていきます(第45行目。前掲図003参照)。これでバウンドし終えたShapeインスタンスが1秒そのままで、その後2.5秒かけてフェードアウトします(図004)。

コード002■落ちてきた星形のインスタンスが弾み終えてしばらくするとフェードアウトする
  1. <script>
  2. var createjs = window;
  3. </script>
  4. <script src="easeljs/utils/UID.js"></script>
  5. <script src="easeljs/geom/Matrix2D.js"></script>
  6. <script src="easeljs/events/MouseEvent.js"></script>
  7. <script src="easeljs/display/DisplayObject.js"></script>
  8. <script src="easeljs/display/Container.js"></script>
  9. <script src="easeljs/display/Stage.js"></script>
  10. <script src="easeljs/display/Graphics.js"></script>
  11. <script src="easeljs/display/Shape.js"></script>
  12. <script src="easeljs/utils/Ticker.js"></script>
  13. <script src="tweenjs/Tween.js"></script>
  14. <script src="tweenjs/Ease.js"></script><script>
  15. var stage;
  16. var nRadius = 40;
  17. function initialize() {
  18.   var canvasElement = document.getElementById("myCanvas");
  19.   var nWidth = canvasElement.width;
  20.   var nHeight = canvasElement.height;
  21.   stage = new Stage("myCanvas");
  22.   var myShape = new Shape();
  23.   stage.addChild(myShape);
  24.   setAppearance(myShape, nWidth, nHeight);
  25.   Ticker.addListener(this);
  26.   setTween(myShape, nWidth, nHeight);
  27. }
  28. function setAppearance(myShape, nWidth, nHeight) {
  29.   myShape.x = nWidth / 2;
  30.   myShape.y = -nRadius;
  31.   draw(myShape.graphics);
  32. }
  33. function draw(myGraphics) {
  34.   var randomNumber = Math.floor(Math.random() * 0xFFFFFF);
  35.   var randomColor = Graphics.getRGB(randomNumber);
  36.   myGraphics.beginStroke("blue");
  37.   myGraphics.beginFill(randomColor);
  38.   myGraphics.drawPolyStar(0, 0, nRadius, 5, 0.6, -90);
  39.   stage.update();
  40. }
  41. function setTween(target, nWidth, nHeight) {
  42.   var myTween = new Tween(target, {loop:true});
  43.   myTween.to({y:nHeight - nRadius, rotation:360}, 5000, Ease.bounceOut);
  44.   myTween.wait(1000);
  45.   myTween.to({alpha:0}, 2500, Ease.circIn);
  46. }
  47. function tick() {
  48.   stage.update();
  49. }
  50. </script>

図004■バウンドし終えた星のインスタンスが1秒後にフェードアウトする
 

作成者: 野中文雄
作成日: 2012年8月15日
Copyright © 2001-2012 Fumio Nonaka.  All rights reserved.