CreateJS実践講座

簡単なトゥイーンアニメーションをつくる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Tweenクラスを使って、Shapeオブジェクトに簡単なアニメーションを加えます。
講師:
09:44

字幕

このレッスンではトゥイーンクラスを使った 簡単なトゥイーンアニメーションの 作り方をご紹介します トゥイーンクラスというのはトゥイーンJS というライブラリの中に入っています ですからこのライブラリを あらかじめ読み込んでおく必要があります トゥイーンクラスを使うと簡単にプロパティの トゥイーンのアニメーションを 作ることができます 例えば今画面でお見せしているのは 位置と それから回転の度数 この2つのプロパティを トゥイーンさせています Dreamweaverで開いたのは トゥイーンクラスを使わずに アニメーションさせている htmlドキュメントです その動作を確認する前に先にトゥイーンJSの ライブラリを読み込んでしまいましょう 基本的にはCDNから読み込みますので これと同じ書き方です コピーして ペーストして もちろんライブラリの名前は違います E0JSじゃなくてトゥイーンJS そして最新版が0.6.0になります もちろんまだトゥイーンクラスは 使っていませんので スクリプトには影響ありません 現在のスクリプトの 回転アニメーションを確認しておきましょう ファイルを保存してブラウザでプレビューです shapeに書いた星形が その場で回転しています tickerクラスを使って 単純なアニメーションですけれど行っています これをトゥイーンクラスを使った アニメーションに書き換えたいと思います DreamWeaverに戻りましょう このhtmlドキュメントでは tickerクラスを使って addイベントリスナーでtick event に rotateというリスナー関数を設けています そしてそのリスナー関数は myShape ここにshapeオブジェクトが 入っているのですが そのローテーションを 毎回毎回5度ずつ回転しています もっともトゥイーンクラスを使う場合も ステージアップデート これは行う必要がありますので このローテーションは トゥイーンで行うのですけれど はずしました stage.update これだけ残しておきます ですからtickerにイベントリスナーを登録して stageをupdateすると この作業だけはtickerでなくて トゥイーンクラスを使う場合も必要です これは残しておいてください そしてトゥイーンクラスを使う 呼び出し関数を定めますので 関数の呼び出しを行います setTweenという関数にしましょう まだ作っていません こういう関数が欲しいなということです その関数には何を動かすのか トゥイーンで廻すのかという 引数を渡すことにします それはshapeですので このmyShapeという変数に入った shapeオブジェクトを渡して setTweenという関数を これから定めて呼び出します ではここにfunction set tween そして何を廻すのかという targetを受け取ります targetという引数名にしました では トゥイーンクラスのオブジェクトを作ります myTweenという変数にして オブジェクトの作り方は原則どおりです newでcreateJS これはcreateJSのクラスには必ずつきますね そしてtweenと このトゥイーンのコンストラクターには 何を動かすのかという targetを渡します コピーして引数に置きました さてこの後 このmyTweenに対して どういうふうに動いてね というメソッドを呼び出します またコピーしまして どういうふうに動いてねと toという非常に簡単なメソッドです この中でまず{  オブジェクトですね このオブジェクトの中に どのプロパティをどういうふうに 変えてほしいのかという設定をします じゃあY座標を動かしましょう どこまで動かすかというと ステージの下まで動かしたい ステージの下端の値というのは stageHeightということで キャンバスから値を受け取ってますから これを使いましょう ステージの下端まで動きましょう ということで コピーをして持ってきます その後 何秒かけてトゥイーンをするのかと 厳密に言うとミリ秒なので 5秒かけたいと思ったら5000とうちます それから下端まで動くんですけれど スタートはどうしようというと やはり一番上がいいですね なのでshapeオブジェクトのY座標が 真ん中になっていますけれど これは0にしてしまいましょう stageHeight ステージの高さの半分というのは コメントアウトしました これで確認してみたいと思います ファイルを保存して ブラウザでプレビューします 上から落ちてきて 下まで行って止まります おしまいです でもちゃんとトゥイーンができましたね ではまた少し違う設定を入れますので Dreamweaverに戻りましょう 今度はさらに星を廻します やはりこの オブジェクト{}の中に カンマ区切りでプロパティと値を繋げていけば 複数のプロパティをトゥイーンできます rotationが角度ですね 回転角 これを360度廻します ではまた確認してみましょう ファイルを保存して ブラウザでプレビューです 今度は回転しながら上から落ちてきます ではもう少し行動に手を加えます 行動を整理しながら手を加えていきましょう まずコメントアウトした所は 邪魔なので消します あとこのリスナー関数 rotateになっていますけれど リスナー関数でrotateするわけではありませんので まぎらわしいので名前も変えます コピーしましてペーストして Tickという名前にしてしまいましょう あとアニメーションなんですけれど 最初0からスタートします ところがshape instanceの0というのは 星の真ん中ですから 端がちょっとでてしまってますね それを完全に見えない状態にしたいです 実は星の半径は ここに変数として設けてあります この変数の値を drawというメソッド 星を描くメソッドに渡して  半径が40という星形を描いてますので この半径が使えますね これをコピーして その半分だけ上に引っ張ります つまりマイナスですね マイナスの二分の一と 同様に下に落ちたとき端がめり込んでます めり込まないように 引っ張りたいと思いますので ここで使いましょう -myRadiusをtween.to Y座標なんですけれど ステージの高さそのままですと めり込んでしまうので 上に引っ張ります 半径分だけ引っ張ります ということで確認してみましょう ファイルを保存して ブラウザでプレビューします 消えた状態からでてきて 下に沈みません これで簡単なトゥイーンアニメーションは 完成しました このレッスンでは トゥイーンクラスを使った簡単なトゥイーン アニメーションの作り方について説明しました トゥイーンクラスは まずトゥイーンの ライブラリを読み込んでおく必要があります tweenJSです そのうえで トゥイーンはnew createJS.tweenということで トゥイーンする対象となる オブジェクトを引数に渡します そしてそのトゥイーンオブジェクトに対して toというメソッドで この中にどのプロパティを どういう値にしたいのかという設定を加えます 複数のプロパティが設定できますので その場合にはカンマ区切りで設定してください 二番目の引数はトゥイーンにかける時間 ミリ秒で設定します それからトゥイーンの場合も stageの更新というのが必要ですので tickerにaddEventListenerでtick eventで stage updateを行うことを 忘れないでください

CreateJS実践講座

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

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

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

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

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