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

Canvas中央にリングを描く

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
EaselJSの描画メソッドでリングを描いて、Cavas中央に配置します。
講師:
13:07

字幕

EaselJS を使って Canvas の 真ん中にリングを描いてみます EaselJS には描画のための 使いやすいメソッドがありますので そのご紹介もします この HTMLドキュメントには EaselJS を使うための 最小限の準備だけしてあります 先ず body 要素には canvas 要素を置き id が定められています そして script 要素で CreateJS の EaselJS ライブラリを 読み込んでいます 次に body 要素では 最初に呼び出す 初期化の関数を定めています onLoad 属性です そうすると この関数が呼ばれます この関数の前に Stage オブジェクトを入れるための 変数の宣言がしてあります この Stage オブジェクトを作る所までが 最小限の準備です 先ず初めに canvas 要素の 参照を取ります canvas に付けた id をたよりに getElementById という メソッドで canvasElement の canvas 要素の参照が取れます それを引数にして CreateJS の Stage という クラスのコンストラクタを new 演算子で呼び出します そうすると Canvas 上に Stage というオブジェクトが 見えませんけれども作られて それが変数に入ります ここまでが準備です Canvas も Stage も 透明で何も見えません 見えるものとして リングを作りますので それを入れるための 変数を定めましょう リングでも良いのですが circle としておきます このオブジェクトを 初期化の関数の中で作ります circle = createCircle こんなメソッドがあるのかと ありません 作ります ということで function の createCircle これをコピーしましょう ドラッグでコントロールもしくは コマンドキーを押しながらコピーします そして中括弧始まり 中括弧閉じ どんな処理にするかは 後で考えますので これでリングが できたつもりです ただリングを作っても オブジェクトを作っても このままでは このリングのオブジェクトは コンピューターのメモリの中に 存在するだけです Canvas の上に置くには もう 1 つ処理が必要で Canvas に Stage というものが できています そして EaselJS あるいは CreateJS は この Stage を中心に色々 加えていくわけなのですが この Stage に circle を加えます 加えるメソッドはというと addChild 子どもとして加えるんですね Flash を使っていたことがある方は addChild 同じようなメソッドがありますね Flash と同じような感覚で 使えるというのが売りでもあります やはりドラッグでコピーします こうすると リングのオブジェクトがちゃんと見える形で 作られてさえいれば表示されます ですから後は実際に見えるように この createCircle という メソッドを完成させることになります せっかくわざわざリングを作る関数 createCircle を定めるのですから 少しカスタマイズできると 良いですよね 通常はパラメータ引数として 値を渡すとそれに従って バリエーションが作れる という風にすると便利です では先ずリングの太さ それからカラーですね カラーは 通常の CSS と同じような感じで 井桁で色はちょっと 暗めにする必要があります 後々の都合なのですが 113355 とします それからリングの半径ですね 大きかったり小さかったり 色々できるようにしたいです そして こういう 3 つの引数を 渡せるようにしたいな パラメータを 渡せるようにしたいなと思ったら 定義する関数の方も この 3 つの値を受け取る変数を それぞれ設ける必要があります 太さは stroke という名前にしましょう そしてカラーは color ですね それから半径は radius と言います これらを使ってこのパラメータ引数に 従ったリングを作るような 描画のメソッドをこの中に ステートメントとして書き加えていきます リングは EaselJS の オブジェクトとして作ります 何にしましょうか ということなんですが 変数に入れます circle という変数にしましょう Shape というオブジェクトがあります これを使うことにします インスタンスを新たに作る時は お約束事です new ですね そして Shape というのが クラス名なのですが createjs のクラスは全て頭に createjs が付くことになっています createjs ドット Shape です 括弧括弧 そして作ったオブジェクトは こちらで期待しているのは この変数に入れたいわけですね ですから戻す 作って返してあげるという 必要があります 返すというのは正に そのまま英語で return です return で circle これで Shape のインスタンスが 作って返されます 但しこの段階では まだ Shape も透明ですから ブラウザーで見ても何も見えません ここに何らかの 描画をしてあげる必要があります Shape オブジェクトに 描画をするのですが Shape オブジェクトにじかに 何か描くというわけではありません Shape オブジェクトが描画用の オブジェクトを持っています Graphics というんですが それは変数 myGraphics に入れましょう そして この Shape のオブジェクトから あなたが持っている描画用の オブジェクトをくださいということで Graphics というプロパティに アクセスします そうすると この Shape が持っている- 描画用のオブジェクトが この変数に入ります そうしたら描画ができるわけですね 描画のために 使いたいのは円を描くので これをコピーします drawCircle こういうメソッドを呼び出します その時に x y 座標 x と y それから circle 円の半径を渡しますが 引数で指定されていますので これを使います もっとも まだこれでは透明です 普通描画用のアプリケーションを使う時 何かを描こうとしたら 鉛筆とかバケツとか持ちますよね 鉛筆は線を描く場合です バケツは塗る場合です 今回はリングは太い線で描きますので その鉛筆をとるような感覚で どういう色の線を描くんだ という指定をします 線を描くんだ という指定は beginStroke Stroke が始まります ということですね コピーを使ってしまいましょう コピーをします そしてペースト beginStroke です 括弧の中には色の指定ができます 色は引数でもらっていますから またこれをドラッグしてコピーします コントロールもしくはコマンドです あと更に太さの指定もできます 引数で太さ もらっていますよね これは指定してあげないと いけませんので太さの指定は ここにまたペーストします そしてセットしますので setStrokeStyle です その線の太さを 指定しますが これは引数にもらっていますので こちらをドラッグコピーします ファイルを保存しまして ブラウザーで確かめてみましょう ブラウザーでプレビューします 何も描かれません CreateJS でアニメーションを 行う時には 1 つ重大な注意があります これは元々 Canvas の持っている 仕様なんですけれども Canvas というのは別段 アニメーションをさせるための 要素ではありません 機能ではありません ですから アニメーションというのは本来は フレームごとに描画を 書き換えることによって 絵が少しずつ変わって 動いて見えるんですよね ところが Canvas は そういう風に 一定のタイミングで描画するという 癖を持っていません そういう習慣がありません そして CreateJS もその仕様を そのまま受け継いでいます 無駄な描画をしないことによって 軽くしようという意図が あるんだと思いますけれども ということで先程の JavaScript コードには 画面を書き直せという命令を 付けなければいけません ではブラウザーを閉じましょう CreateJS ではこの命令は Stage に対してお願いします stage に update という メソッドを呼び出します もう一度ファイルを保存して ブラウザーで確かめます ブラウザーでプレビューです 今度はリングが描かれました どこにと思うかもしれませんが 左上に 4 分の 1 だけ見えていますね リングを書く時に x y 座標を 0 0 にしました そして 20 ピクセルの円ということですから こういうことになります 書く場所の x y 座標をずらそうかと そうしても良いのですが これは Shape オブジェクトですから オブジェクトの x y 座標を 中心に移せば Canvas Stage の 中心に表示することができます ではブラウザーを閉じます リングの Shape オブジェクトを このステートメントで作っていますから ここで間違えないように コピーしましょうね コピーして x y 座標を 指定すれば良いわけですが x 座標は x ですね そして Stage の真ん中というのは canvasElement の 幅の半分という風に考えます ですからこれをドラッグして コントロールもしくは コマンドドラッグで持ってきて この幅 幅は width です その半分ですね これをコピーしてしまいましょう コピーして 今度は y 座標に使います ペーストです y を width ではなくて height と すれば大丈夫です ファイルを保存して ブラウザーで確かめてみましょう Canvas の中央に リングが描かれました 確認ができましたので ブラウザーは閉じましょう ではまとめです 今回のポイントは Shape のオブジェクトを作って リングを描く この関数です Shape オブジェクトは 先ず new で createjs.Shape 括弧括弧でインスタンスを作ります そして描画をするには その Shape オブジェクトの Graphics というプロパティから Graphics の オブジェクトをもらいます それに対して drawCircle 四角も描けるんですけれども 今回は丸を描きました x y 座標と半径です ただ太さの指定とか 色の指定 これから線を描きますよという指定が Stroke の指定になります setStrokeStyle は線の太さ beginStroke は線で描きますよ ということと共に カラーの指定ができます そしてその指定で 円リングを描いたら その Shape オブジェクトを 返しています 返された Shape オブジェクトに 対しては 位置決めをして そして Stage の子として加えることにより 描画がされます 但し描画しなさいと言わないと Canvas の再描画がされないことに ご注意ください

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

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

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

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

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

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