CreateJS実践講座

Shapeオブジェクトをアニメーションで回転する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Tickerクラスを使って、Shapeオブジェクトに回転のアニメーションを定めます。
講師:
05:27

字幕

このレッスンでは Shape オブジェクトに 回転のアニメーションを与えます 画面の星形は Shape オブジェクトに描かれています そして その Shape オブジェクトを CreateJS の Ticker クラス というクラスを使って 回転させています その方法についてご紹介します Dreamweaver で開いたのは まだ 星形を描いただけで 回転のアニメーションを加えていない html ドキュメントです 星形はこの関数で描いていて ランダムなカラーを定めて その塗り色で Shape に星形を描いています Shape は Stage 上に置かれています これに回転のアニメーションを 加えれば回転するのですが 現在の所は まだ止まったままです 一応 確認しておきましょう 「ファイル」から 「ブラウザでプレビュー」です カラーはランダムに定まりますので ロードしなおす度に 色が変わります では これに回転の アニメーションを加えましょう アニメーションの設定は 最初に呼び出される関数 initialize の中で行うことにします ここに加えましょう クラスは createjs の Ticker というクラスです Ticker というのは Tick-Tack の Tick から どうやら来ているようです 一定の間隔で何かを実行したい時に それを扱うクラスということになっています そのクラスに対してお願いをします addEventListener これは JavaScript コードで よく使われるものです (何々)が起こった時に (これ)をやってください という 2つの引数を渡します 何々が起こった時というのは イベントと言われるものです このイベントは先ほどの Tick-Tack の Tick です 定期的に呼び出されるイベントになります これに対して 何を行ってください というのは 関数の名前を指定します まだ 関数と定義していませんけども rotate とします 回すので rotate です addEventLintener というメソッドで Tick イベントの時に rotate の関数を実行してください という記述です では rotate を定めましょう function の rotate そして addEventListener で イベントに対して登録した関数のことを リスナー関数と言います リスナー関数は呼び出されると 引数を1個受け取ることになっています その受け取るオブジェクトのことを 一般にイベントオブジェクトと言うので eventObject という引数を加えておきます これは使わないのですが 念のためということです そして 呼び出されたら どうしたいかというと 回したいです 回したいのは Shape の入っているこの変数に 入っているオブジェクトです 回転のプロパティは rotation です そして 呼び出される度に 5度回転角を加えるということで 実はこれでまだ 1個足りないのですけれど 確認してみましょう 何が足りないのかも分かると思います 「保存」を押して 「ブラウザでプレビュー」です 回りません 何が問題かというと キャンバスと言うのは 描画を書き換えることを お願いしないとやらないのです 星形を描いた後 一回お願いしています けれど 回した後 描画を更新してください と言うメソッドを呼び出していません ですから 内部的には きっと回転しているのでしょうけれど それが画面に見えてこないということです では Dreamweaver に 戻りましょう 星形を描く関数 draw を呼び出して星形を描いた後 キャンバスに描画してください と お願いしたメソッドはこれです stage に対して update という メソッドを呼び出しています これをコピーすれば良いので コピーして この rotate が呼び出される度に update (アップデート)しましょう となります これで良いでしょう 「ファイル」を「保存」して 確認します ブラウザをプレビューです 「ブラウザでプレビュー」しましょう 回転するようになりました このレッスンでは 星形を描いた Shape オブジェクトに 回転のアニメーションを加えました そのための方法は createjs の Ticker というクラスに対して addEventListener というメソッドで イベントに対するリスナー関数を登録して お願いすることになります イベントは tick 定期的な間隔で生み出されます そして やって欲しいことは 関数で指定します rotate という関数をここに指定して その関数がイベントが発生して 呼び出される度に 5度回転角を増します 忘れてはいけないのは 必ず 描画を更新するための update というメソッドを呼び出すことです

CreateJS実践講座

CreateJSは、これまでFlashでしかできなかったようなインタラクティブなコンテンツや多彩なアニメーションを作ることができるJavaScriptライブラリです。このコースではチャプターごとにJavaScriptコードのサンプルをひとつずつとりあげながら、その制作方法を一歩一歩段階的に解説します。

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

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

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

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