初めて学ぶCreateJS

トゥイーンに関数の呼出しを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
TweenJSのトゥイーンには、関数の呼出しが加えられます。予め定めたプロパティ値をトゥイーンするだけでなく、値を演算し直したり、トゥイーンの設定を変えることもできます。
講師:
10:09

字幕

TweenJS ライブラリで トゥイーンの1つとして 関数を呼び出す方法をご紹介します 関数が呼び出せると 毎回同じトゥイーンをループするだけでなく 1つのループが終わるたびに 水平位置をランダムに計算し直して バラバラな位置から 毎回星を登場させることができます HTML ドキュメントに今現在書かれている JavaScript のコードは 単純に同じトゥイーンアニメーションを 繰り返します 簡単にコードを確認しますと stage に対して shape インスタンスを 子オブジェクトとして表示リストに加え 位置を調整してから 星を描く draw 関数を呼び出します draw 関数には shape の graphics オブジェクトが渡されますので draw 関数が受け取った その graphics オブジェクトに対して 線と塗りの設定をした上で 星を描いています 次に 本題であるトゥイーンの設定は これも別の関数 setTween という関数を定め トゥイーンさせる shape インスタンスを 引数として渡しています 関数 setTween は 渡されたオブジェクトを ターゲットとして new でトゥイーンオブジェクトを 作っています 尚 何度も繰り返す為にオプションとして オブジェクトに loop プロパティを true にして渡しています そして トゥイーンは3種類です まず Y 座標とローテーションを 5秒間かけて トゥイーンします イージングは bounceout バウンドするような感じですね そして wait で 1000 ミリ秒 1秒待って その後また to メソッドで 今度はアルファを 0 にします 間隔は 2.5 秒  2500 ミリ秒をかけます イージングの仕方は circIn です では今現在のトゥイーンがどうなっているか 確認しましょう 「ファイル」メニューから 「ブラウザでプレビュー」です 星型のシェープが上から回りながら 落ちてきてバウンドします 1秒ためらってアルファが透明に変わります それをループして繰り返しています 今のところ常に水平座標は 真ん中から落ちてきます これを関数を定めて ランダムな水平位置に星型を設定して そこから落とすようにしたいと思います トゥイーンは一旦おいて shape の水平座標を ランダムに変える関数を定めます その為には変数を2つ用意しておきます まず1つは shape は その新たな関数からもアクセスしたいので ローカル変数ではちょっとまずいです なので これは function の外に 持っていきます そしてその変数に対して shape のオブジェクトを代入します もう1つ 水平方向にランダムに 位置を定めるということは キャンバスの幅が必要ですね なので canvasWidth と 新たな変数を定めます canvasWidth というのは この値を入れたいので この前に この値を― canvasWidth の変数に 入れておきましょう そうしたらこの変数で canvasElement.width の式は 置き換えてしまうことができますね こういう操作をした時は 動作は変わらない筈なんですが 確かに動作は変わらず 問題は起こらないということを 確認しておいた方がいいです トゥイーンは一旦脇において shape の水平位置を ランダムに変えるという部分 その関数を書いて行きましょう まず変数は2つ要りそうです 2つと言うか現在 myShape shape オブジェクトを入れている変数が ローカル変数になっています この位置を別の関数からも 変えたいわけですから 関数の外に出しましょう これで他の関数からも アクセスができるようになります もう1つ キャンバスの幅が必要ですね これを元にランダムな水平位置を決めます ですのでそれを入れる変数も用意しましょう canvasWidth とします そうしたら この canvasWidth の変数に キャンバスの幅ですね これを代入します できるだけコピーを使いましょう タイプミスをすると結構分かりにくいです ではこれを一旦取り出し 元の位置に 代わりに変数を入れます 動作は変わらない筈なんですけど こういう操作をしたときは一旦 本当に変わらないか 問題が起こらないか確認した方がいいでしょう 一旦保存して 「ファイル」メニューから 「ブラウザでプレビュー」します トゥイーンアニメーションは ちゃんと動作しますね 上から星が回転しながら落ちてきて 弾んで 弾み終わると少し待って それからアルファが透明に変わります OKですね JavaScript コードに インスタンスの水平位置を ランダムに変えるという関数を加えます ではここに function setRandom X とでもしましょうか 引数は特に要りません そして shape インスタンスですね shape インスタンスの X 座標をランダムな位置に変えます ランダムな値を返すのは Math.random 関数ですね 但し これは 0 から 1 までの 間の数字ですから キャンバス幅いっぱいの数字がほしければ キャンバス幅を掛け算します このために変数にとっておきました そしてこの関数を呼び出せばいいので この X を設定したステートメントは ダブルスラッシュで無効にします これをコメントアウトと言ったりします コメントにして無効にすることです 代わりにこの関数を呼び出せばいいので setRandomX です セミコロンを付けておきましょう ここにもセミコロンがないですね セミコロンは一応付けておいた方が ここでステートメント終わりという 意味になりますので安心です では確認しましょう 一旦保存して 「ファイル」メニューから 「ブラウザでプレビュー」します わかり易く端に行ってくれましたね ランダムな位置になっていますので ロードし直せばまた位置が変わる筈です 今度は反対側の方に行きました 確かにランダムになっています 但し 関数をトゥイーンの中で 呼び出してないので 一回場所が決まればリロードしない限り 同じ場所から星が落ちてきます ですから次の課題はトゥイーンの中で ランダムに位置を変える関数を 呼び出すということです トゥイーンにステートメントを加える前に このコメントアウトした行は もう必要がないので消しておきましょう ちょっと画面が狭いですから ではトゥイーンを設定している setTween の 関数の3つトゥイーンを設定していますが 4つ目として新たに関数を呼び出すと そういうメソッドを加えます やはり参照するのは トゥイーンオブジェクトです そして call という メソッドを呼び出します この中には関数名です 関数名を入れます 関数名の後に ( ) はつけてはいけません 付けないように注意してください これでおしまいです 一旦保存しましょう そして「ファイル」メニューから 「ブラウザでプレビュー」です どうでしょうか まず右寄りに星が出てきました それがアルファが消えて左寄り 確かに毎回位置が変わっているようですね ここでご紹介したのは tween.call トゥイーンオブジェクトに対する call というメソッドで 関数が呼び出せるということです 関数が呼び出せれば 同じトゥイーンを毎回繰り返すのではなく 毎回計算をし直すことができると いうことが便利です

初めて学ぶCreateJS

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

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

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

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

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