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

ハンドルに合わせてインスタンスを傾斜させる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ドラッグするハンドルの位置に合わせて、プロパティでインスタンスを傾斜させます。
講師:
13:49

字幕

無事に縦に傾斜ができました。 ステージの中央には ビットマップのオブジェクトが配置してあり 無事に縦に傾斜ができました。 ステージの中央には ビットマップのオブジェクトが配置してあり その右上隅に青い丸のシェイプ ハンドルが置いてあります。 このハンドルはドラッグすることができます。 そして垂直にドラッグしたときに、 このビットマップのオブジェクトを 斜めにひしゃげさせる、 つまり傾斜させてみたいと思います。 コードを書き始める前に 傾斜に使うためのプロパティやメソッド あるいは計算方法などについて 確認しておきましょう。 ステージに置かれたインスタンス ディスプレイオブジェクトを 水平に傾斜させるのが SkewX。 垂直に傾斜させるのが SkewY というプロパティです。 今回は縦に垂直に傾斜させますので SkewY を使います。 設定する値は角度で単位は度数です。 するとドラッグしたハンドルから 角度を求めなければいけません。 つまり座標から角度を求める必要が出てきます。 その時に使うのが Math クラスの atan2 というメソッドです。 渡す引数はY座標X座標。 Y座標が先ですのでご注意ください。 それからもう一つ、計算して返される値は角度。 単位がラジアンです。度数ではありません。 そうなると SkewY に設定するためには ラジアンから度数への換算が必要になります。 ラジアンから度数への換算は 180をかけて π で割ります。 逆に度数をラジアンにするときは π をかけて180で割ります。 ラジアンから度数への換算は 180をかけて π で割ります。 逆に度数をラジアンにするときは π をかけて180で割ります。 コードを書くにあたっては 頭の中で処理の流れ、手順を確認しておきましょう。 まずハンドルをドラッグします。今回は縦です。 そしてオブジェクトを傾斜させたいんですが その時に傾斜角を求めます。 この傾斜角を求めるときの座標というのは このビットマップのオブジェクトの 左上隅から見た ハンドルの座標ということになります。 そうすると、ハンドルの座標から ビットマップのオブジェクトの 左上の座標を引き算する必要があります。 そうして求めたX,Y座標を Math.atan2 に渡して角度を求めます。 けれどもそれがラジアンという値なので ラジアンを角度に換算して それをビットマップオブジェクトの SkewY というプロパティに設定する。 こんな流れになります。 それをビットマップオブジェクトの SkewY というプロパティに設定する。 こんな流れになります。 今開いている HTML ドキュメントの Javascript コードは、 画像をステージの中央に置き その右上隅に青いハンドルを置き ハンドルが ドラッグできる状態にまでなっています。 けれどまだハンドルをドラッグしても ビットマップのオブジェクトは変形しません。 それをこれから 書き加えていこうというわけなんです。 その前に今の流れだけ 簡単に確認しておきましょう。 まず変数ですが、Bitmap を入れる変数と handle を入れる変数が宣言されていて、 初期化の関するの中で それぞれが作られています。 そして handle を作る createHandle というメソッドはこちらにあります。 この中の関数で設定しているんですが ドラッグできるようにするために EventListener を登録しています。 Handle 用につくった Shape のオブジェクトに対して addEventListener でマウスボタンを押したら ドラッグをする準備をする関数を呼んでいます。 その準備をする関数が こちら startDrag です。 このドラッグを準備する関数 startDrag が 何をやっているかというと、 ステートメントはたった一行です。 マウスを動かしたら mouthmove という イベントに対して EventListener を登録しています。 そうしたらいよいよ本当にハンドルを動かす アニメーションのドラッグです。 その関数がこちらです。 この関数はまず ドラッグされているマウス操作の ターゲットとなっているインスタンス ハンドルを取り出して マウスポインタの座標を eventObject から調べて ハンドルのインスタンスに X、Y座標を設定しています。 そしてアニメーションですから 必ずステージの再描画 update という メソッドを呼び出さないと そしてアニメーションですから 必ずステージの再描画 update という メソッドを呼び出さないと 画面がアニメーションとして表示されません。 ドラッグしたら ビットマップを変形するという操作は このドラッグの関数の中から行ないます。 ただそれは別にした方が処理がしやすいので 関数を定めて呼び出すことにします。 関数名は transformBitmapです。 まだ定めていませんので、それを付け加えます。 この下に function でタイプミスをしないように コピーしちゃいましょう。 ドラッグコピーです。 コントロールまたはコマンドキーを押しながら。 そして中括弧はじまり中括弧とじということで 弧の中に処理を加えます。 手順の一つ目はビットマップの左上隅と ハンドルの座標との差をとることです。 差をとる前に、その座標を調べることから はじめないといけませんので、座標を調べます。 まずは出発点 画像のビットマップの左上隅の座標を point0。 もう何か新しい名前をつけるのが めんどくさくなってきました。 そして名前の通り ポイントオブジェクトで作ることにします。 new createjs.Point。 そしてこの中にX,Y座標を指定します。 この場合は、ビットマップのオブジェクトの 左上の座標です。 でももう一つ同じように ハンドルの座標を求めなければいけませんので ここでコピーしてしまいましょう。 コピーをして、そしてペーストです。 もちろん変数名は変えないといけませんので point1 という風にします。 この中にビットマップの左上隅の ビットマップの基準点のX,Y座標を入れます。 ビットマップは先ほど見たとおり myBitmap という変数が定めてあるので、 myBitmap の x、myBitmap の y です ハンドルの方は handle という名前で 変数を定めましたので 同じように handle の x、handle の y。 そしてこの差を求めて角度を求める という処理になるわけなんですが、 あまりもう欲張らずに もうここでまた別の関数にしてしまいましょう。 関数名は transform。渡す引数は 今定めた2つのポイントのオブジェクトです。 ドラッグコピーします。カンマの point1 と。 後の処理はこの人に任せたということですね 。ということで関数をまた定めます。 あまりケチらずに関数を作ってしまった方が 頭の整理ができていいです。 そして小分けにした関数をまとめるのは 簡単なんですが。ドラッグコピーします。 コントロールもしくはコマンドドラッグ。 小分けにした関数をまとめるのは簡単ですが、 だらだらと作ってしまった関数を 後でばらすのは結構大変です。 ですから小分けするという 癖をつけるといいと思います。 そしてここに実際の角度を求める計算を 書いていきます。 この関数 transform の中では 手順の二つ目としてビットマップの左上と ハンドルの座標の差を求めるのでしたね。 最も、いちいちビットマップのとか ハンドルのとか言わなくても この2つの差を求めるのだということです。 point0 から見た point1 ということなので point1 から座標を引き算することになります。 変数名はそれが分かり易いように point0 から見た1、まずX座標です。 そして point1 から引きますので point1 のX座標引くことの point0 のX座標と。 コピーしてしまったほうが楽ですね。 コピーをしてY座標についても同様に ペーストして、ここがそれぞれ皆Yになります。 差が求まりました。 その次の3番目の手順は、角度を求めるのですね。 ただし、角度は Math.atan2 を使うと ラジアンになってしまうので、 分かり易いようにラジアンだという単位なので、 変数もラジアンにしてしまいます。 そして Math.atan2 。 渡す引数の順番をお気をつけください。 Y座標が先です。Y座標、ドラッグコピーします。 ちょっと変数名が長くなってきましたから タイプミスが怖いので、ドラッグコピーです。 コントロールもしくはコマンドドラッグ。 これで角度が求まりました。 もう少しですね。 ラジアンから度数に直します。 度数に直したら普通に角度なので angle という名前にしてしまいます。 そしてこのラジアンの値を ラジアンから度数はドラッグコピーします。 かけることの180割ることのπ。 π は Math.PI という定数になっています。 あと一行です。この値を myBitmap の SkewY に設定すればよいでしょう。 アニメーションの場合には必ず ステージのアップデート 描画更新をしなければいけませんが でももう一度見直してみると この関数は transformBitmap から呼ばれています。 transformBitmap は drag の listener から呼ばれています。 そして呼び出した後 ステージのアップデートを行なってますね。 ですから アップデートの方はもう心配いりません。 ファイルを保存する前に 一箇所タイプミスがありますので直します。 myBitmap ですね。 ではファイルを保存しましょう。 ファイルメニューから保存です。 そして”ブラウザーでプレビュー”しましょう。 ビットマップのオブジェクト 画像の右上にあるハンドルを 垂直にドラッグすると、 ビットマップのオブジェクトが 傾斜します。 ただし、水平に持っていっても広がりません。 広げるのはスケールの変更になりますので 別処理です。 今行なったのは垂直方向の角度に従って ビットマップのオブジェクトを傾斜させる という処理です。 ではブラウザを閉じて おさらいをしましょう。 今回の処理の始まりはハンドルを ドラッグしたときのリスナー関数です。 Drag という関数です。 上の表示がちょっと邪魔なので閉じます。 この関数でインスタンスの ハンドルのドラッグが行なわれます。 その時にビットマップの オブジェクトの変形を行なうため 関数を定めました。 それがこの transformBitmap です。 この関数は、まず簡単に bitmap の基準点 左上隅の座標とハンドルの座標 それぞれを new createjs.Point ということで point オブジェクトにして X,Y座標をそれぞれ定めて その上で次の処理は また次の関数にまかせています。 transform、渡す引数は 画像の左上隅の point とハンドルの point の また次の関数にまかせています。 transform、渡す引数は 画像の左上隅の point とハンドルの point の 2つの point オブジェクトです。 それをこの transform という 関数が受け取ります。 そうしたら、画像の左上隅と ハンドルとの座標の差を求めます。 ですから、point1 のX座標から point0 のX座標を引いたものをX座標の変数 point1 のY座標から point0 のY座標を引いたものを Y座標の変数にそれぞれ入れました。 そうしたら、この2つのX、Y 座標を使って 角度が求められます。 それは Math.atan2 というメソッドですけれども ここに2つの座標を渡します。 順序がY、Xの順番であることに お気をつけください。 そして、単位はラジアンなので それを度数に換算します。 180をかけて π で割ればいいということで 求まった角度をビットマップのオブジェクトの skewY というプロパティに設定して

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

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

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

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

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

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