初めて学ぶCreateJS

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

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
TweenJSのトゥイーンはいくつも組合わせることができます。星のShapeインスタンスが落ちて完全に弾み終わったら、1秒「ため」をつくり、その後フェードアウトしてみましょう。
講師:
09:36

字幕

TweenJS はトゥイーンを1つだけでなく 幾つも繋げて 順番にアニメーションさせることができます 今画面でご覧いただいているのは 星が上から回転しながら落ちてきて 弾みます そして 弾み終わった後 しばらく待って それから アルファが 透明になっていくと― いうトゥイーンを何度も繰り返しています こうしたトゥイーンの組み合わせ方について ご紹介をします html ドキュメントの JavaScript コードは トゥーインを1つだけ作っています まずトゥイーンをさせる星形のシェイプを 作る部分から確認しておきましょう stage に shape インスタンスを 子インスンスとして表示リストに加えます そして shape の位置調整をした後 draw という関数で星形を描きます 引数には shape インスタンスの graphics オブジェクト graphics プロパティの 参照を渡します 関数 draw は graphics オブジェクトを 受けとったら線と塗りを設定し 星形を描く drawPolyStar のメソッドで星形を描いています 次にトゥイーンの設定は setTween という関数を別に定めました 引数にはトゥイーンをさせる shape オブジェクトを渡しています setTween の関数は ターゲットのオブジェクトを受け取ったら それを引数として new Tween でインスタンスを作ります オプションとして loop のプロパティを true にしましたので トゥイーンアニメーションは何度でも 繰り返し再生されます そしてどういうとゥイーンをするかというと to メソッドには プロパティは2つ設定します まず y 座標 垂直座標のプロパティを この値に持っていきます canvas の下端のほうです もう1つ回転角 rotation のプロパティを360度回します これらのプロパティのトゥイーンは 五千ミリ秒 5秒かけて行い イージングとして Ease.bounceOut バウンドしたようなイメージですね そういう表現を与えています そしてトゥイーンの描画は 別途行われなければいけません ticker.addListener のメソッドに window を渡していますので tick メソッド tick 関数は この script 要素に書いています やることは単純に stage に update メソッドを送って 描画を更新するということだけです では この JavaScript コードの トゥイーンアニメーションを ブラウザで確認しましょう 「メニュー」>「ファイル」 >「ブラウザでプレビュー」です トゥイーンの設定は1つだけです 回転しながら落ちてきて弾む それを loop のプロパティを true にしましたので 繰り返し再生しています Tween クラスの to メソッドは そこで定めたプロパティの値に Tween を行います もう1つトゥイ―ンはせずに しばらく 待っているというメソッドがありますので それをご紹介しましょう TweenJS で トゥイーンをしばらく待っている というメソッドは まんまトゥイーンオブジェクトに対して wait というメソッドです 引数には待っている時間を ミリ秒で定めます これでしばらくトゥイーンに 溜めができるということです それでは wait メソッドも含めて setTween の関数に 2つステートメントを加えることにします まずバウンドし終わったら 待ちます しばらく溜めめます wait で1秒でいいでしょう 1000 ミリ秒です そしてもう1つ新しいトゥイーンを 付け加えましょう これは to です コピーを使ってしまいます アルファを透明にします alpha で透明は 0 です 時間は2.5秒 2500 そしてイージングについては ease クラスから circIn というイージングを使います ではこれで保存して ブラウザで確かめます 「ファイル」メニューから 「ブラウザでプレビュー」です 星が落ちてきて 弾んだ後1秒待ちます それからアルファが透明に変わります circIn というイージングは 最初はゆっくり後で速く というイージングです ですから少し溜めた後 ゆっくり薄くなって それからシュッと消えると そんな感じの表現になります CreateJS のライブラリでは 同じ処理を複数の書き方で書ける そういった文法を用意していることがあります TweenJS についても このトゥイーンの記述は別の書き方ができます まず変数は削除してしまいます そして この new の後に 直接ドットを付けて to というふうに繋げてしまいます 更にこの後 同じように wait も繋げる どんどん繋げてしまえるんですね 結果は変わりません 保存して確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」です 処理の内容は変わっていませんので アニメーション トゥイーンアニメーションは 先程と変わりがありません 上から星が回転しながら落ちてきて 弾んで一秒溜めて それから透明になります ループしますので その繰り返しになっています 文法的な説明を補っておきます Tween クラスのメソッド to とか wait ですね これはトゥイーンの設定をしたうえで 設定された Tween オブジェクトを 返すという仕様になっています そのため返された Tween オブジェクトに対して ドットを付けて また新しいメソッドが 呼び出せるというわけです この書き方で特に処理と 内容が変わるわけではありません ただ繋げて書いた方が タイプが減って楽 あるいは見やすいという方もいます あまり長く続きすぎると 見にくいかもしれませんので そういう場合には 改行しても結構です JavaScript では改行は 特に意味のないものとして無視されます ドットの改行はもう1つ 加えたほうが良いですね メソッドを3つ呼びだすということが これでわかります もう1つ これも処理の内容は 変わらないのですけど new でオブジェクト tween を作ります このメソッドのことを コンストラクタというのですが コンストラクタに直接ドットを繋げるのが どうも気持ちが悪いという人がいるようです その場合には ここも別の書き方ができます new を消してしまって createjs.Tween.get です createjs.Tween. と呼んでいますので これはオブジェクトを参照しない オブジェクトに対して呼びだす メソッドではなくて 静的なメソッドと呼ばれるものです これでも全く同じ結果になります 一応念のため保存をして 確認をしてみましょう 「ファイル」メニューから 「ブラウザでプレビュー」です もちろん動きは変わりません TweenJS を使った トゥイーンアニメーションは とても簡単だったのではないでしょうか to あるいは wait という メソッドをどんどん繋げていけば そのトゥイーンアニメーションを 順番に再生し 1つが再生し終わったら 次に進む というふうにできるので 複雑なトゥイーンも 簡単に設定することができます ここではトゥイーンを複数組み合わせて 再生する方法についてご説明しました

初めて学ぶCreateJS

このコースではCanvasへの簡単な描画からTweenJSによるトゥイーンアニメーション、PreloadJSでの外部画像ファイルの読み込みやSoundJSでのサウンドの再生などのさまざまな種類のスクリプティングについて解説します。さらにEaselJSでのマウスによるインタラクティブな操作やフィルタを使った動的な表現なども紹介します。

3時間31分 (27 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年02月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。