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

トゥイーンするインスタンスを複数つくる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
大きさの異なるインスタンスを複数つくって、時間差でトゥイーンアニメーションさせます。
講師:
09:18

字幕

HTML のドキュメントをロードした時 ランダムな位置から複数のリングが 中心に向かってトゥイーンアニメーションする というコンテンツを CreateJS の JavaScript コードで作ってみたいと思います 今開いている HTML ドキュメントには リングを 1 個だけ ランダムな位置に配置して Canvas の中央に トゥイーンアニメーションするという スクリプトが書いてあります 先ずブラウザーで確認してみましょう ファイルメニューから ブラウザーでプレビューです ドキュメントをロードすると ランダムな位置から トゥイーンのアニメーションをして バウンドしたようになりながら 画面の中央 Canvas の中央で止まります もう 1 回リロードしてみましょうか ランダムな位置から中央で バウンドするように止まります ではブラウザーを閉じます JavaScript コードを 簡単に確認しましょう 先ずはリングを作って 配置する部分です リングを作るのは createCircle という関数が定めてあります この関数は こちらですけれども引数に リングの太さ カラー そして半径を 渡すようになっています 実際には Shape で Shape オブジェクトで作られて 返されるので それがこの circle という変数に入ります この Shape を作って リングの Shape を作って 返す関数は Shape を作る createjs のドット Shape で 作ってそれを返します この部分は Shape の graphics のプロパティをとってきて 線で太い線でカラーを設定して 円を描くという風になっています それから最初にランダムな位置に 配置するというのは 予め Math.random のメソッドで ランダムな x y 座標を定めて それを setAppearance というのは これは インスタンスをこの x y 座標に 定めましょうということで ここに書いてありますけれども 単純にやっていることは 今のところ Shape の座標を ここに示されたランダムな x y 座標に設定している ということです トゥイーンの設定には これもまた関数で setTween というものを定めました 引数はトゥイーンさせる アニメーションさせるオブジェクトと トゥイーンする目的地ですね ここまで行きましょう という x y 座標を定めます この Width Height は それぞれ Canvas の 幅と高さをとってますから その半分ということは 真ん中ということですね そしてトゥイーンにかける時間を 最後に設定しています ではこの setTween という 関数の方を見てみましょう 関数 setTween は setAppearance の 下の方にあります 関数 setTween の中身は これは実質 1 行です TweenJS の簡潔な 書き方を使っています TweenJS の Tween.get というメソッドで このインスタンスを トゥイーンするんだよという 対象の target のインスタンスを 引数に渡しています この target のインスタンスは 引数でもらっているやつですね リングが渡されます それから 行き先ここにトゥイーンして欲しい という x y 座標と トゥイーンにかける時間が 引数にもらわれています そして この Tween.get の後に 分かりやすいように 改行はしてありますけれども続けて ドット to で ここにトゥイーンしなさいということで 指定の仕方はオブジェクトで その中にこのプロパティをここに という設定を入れます ですからインスタンスの x 座標をこの値に y 座標をこの値に トゥイーンしましょう ということです それから引数にもらった時間を加え トゥイーンの仕方ですバウンドしたような トゥイーンになっていましたね あれは Ease というクラスの bounceOut という指定をすれば バウンドしたようになる ということです では作るリングの数を 20 個に 増やしたいと思います リングの数は変数に定めておきましょう var count としてます 20 個 そしてインスタンスを 作る部分の処理ですね それは何処かというと この部分です x y 座標を定め インスタンスを Shape で作り 位置を決めてトゥイーンを定める この部分を 20 個分行う ということですね そういう時は for ステートメントを使います for 文ですね カウンタの変数を 0 から 20 ということですが変数に入れたので 20 個まで毎回毎回カウンタを 加算カウントアップします そしてここまでの処理を 20 回繰り返しましょう ということですね ただ同じ大きさで沢山作っても 重なってしまいますので 大きさを変えましょう ここでは 20 ピクセルと しているのですが カウンタが増すにつれ大きくなるように 逆に初めは小さくしましょう ということで ちょっと試してみたところ 3 ぐらいからスタートして 3 の刻みでカウントアップしてくると 何となくきれいだったので こんな感じにしてみたいと思います ファイルを保存して ブラウザーで確かめましょう ブラウザーでプレビューです ステートメントが 1 つ 抜けているようですね たたんでしまった中に addChild がありました これは入れておかないといけません インデントを整えて また たたみ直します ファイルを保存しましょう そしてブラウザーで確かめます ブラウザーでプレビューです ドキュメントをロードすると 20 個のリングが一斉に 中心に集まります もうちょっと何か差を付けましょう ブラウザーは閉じます トゥイーンをする時間 全員に 1500 ミリ秒 1.5 秒と定めましたけれども これも少し差を作りたいと思います 時間さでトゥイーンをするように したいと思います その時間は やはり変数に入れて delay 色々試してみたくなることも あると思うので できるだけ他の変数との 関係をつけておくと 調整がしやすいです やってみたところ 数によって時間差を 変えた方が良さそうです その場合私がこれくらいが良いかな と思ったのは リングの数の逆数 ですからこの場合は 20 分の 1 ですね それくらいの差を付けていくと 良さそうだということです その値をここに 掛け算するような形にします 0.5 は最低限とっておいて そのリングの数が増えるにつれ この delay ですね これを加えていこうと それに 1500 ミリ秒を掛けます ファイルをまた保存して ブラウザーで確かめましょう ドキュメントをロードすると ランダムな位置から集まってきます ただ delay 遅れを少しずつ作ったので 外側のリングほど トゥイーンが遅いですね もう一度ちょっとリロードしましょうか こんな感じです ではブラウザーを閉じてまとめましょう トゥイーンするリングを 20 個作りました その for ステートメントの繰り返し処理の 部分のおさらいになります 先ず x y 座標はランダムに決めます そして createCircle という 関数が作ってあるので そこにお願いしてリングを作ります その時に半径が指定できるように しておいたのでこの半径を カウンタ変数はカウントアップする度に 少しずつ大きくしてあります ですから同心円状のリングができました そして位置はランダムな 位置に配置されます トゥイーンは基本的には同じなのですが かける時間だけ これもカウンタ変数により少しずつ変えました 外側の大きいリングほど トゥイーンにかける時間が長くなります つまり遅れてついてくる ということですね そして一瞬忘れましたけれども ステージに加えないと Canvas には 表示されませんので気を付けましょう

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

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

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

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

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

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