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

リングをトゥイーンアニメーションさせる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Canvas上をクリックしたとき、リングをその位置までトゥイーンアニメーションさせます。
講師:
09:23

字幕

TweenJS を使って Canvas 上をクリックした時 そのポイントにオブジェクト ここではリングですが トゥイーンアニメーションするように してみたいと思います クリックするたびにその場所に バウンドするような変化を 付けていますけれども では一旦ブラウザーを閉じましょう この HTML ドキュメントの JavaScript コードは ドキュメントを開いた時に リングがトゥイーンする という設定がしてあります クリックしても何も起こりません 先ず今の動きを見ておきましょう ファイルメニューから ブラウザーでプレビューします 端っこからリングが出てきて 真ん中でバウンドするように アニメーションして止まりました リロードしてみましょう 出てくる場所はランダムです 動きが確認できましたので ブラウザーのウィンドウは閉じます トゥイーンの設定には setTween という関数を定めました 渡す引数は 4 つあって 1 つ目がトゥイーンさせる アニメーションさせるオブジェクトです ここではリングの Shape になっています 次に移動先トゥイーン先の x y 座標 そして最後がトゥイーンにかける ミリ秒数ということです 関数はここに定義してあります 引数 4 つを受け取って トゥイーンの設定は createjs.Tween.get そして括弧の中に target を指定します target つまりトゥイーンさせる アニメーションさせるオブジェクトです 今回はリングの Shape です そして それに続けてドットで メソッドを打っていくと トゥイーンの設定ができるのですが 今回は to という メソッドを使っています 先ず 1 つ目は引数がオブジェクトで どのプロパティをどの値にという プロパティと目標値のセットを オブジェクトの中に入れます 2 つ目の引数は トゥイーンにかける時間です これらはそれぞれ引数で 受け取った値を 定めていますね duration は duration 3 つ目はオプション なんですけれども 変化のさせ方トゥイーンの値の 変化のさせ方を定めることができます ここでは createjs の Ease というクラスを使って bounceOut という変化の仕方 イージングを指定しました 名前の通りバウンドするような アニメーションになります この関数 setTween は initialize という 最初に呼び出される- 関数の中で呼び出されています ですから最初にトゥイーンが 行われるわけですから そのトゥイーンするリングは 行き先がこれは Stage といいますか Canvas の幅になっています その半分と Canvas の高さの半分 ということで中央の位置を指定し 1500 というミリ秒を指定したので 1.5 秒かけて 最初にトゥイーンが行われるわけです さてこの最初のトゥイーンの設定は このまま残します それに加えて Stage 上 Canvas 上をクリックしたら そこに向けてトゥイーンするという 新たなトゥイーンの設定を加えます クリックしたらというイベントに対して 何かを行いたい時 イベントリスナーを使います ではこの Ticker.addEventListener の前に入れましょうか そしてイベントリスナーを加える時は 誰にお願いするかということを 初めに決めなければいけません 今回はステージの どこでもということなので stage がお願いする対象になります addEventListener という メソッドはこれと同じです 長いのとタイプがちょっと難しいので コピーしてしまいます コントロールキーもしくは コマンドキーを押しながらドラッグです ドットが 1 つ多かったですね ドットを 1 個消します そしてこの中には どのイベントの時に 何を行ってくださいという指定になります 最初のイベントは文字で 指定するんですけれども ステージをクリックした時という ちょっと特別なイベントです stagemouseup となります up というのはクリックですね マウスボタンを押して離した時の イベントになります 次にやって欲しいことを 関数として定めます まだ定めていませんので ここで名前を決めてしまいます startTween にしましょうか startTween この関数は新たに 定めないといけません リスナーの関数 startTween を定めます function ですね そして名前は そんなに長くはありませんけれども 一応コピーした方が安全です コントロールもしくは コマンドドラッグでコピー 引数は特に 使わないんですけれども イベントリスナーというのは Event オブジェクトと呼ばれる- 引数を受け取ることになっています 省略も可能ですが念のため 受け取っておきましょうか EventObject と そしてこの中に ステージがクリックされた時の トゥイーンを設定をします Canvas がステージが クリックされたら どうするかというとトゥイーンを 実行するんですよね トゥイーンを実行するという ステートメントは ここにあります ここで基本的にもらってしまいましょう コピーします そしてペーストです 先ずトゥイーンさせるオブジェクトは circle という中に入っている Shape です これは共通ですね あとミリ秒の時間も同じにします 行き先が但し違います ステージの真ん中ではありませんので ではクリックした場所をどうやって 捉えるかというと stage に聞きます stage に聞いて mouseX というプロパティになります こちらも同様ですね stage に聞きます mouse もちろん Y です ファイルは保存しましょう そしてブラウザーで確かめます ブラウザーでプレビューです 先ず最初の ランダムな位置から中心までの トゥイーンが行われました そしてここから 自由な所をクリックします クリックするとそこに バウンドのアニメーションで移動します クリックした場所に トゥイーンアニメーションしますね 確認ができましたので ブラウザーのウィンドウは閉じて おさらいしましょう 先ずクリックしたらというのは addEventListener を使って イベントリスナーの登録を行います そのお願い先は stage です stage に対して addEventListener もしステージがクリックされたら stagemouseup という ちょっと変わったイベントです その時に実行したいことは startTween という 関数として定めます こちらがその関数の定めです setTween トゥイーンの関数が 既に作ってありますので それを呼び出します その時に渡す引数は トゥイーンさせる アニメーションさせるインスタンス ここでは Shape インスタンスです ただ移動先は今度はマウスポインタの クリックした場所を探しますので stage に対して 問い合わせるのですが mouseX mouseY という プロパティが その mouse 座標の値を 教えてくれます そしてトゥイーンにかける時間は 最初のトゥイーンと同じ 1.5 秒 1500 ミリ秒にしました そして setTween の内容も もう一度だけ確認しましょう 引数はトゥイーンするインスタンス x 座標 y 座標かける時間です createjs.Tween.get で トゥイーンのオブジェクトを作ります 渡すのはトゥイーンさせる アニメーションさせるインスタンス それに続けてドット to という メソッドを呼び出すと どういうトゥイーンにするのかという 先ず最初の引数はオブジェクトの中に この target のどのプロパティを どの値まで持っていくのか という目標を入れます 次に第 2 引数はかける時間 これらは引数からもらいました そして 3 番目は これはオプションなんですけれども 今回は createjs.Ease Ease クラスの中の bounceOut という バウンドするような イージングの変化を選びました

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

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

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

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

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

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