CreateJSを応用したダイナミックなアニメーション

複数のインスタンスをトゥイーンさせる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ステージ上のクリックした位置に、複数のインスタンスを時間差でトゥイーンアニメーションさせます。
講師:
08:20

字幕

この JavaScript コードは 初期化の関数の中で 20 個のインスタンスを作っています それをステージ Canvas に置いて ランダムな位置から 中心に向かって トゥイーンアニメーションさせるという処理を 書いているのですが 取り敢えず 動きをブラウザーで 見てみることにしましょう ファイルは既に 保存してありますので ブラウザーでプレビューです ドキュメントをロードすると ランダムな位置から 中心に向けて時間さで トゥイーンアニメーションをしています さてこの後 Canvas ステージ上を 何処かクリックすると 外側の 1 個だけが トゥイーンアニメーションします 他の 19 個は取り残されています ではブラウザーを閉じることにしましょう 初期化の処理をもう一度だけ 簡単にさらっていきましょう 先ず 20 個順番に 座標を x y ランダムに定めて これはリングを作るための 関数が定義してあります そこにはリングの太さや色や そして大きさを少しずつ カウンタ変数のカウントアップに 合わせて広げています ですから同心円状のリングが できたということですね 後はそのランダムな位置に 合わせる関数です トゥイーンはここで設定しています トゥイーンする 1 つ 1 つの インスタンスについて 行き先が定められます これは全部共通に Canvas の中心です そして時間を指定するのですが ミリ秒で 少しずつ時間をずらしてあって 外に行くほど時間を長くしています ですから外側のリングほど 遅いんですね そして Canvas ステージに 加えることによって アニメーションが実行されます ここまでは問題がありません もう 1 つクリックすると トゥイーンしたというのは ここですね ステージに対してイベントリスナー addEventListener メソッドで イベントリスナーを加えています ステージをクリックしたらという イベントなのですが startTween を 実行しましょうと言っています startTween は ここにあるのですが setTween というもう 1 つの関数を 呼んでいるんですけれども その中にこのインスタンスを ここにトゥイーンしてねと マウスポインタを クリックした場所なんですけど あと時間も決めていますが これは固定ですね 問題はこのインスタンスをという所です この for 文の中でも 変数にインスタンス リングのインスタンスを 20 個作って 順々に入れているのですが この circle という変数は グローバルに設定してあります ここですね グローバルに設定してあります ですから 20 個どんどん どんどん 変数にリングを入れていくと 毎回毎回 上書きされてしまいます 最後に残るのは一番外側の 20 個目のリングだけなんですね それに対して トゥイーンしろと言っているわけですから 1 個しかトゥイーンしないのは 当たり前です ということでクリックした時も 20 個トゥイーンさせようとしたら この部分も 20 個分の処理を しなければいけません そしてその前に この変数ですね 1 個では駄目です 複数のエレメントを持つことのできる配列で 定義した方が良いでしょう JavaScript コードに 順番に手を入れていきましょう 先ずはこの単独の変数は 使わなくなります 一応分ける意味で複数にします これは配列にします これでしたら 20 個の インスタンスをエレメントとして 加えることができます そうすると circle という変数は 無くなっちゃいますね これはこの中で ローカル変数として宣言します どうせ毎回毎回 上書きされるわけですから グローバルに残しておく必要はないです そして ただ このままですと 本当に消えてしまいますので この配列に入れないと いけないですよね ということで addChild の 前で良いでしょうか ここに配列に 加えるという処理を入れます circles.push というメソッドが 配列に順番に行列に 並ぶようにしっぽから 順番に加えていきます 一応コピーしましょうね タイプミスをすると嫌です コントロールもしくはコマンドキーを 押しながらドラッグすると Dreamweaver の場合には コピーになります これで初期化の 関数の部分は OK です 今度はいよいよ本題ですね トゥイーンをクリックしたら 設定しましょうという部分になってきます この setTween という関数です すみません setTween ではないですね イベントリスナーに加えているのは startTween ですから こちらです この中を for ステートメントで 処理していく形にします その時の処理の仕方は こちらと同じなので コピーを持ってきちゃいましょう コントロールもしくはコマンドドラッグで コピーを持ってきます そしてここの部分は ステートメント一段落としまして 中括弧を閉じる circle というのがありませんよね これは 配列から順番に 取ってくることになります ですから また変数宣言をして ローカル変数として circle を定めます そして circles ここにありますね 一応コピーしてタイプミスを しないようにします そのこれは for 文でカウンタの変数が カウントアップしていきますので i 番目のリングを取っていきましょう ということで これを順々に取っていきます あとトゥイーンにかける時間が 固定になっていますので ここはやはり初期化の時と同じように 時間差を加えましょう やはりコントロール もしくはコマンドドラッグで コピーにしてしまいます ではファイルを保存しましょう そしてブラウザーで確かめます ブラウザーでプレビューです ドキュメントをロードすると ランダムな位置から中心に向かって トゥイーンアニメーションします これは初期化の関数で 定めたトゥイーンです これは初めから良かったんですね 問題は次です クリックした時に全部のリングが トゥイーンで向かいます ちょっと距離が短かったので もっと距離の長い所に行きましょう クリックすると時間差で トゥイーンをします 大丈夫ですね ではブラウザーを閉じてまとめましょう 新たに書き加えたのは このイベントリスナーに加えた- ステージをクリックした時の処理です startTween という 関数の処理なんですが ここでトゥイーンを順番にリングに対して 1 つ 1 つ設定していきます そのために少し準備が必要でした 先ずリングは配列を用意して その中に 20 個 納めることにしました そのため 1 個 1 個のトゥイーンは ローカル変数に入れて それを配列に 20 個分 push メソッドで加えています これで配列の中では 20 個のリングができました そうすれば今度は ステージをクリックした時ですね startTween の 処理ができるわけです ここでは配列に入った 20 個の トゥイーンを順番に取り出します 取り出したインスタンスは変数に入れ その変数に対して setTween という関数を呼んで トゥイーンの設定を行っています これは 20 個に対して 1 個 1 個行われます そして行き先は 全員同じ場所なのですが トゥイーンする時間が少しずつ カウンタの値によってずれています そうなることでクリックすると そのクリックした位置に 全員がトゥイーンするのですが 少しずつ遅れて 外側のリングほど遅く 集まるという アニメーションになったわけです

CreateJSを応用したダイナミックなアニメーション

このコースではCreateJSの基礎を学んだ方に、ダイナミックでインタラクティブなアニメーションの作り方を解説します。JavaScriptであまり扱われない項目や、数学や物理などスクリプト以外の考え方も合わせて解説しています。CreateJSでぜひFlashに負けないコンテンツを作ってみましょう。

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

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

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

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