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

リングをCanvas中央にトゥイーンさせる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLドキュメントを開いたとき、リングをランダムな位置からCanvas中央までトゥイーンアニメーションさせます。
講師:
12:42

字幕

この HTML ドキュメントに書いた JavaScript コードは EaselJS を使って リングのインスタンスを作り それをウィンドウを開いたとき ランダムな位置に Canvas 上のランダムな位置に 表示するようにしています 例えばリロードしてみます 位置が変わりますね 読み込むたびに 位置がランダムに変わります さてこのコードに今度は TweenJS の ライブラリを組み合わせます そしてランダムな位置に表示されたら その後 Canvas の中央に トゥイーンするという アニメーションにしてみたいと思います ではブラウザーを閉じまして コードを確認してみます リングの Shape を作る関数は 別に定められていて そこで作った Shape の オブジェクトに対して stage に addChild 子どもとして加えることによって Canvas に表示しています そして問題の位置を設定する関数が setAppearance です 引数は設定するインスタンスと x 座標 y 座標 この x 座標 y 座標を ランダムの値にしています ランダムの値は Canvas の幅と高さを それぞれ変数にとっておいて それに同じように Math.random というメソッドを掛け算しています この Math.random は 0 以上 1 未満の ランダムな数を返しますので x y 共に Canvas の幅 高さそれぞれの いっぱい いっぱいの間で ランダムな値が設定されます setAppearance の関数は 今のところ簡単です インスタンスに対して 渡された x 座標 y 座標を それぞれ設定しているということです 先ず TweenJS が使えるように Script 要素に 読み込んでいく必要があります もっと上の方ですね ここを一旦開きます EaselJS だけ読み込んでありますので これをコピーしてペーストします ネットワークから ライブラリは取ってきています そしてそこで一々リンクを調べなくても 名前が分かっているので書いてしまいます TweenJS です そして最新バージョンは 0.4.0 これで良いので また たたんでしまいましょう トゥイーンもやはり関数を別に定めて そこで処理することにします では setAppearance の 呼び出しの後に加えましょう 名前は無難なところで setTween です 引数が問題ですね 引数にはどれをトゥイーンするのですか ということで ではこのリングのトゥイーンです コントロールもしくはコマンドキーを押しながら ドラッグしてドラッグコピーします そして位置をトゥイーンするわけですから どこにトゥイーンしましょうか ということですね ステージ中央にしたいです ということなので行き先は幅 ドラッグコピーします 半分ですね そして高さも同様 高さをドラッグコピーして その半分 あと setAppearance の部分は もう簡単な関数ですので まとめてたたんでしまいましょう そしてこの後に関数を定めます トゥイーンに設定できる パラメータとしてはもう 1 つ どれくらいの時間をかけて トゥイーンするのですかという値があるので それも引数に加えましょう 1500 単位は 2 秒です ですから 1.5 秒かけて トゥイーンをするということですね ではファンクションです function の 名前は念のためコピーしましょう ドラッグコピーです コントロールもしくはコマンドを押します そして括弧を閉じて 中括弧始まり中括弧閉じ 引数を受け取る名前を 指定しましょう 先ずトゥイーンの対象は ターゲットという言い方を よくするので target にします x 座標 y 座標は nX nY で良いでしょうか 時間は duration として この中に処理を書き加えていきます トゥイーンの設定の仕方は 幾つかある中から 比較的書きやすい書き方でいきます 普通インスタンス トゥイーンのインスタンスを new Tween とやりたくなります それでもできるのですが もうちょっと簡単な書き方がありまして createjs 必ずこれが付きます Tween の get という メソッドがあります そして ここに 先ず target を指定します どのインスタンスを トゥイーンするのですか コントロールもしくは コマンドドラッグでコピーです そしてここでセミコロンで 終わってしまいません この後にインスタンスを作ったら そのインスタンスに どういうトゥイーンを設定してというのを どんどんドットで繋げていくんですね どういう風なトゥイーンにするかというのは to というメソッドがあります to というメソッドはこの中に 先ずオブジェクトを指定します ここでどういうプロパティを どんな値に最終的にするのか ゴールですね それを定めます この target の x 座標を ここでは nX でもらっていますから nX にしましょう カンマで区切っていって y 座標を nY にしましょう 取り敢えず変更するのは これだけですね そしてこの後オブジェクトの 外でカンマを加えて どれくらいかけてトゥイーンするのですか というこの引数を渡します こうすることで この target に対して こういうプロパティを 最終的にこんな値にする それをどれくらいの時間をかけて という指定ができます 更にまたドットを繋いで どんどんいけるのですが今回はここまでです ドットを繋ぐのは 簡単なんですけれども あまり沢山繋ぐと 分かりにくくなりますので 改行しておく方が 見やすいと思います ではブラウザーで確認しますので 1 回ファイルは保存します そしてブラウザーで プレビューしてみましょう いつまで待っても動きません 念のためリロードしてみましょうか リロード位置は変わるんですけど アニメーションしませんね これは実は 元のスクリプトに まだちょっと足りない所があるんです ではブラウザーを閉じましょう CreateJS の アニメーションというのは ほっといても絵が変わりません Canvas の仕様を 受け継いでいるんですけれども 絵を変えるためには つまりアニメーションするためには その度に stage に update という 命令をしなければいけません ここに書いてあるじゃないかと 最初に 1 回だけしか 実行されませんね ですから最初に 1 回 ランダムな位置に置かれた- リングが表示されたんです それ以降トゥイーンは一生懸命プロパティを きっと変えているんでしょうけれども それが描画されないので アニメーションされないということになります そうすると秒数をカウントして 毎回毎回 stage を update する という関数を書いて 何か設定をしなければいけないのかと そこまで面倒ではありません やはり TweenJS という仕組みを 用意したくらいですから それをカウンタに設定できる という方法があります その方法を使えばこの update は 必要がなくなるので消してしまって 新たに ここに書き加えます CreateJS でアニメーションさせる時 フレームあるいはパラパラ漫画の コマが切り替わる時の イベントというのがあります それは tick と呼ばれていまして Tick Tack の Tick ですね それを扱うクラスは Ticker クラス というものがあります その人にお願いします createjs.Ticker そしてイベントが起こったら 何々してくださいというのは 一般に addEventListener というメソッドで お願いすることになっています 長いのと Listener というのは ちょっと綴りが変わっているので 間違えないようにお気を付けください そして tick が起こったら イベントを文字で書き加えます tick というイベントです そうしたらこうしたよねと この後に一般には 関数を書くのですが 今回はともかくステージを アップデートするだけで良い こういう場合には stage に よろしくねということで stage と書けばそれでおしまいです ではファイルは保存します そしてブラウザーで確かめましょう ブラウザーでプレビューします ランダムな位置に表示されて 中央で止まります リロードしてみましょう リロードをすると 今度は右からきましたね もう 1 回くらい見ておきましょうか ちょっと移動距離が短いですね もう少し派手に動いてくれないでしょうかね 今度は大きく動きました こんな感じでステージ中央まで トゥイーンができました ではブラウザーを閉じましょう もっとも動きが何か 単調でつまらないですね トゥイーンというともうちょっと変化のある 動きが欲しいというところですが それはちゃんと用意されています メソッド to の引数 2 つ今 指定してありますが 3 つ目があります ここにイージングいわゆる値の変化の仕方を 指定することができます 指定をするのは createjs の Ease という イージングを指定するクラスで ちょっと面白いので バウンドにしましょうか bounceOut In とか Out とかあるのは In というのは頭で変化が生じます Out はおしまいの方で変化が生じます ですから正にバウンドのように 変化するはずです ファイルを保存して ブラウザーで確かめましょう ブラウザーでプレビューします 左上の方からバウンドのように 中心にトゥイーンしましたね もう 1 個くらい見てみましょうか 今結構動きが大きくて良かったですね 今度は小さいですね 大きくても小さくても トゥイーンの期間が一緒なので 大きい方が弾み方が 大きくなります 大きく弾みました 確認ができましたので では これでまとめに入りましょう ブラウザーは閉じます 先ずトゥイーンは関数で定めました この関数には引数に トゥイーンするつまり アニメーションさせるオブジェクトと 今回座標にしました x y 座標です それと どれくらいの時間をかけて トゥイーンするかというミリ秒数を 引数に受け取ります そうしたら先ず createjs.Tween.get で これでインスタンスが作られるのですが 引数にはトゥイーンする 対象のオブジェクト 引数 target を指定します その後の指定はこうしてああして というのはドットで繋いでいきます 今回は to を使いました to は先ずオブジェクトで どのプロパティをどんな値に 目標値として定めるのか ということを書いていきます 今回はこれは ステージ中央になっていますね 後は引数で 受け取りましたけれども どれくらいの時間をかけるのか というミリ秒数 そしてこれだけでも 一応トゥイーンは動くのですが 変化を付けさせたいという場合には イージングの指定ができます その指定は createjs.Ease の 様々なパラメータがあるのですが 今回は bounceOut バウンドのような変化を使いました

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

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

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

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

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

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