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

時間差のトゥイーンアニメーションの仕上げ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
トゥイーンの動きを細かく確かめて、仕上げをします。
講師:
10:43

字幕

ドキュメントをロードすると リングがランダムな位置から 中心にトゥイーンアニメーションします それからクリックすると そのクリックした位置に 複数のリング 20 個あるのですが それが時間差で トゥイーンアニメーションしています このアニメーションそのものは ほぼ完成なんですけれども こうしたインターアクティブな 動きについては 細かい調整をした方が良いです 動きをできるだけ よく見てみましょう 例えば続けざまにクリックしていくと 何故かリングがバラバラに なってしまいます これはちょっとアニメーションとしては 問題がありますね ではブラウザーを閉じましょう JavaScript コードの トゥイーンにかかわる部分を 簡単に確認しましょう 先ず初期設定の関数の中で リングの数 20 個分だけ 繰り返し処理をしています そしてランダムな位置に リングのインスタンスを 初め置いておいて そしてトゥイーンの設定をします これは取り敢えず動いていました 問題はクリックした時ですね クリックした時は stage に addEventListener で クリックした時という イベントを定めて startTween というメソッドを 呼び出しています それは下の方に定義してあって ここですね やはり 20 個のトゥイーンが 20 個のリングが 配列に入っていますので それを順番に取り出して それぞれにトゥイーンを設定しています setTween という関数はこちらです 渡しているのは 1 つ 1 つのリング それから行き先ですね これはクリックした x y 座標 あと時間差を付けているので トゥイーンにかける時間を 渡しています それらを受け取った この setTween の関数は Tween.get というメソッドを使って ターゲットとなるリングですね リングにトゥイーンを設定します どこにトゥイーンするのか というのは to メソッドです 初めのオブジェクトの中で トゥイーンするプロパティを定め ここでは x y 座標です どこどこにトゥイーンしなさい かける時間がここに 引数の値が渡されています あと値の変化は バウンドするようにということで Ease.bounceOut という風に なっています さてトゥイーンの隊列が バラバラになってしまいましたね 何に問題があったのか ということなのですが 時間差を設けているということを ちょっと頭に入れてください 初めのリングと終わりのリングが 目的地に到達するのに 時間が違うということですね それを頭に置いた上で もう一度アニメーションを 確かめてみましょう ファイルメニューから ブラウザーでプレビューします ドキュメントがロードされると ランダムな位置から中央に リングがトゥイーンして集まってきます その後ですね クリックをします 先頭のリングは早く 後のリングは少し遅れてトゥイーンしますね そうしたら ここをクリックしてから またすぐ違う所をクリックしてみます クリック クリックです 分かりますでしょうか 離れた所でやってみましょう クリック クリック これはつまり先頭の方の トゥイーンというのは 最初のクリックで すぐに目的地に到達してしまいます ですから次のクリックの時に その目的地から次のクリック 新しい目的地に向かいます ところがまだ目的地 初めの目的地に着いていない- 残りのリングたちは 初めの目的地に着いてから 次の目的地に向かうわけですね もう 1 回見てみましょう クリック クリック とすると分かりますね 先頭のリングたちは すぐに最初の目的地に行って そこから引き返してきます ところが後のリングたちは もう先頭のリングが 次の目的地に行っているのに 遅れて最初の目的地に 行っているわけです ということであちこちクリックすると バラバラになってしまうということなんですね では原因が分かりましたので ブラウザーを閉じましょう 原因が分かったら 次はどう解決するかです ポイントは やはりトゥイーンを設定する- setTween この関数でしょうね 色んな考え方があると思いますが 多分一番単純なのは 新しいトゥイーンを設定したら つまり setTween を呼んだ時 既に到着しているリングたち それからまだ到着していないリング 一斉に次の目的地に 向かってしまえば良いですね つまり前の命令は もう御破算にしてしまって 無しにしてしまって常に新たな目的地に 向かうようにする という風にすれば良いでしょう そういうメソッドが Tween クラスにはあります メソッドはこの関数の最初に入れます createjs.Tween. ここまでは同じなので コントロールもしくはコマンドドラッグで コピーしてしまいます 命令は removeTweens です 全部ということなので複数ですね そして引数には target を渡します ドラッグコピーをしました ではファイルを保存して 確かめてみましょう ブラウザーでプレビューします 初めにランダムな位置から 中心に集まります その後クリック クリック 今度は何か繋がっているように 常に新し目的地に 向かっていますね こうなっていれば隊列が乱れず きれいにアニメーションが行われます ではブラウザーを閉じます この処理で何の問題も ないんですけれども もしこの target このインスタンスたちに対するトゥイーンは 常に新しいトゥイーンが設定される時 前のトゥイーンを消してしまう つまり removeTweens を 発行するということであれば もうちょっと簡単な書き方がありますので 合わせてご紹介します このステートメントは無効にします そして Tween.get のメソッドの 第 1 引数はこれは指定しなければ いけないのですがオプションとして 第 2 引数があります ここにはオブジェクトを 指定することになっています この中に設定できるプロパティが 幾つかあるのですが その中の override override というプロパティ これを true という風にしますと 新しいトゥイーンの 設定がされた場合には 前の残っているものは 上書きしてしまう override というのは上書きなんです そういう設定になります もう一度ファイルを保存して 確かめてみましょう ファイルを保存して ブラウザーでプレビューします ドキュメントがロードされて全員が 中心に集まったところで クリック クリック 先程と動きは変わりませんね 全部のリングがちゃんと繋がって トゥイーンアニメーションしています ブラウザーを閉じましょう アニメーションとしては取り敢えず これで出来上がりなんですけれども もうちょっと設定を加えましょう 今度は JavaScript ではなくて スタイルシートの所です 今は Canvas に 1 ピクセルの黒いフチ アウトラインが付いていますが それに背景を加えましょう バックグラウンドカラーです そしてカラーの設定を グレーにしましょう 保存してアニメーションを確かめます ブラウザーでプレビューしましょう ドキュメントがロードされると リングが集まってくるのですが 背景を暗くすると 大分印象が変わりますね これはリングのオブジェクトの CompositeOperation に lighter という設定が してあるからですね いわゆる加算の合成に なっていますので 暗くしてもリング同士の 重なり合いの部分は 明るくなるので 光ったような感じになるということです ではおさらいしましょう ブラウザーのウィンドウは閉じます トゥイーンに時間差があるというのが 1 つのポイントでした トゥイーンを設定する時に リングごとに 20 個のリングごとに 少しずつ時間を長くして つまり後に設定したリングほど 遅く来るように 遅くトゥイーンするように設定しました そのような場合には トゥイーンを続けざまに設定した時に 前のトゥイーンがまだ 残っているリングたち後ろのリングですね それから もう既に目的地に着いて 次の新しい所に スッと向かえる先頭の方のリング ここでバラバラになってしまう ということが起こりました それを防ぐためには 新しいトゥイーンを設定する時に 前に残っているトゥイーンは リセットと言いますか 命令は removeTweens なんですけれども リムーブしてしまえば良い ということになります そうすれば 常に遅れているリングたちも 最新の目的地に トゥイーンができるようになります その時常に このリングたちに対しては 前の命令は上書きして良いんだよ という時には 第 2 パラメータ Tween.get メソッドの 第 2 引数にオブジェクトを渡し override というプロパティを true に設定すれば良かったです それから Canvas の スタイルの設定ですね ここをちょっと変えてみました バックグラウンドカラーを 暗めのグレー ということにしたのですが 設定で各リングの位置合わせ アルファに加えて インスタンスの CompositeOperation を lighter という設定にしてありました こうすると重なり合った部分が 明るくなるので 暗い背景にした方がアニメーションが 映えたということになります

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

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

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

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

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

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