初めて学ぶCreateJS

インスタンスに回転のアニメーションを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
アニメーションにはTickerクラスを使います。Ticker.addListener()メソッドにリスナーオブジェクトを渡して、その関数としてアニメーションを定めます。
講師:
05:35

字幕

shape インスタンスに星形を描いて アニメーションとして回してみます アニメーションを扱うには ticker クラス というものを学ぶ必要があります この html ドキュメントの JavaScript コードは 星をとりあえず描いただけです まだ回っていません ざっと確認しますと 最初に呼びだされる initialize という関数の中で canvasElement を取り出し Stage を作り shape インスタンスを作ったら stage に shape インスタンスを 子供として加えています そして位置調整をしたのち draw という関数を呼び出し 引数には graphics オブジェクト shape インスタンスの graphics オブジェクトを渡しています そこに線と塗り色を定めて drawPolyStar メソッドで 星形を描いています これをどのように動かすか ticker クラスについてご説明しましょう アニメーションというのは 一定間隔でオブジェクトを変化させ それを描画する ということを意味します そのアニメーションを行いたい時には Thicker.addListener というメソッドを呼び出して その引数にアニメーションの 処理を行うオブジェクト これをリスナーオブジェクト というふうに呼ぶんですが それを渡します Ticker.addListener メソッドに渡された リスナーオブジェクトに対しては tick イベントが呼びだされます tick イベントが呼び出されるというのは 別の言い方をすると このリスナーオブジェクトに定めた tick という関数もしくはメソッドが 一定間隔で呼びだされることを意味します ですから次にリスナーオブジェクトに tick という関数あるいはメソッドを定義して その中にアニメーションとして 行いたい処理を書き加えれば良い ということです 今回のサンプルでは tick 関数は この script 要素に JavaScript コードとして 加えることにします function で tick という名前で これは名前が決まっています 関数を定め やりたいことは shape を回します shape は function の外で var 宣言されていますので tick の関数の中からも アクセスが可能です 回転をさせるには rotation プロパティに対して 角度を加算します 「+=」という記号 演算子は加算ということを意味します 5度 rotation の角度は度数ですので 5度加算します さてそれでは ticker.addListener の メソッドを呼び出してオブジェクトを登録します createjs を忘れないように Ticker ですね そして addListener Listener の綴り ちょっと難しいので 間違えないようにして下さい さて ticker.addListener メソッドの引数には どのオブジェクトを渡したらいいでしょうか tick 関数を定めたオブジェクトです tick 関数は script 要素の 中に書いています この場所を司るのは ウィンドウというオブジェクトです ですからここに window と書きます これでいいでしょうか 保存を押して確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」です キャンバスに星形は描かれたものの 一向に動く気配はありません 実は大事なステートメントを 一行書き忘れています それを書き加えましょう ステートメントが足りないのは tick 関数です アニメーションというのは オブジェクトに変化を与えて 描画しなければいけません 描画するには大事な ステートメントがありましたね stage.update です コピーします ですから tick 関数 tick メソッドを使う時には 忘れないように必ず stage オブジェクトに対して update メソッドを呼びだして下さい では改めて保存して 確認しましょう 「ファイル」メニューの 「ブラウザでプレビュー」です 今度は星形がちゃんと回りました tick イベントはデフォルトでは 一秒間に20回呼び出されます このサンプルで学んだのは ticker クラスを使ったアニメーションです 具体的には ticker.addListener メソッドを使って リスナーオブジェクトを登録し そしてリスナーオブジェクトに定めた― tick 関数 tick メソッドによって イベントを受け取るという方法でした

初めて学ぶCreateJS

このコースではCanvasへの簡単な描画からTweenJSによるトゥイーンアニメーション、PreloadJSでの外部画像ファイルの読み込みやSoundJSでのサウンドの再生などのさまざまな種類のスクリプティングについて解説します。さらにEaselJSでのマウスによるインタラクティブな操作やフィルタを使った動的な表現なども紹介します。

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

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

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

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