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

インスタンスの傾斜と角度の計算

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
インスタンスには傾斜のプロパティがあります。その値の決め方を確かめます。
講師:
03:34

字幕

CreateJS を使って インスタンスを斜めに傾ける、 いわゆる傾斜の処理をしたい時に 使うプロパティと その計算の仕方についてご説明します。 ステージに置かれたインスタンス いわゆる DisplayObject を 斜めに傾けたいというとき 水平に傾けるのが SkewX です。 それから縦に垂直に傾けるのが SkewY です。 プロパティの値としては 傾ける角度を度数で決定します。 ドラッグに合わせて オブジェクトを傾斜させようと思った場合 マウスポインタの座標から その角度を調べなければいけません。 座標から角度を調べるメソッドは Math クラスの中に収められています。 メソッドの名前は Math.atan2 ちょっと変わってますね。 atan の tan は タンジェントを意味しています。 そして a がつくと アークタンジェントと呼ばれるんですが アークタンジェント2という関数は 数学にはありません。 これは座標から角度を求める Math クラスの特別な関数です。 由来がタンジェントというだけです。 ただし引数に注意してください。 座標はY座標が先で2番目にX座標と Y座標、X座標の順番ですので お気をつけください。 インスタンスの傾斜の計算で Math.atan2 を使おうとしたとき もう一つ気をつけなければならないのは 角度の単位です。 atan2 の返す角度というのは 度数ではなくラジアンという角度です。 ラジアンについて ちょっと確認しておきましょう。 図は半径1の円です。 半径1の円のことを単位円と呼びます。 ラジアンというのは この図にある角度θを表すときに 半径1の円の弧の部分 この青い所の長さで示すのがラジアンです。 すると度数の360度は 半径1の円の円周に等しいわけですから 360度は2πラジアンということになります。 ラジアンと度数の換算の式も 知っておくといいでしょう。 ラジアンを度数にするには ラジアン×(180/π)です。 逆に度数からラジアンにしたいときは 度数×(π/180)ということになります。 では傾斜と角度の計算についてまとめましょう。 まずクリエイトJSの ディスプレイオブジェクトインスタンスの 傾斜のプロパティは水平方向が SkewX 垂直方向が SkewY です。 角度で設定します。 角度は360度を基準にした度数です。 そして座標から角度を求めたいとき これは JavaScript の中にメソッドがあります。 Math クラスの Math.atan2 です。 引数がY座標、X座標の順番になることに お気をつけください。 もう一つこの場合には、Math.atan2 が 返す角度は度数でなくラジアンです。 そうするとラジアンと度数の換算の式が 必要になりますので ラジアンから度数の場合は、ラジアン×(180/π) 逆に度数からラジアンは、度数×(π/180)です。

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

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

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

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

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

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