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

ドラッグに合わせてインスタンスを傾斜、伸縮

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

ぜひご覧ください。

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

字幕

この HTML ドキュメントの JavaScript コードは キャンバス、ステージに画像を読み込んで それを Bitmap という変数に入れているんですけど ステージの中央に配置しています。 また一方でシェイプの丸いインスタンスを作って それを handle という変数に 入れているんですけれども 自由にドラッグできるようにしてあります。 そして現在のところ、そのドラッグに合わせて 画像を傾斜、斜めにひしゃげさせることが できるようになっています。 今出来上がっているところまでを、ブラウザで確認してみることにしましょう。 ファイルメニューから”ブラウザでプレビュー”します。 ステージの真ん中に配置してあるビットマップオブジェクトの 右上隅に青い丸。これがハンドルです。 垂直にドラッグするとこのビットマップの SkewY という傾斜させるプロパティを 操作して傾斜ができるようになっています。 水平にもハンドルはドラッグできるんですが、画像に対しては 水平の、伸縮の設定をしておりませんので、傾斜だけしかしません。 この傾斜に対して、さらに水平の伸縮を加えたいと思います。 ではブラウザのウィンドウは閉じて 簡単に現在のコードを確認することにしましょう。 画像のビットマップオブジェクトは変数 myBitmap。 それからシェイプの丸い青いハンドルは handle という変数に入れてあります。 Bitmap をつくり、それから handle は 関数で作っているんですけれど、その関数の中で ハンドルはシェイプで作っていますが Shape に対して addEventListener マウスボタンを押したらこの処理をしましょう とリスナー関数を定めてあります。 そのリスナー関数では、今度はマウスを動かしたら ド ラッグはマウスを押した後 動かさないとドラッグになりませんので マウスを動かしたら次の処理を行いなさい というリスナーに渡しています。 そしてそのリスナーの中で変形の処理を行っています。 ドラッグの処理を行うリスナー関数は もちろんハンドルの移動の処理を 行っているわけなんですが、それに加えて ビットマップ オブジェクトの変形を行う transformBitmap という関数を呼び出しています。 この関数の中では、傾斜の計算をするために 必要なビットマップの左上隅の座標と それからドラッグしているハンドルの座標を それぞれ Point インスタンスで Point オブジェクトでとっています。 そしてそれをさらにバケツリレーのように transform という関数にこの二つの座標を渡しています。 こちらがその受け取っている transform という関数です。 傾斜の計算はビットマップの左上と ハンドルの座標 それぞれX,Y座標の差をとります。 こちらがX座標の差。こちらがY座標の差です。 そしてその角度を定めるのが Skew というプロパティの設定なので 角度を求めます。 角度は JavaScript の Math クラスの atan2 というメソッドで求められます。 その時、Y座標を先に渡すことにご注意ください。 そして角度が求められるんですが 単位が radian になっています。 ところが SkewY に設定する角度の単位は 度数なので ラジアンから度数への変換の計算を行い 変換した度数の値をビットマップオブジェクトの SkewY というプロパティに設定しています。 これによって、ビットマップの画像が 垂直に傾斜しているというわけです。 ビットマップオブジェクトの垂直の傾斜は SkewY というプロパティで設定しました。 今度設定したいのは、水平の伸縮です。 その場合のプロパティは scale です。 そして水平方向なのでXということになります。 この水平方向あるいは垂直方向の scaleY も同じですけれども 元々の幅あるいは高さに対する伸縮後の比率になります。 ですから0.5とすれば半分、2とすれば2倍になるわけです。 非常に簡単そうに思えるのですがその前に 傾斜がかかって斜めになっていると ちょっと計算は単純ではありません。 ハンドルをあくまで完全に 垂直に動かして伸縮しようという場合でしたら 元の幅で伸縮後の幅を割り算すればいいです。 ところが、傾斜して斜めにしてしまった場合 この長さは元の長さなんですが この長さで割ったのではだめです。この長さではなく、それを水平に見た時ですね つまりどんどん下へひしゃげさせると この元の幅自体が縮んでいくという考え方になります。 ですからこの長さが例えば1だとすると 1をちょうど光を当てて影をつくったような この影の長さで割り算しなければいけません。 その場合、この長さは 三角関数を使って求めることができます。 この図は半径1の円です。 半径1の円のことを単位円と呼びます。 三角関数の定義というのは この単位円に対して、もし角度がθ そして直線を伸ばした時に この単位円と接する交点 交わる交点の座標をPとすると これを cosθ、sinθと定義しています。 つまり、原点から長さ1 角度θのX、Y座標は何かと問われた時 三角関数の定義から、X座標は cosθ Y座標は sinθ という風に決められているんです。 では長さが r で角度がθのときは、掛け算すればいいですね。 X座標が r×cosθ、Y座標は r×sinθ になります。 今回はX座標だけ計算するので、X座標は 長さ×cosθ という風に覚えておけばいいでしょう。 JavaScript コードに戻りました。 では、水平の伸縮率 scaleXを 計算するために必要な値を どんどん式で立てていきましょう。 まずは元々の画像の幅です。 ではこれを変数 imageWidth とします。 元々の読み込んだ画像 ビットマップのオブジェクトは myBitmap でとれるんですけど このビットマップには 元々の画像そのものは入っていません。 元々の画像は image という プロパティでとることができます。 そうすると、その image に 幅いくつですかと聞けばいいですね。 これでイメージの幅、元々の幅が求まります。 次にひしゃげた角度です。 これは、角度そのものは ラジアンと度数、両方とってあります。 今回使うのはラジアンですけれども それの cos を求めてあげればいいので 単純に cos の値を 水平方向ですから cosX にしましょうか。 そしてコサインは Math クラスの cos です。 この中に与えるのは角度、度数ではなくてラジアンの方なので radian を持ってきます。 そうしたら、これとこれを掛け算したら 斜めになった場合の元の幅が 求まるわけです。 そして、ハンドルでドラッグした時の 水平方向の幅は 画像の左上の座標と ハンドルの座標の差をとっています。 この値を使えばいいので イコール 伸縮後の幅はこちらです。ドラッグコピーします。 コントロールもしくはコマンドドラッグ。 そして割ることの 二つ掛け算したもので割るので、括弧を入れます。 元々の画像の幅かけることの cos です 掛けたもので割ります。 cosX は短いですけど、コピーしましょう。 ドラッグコピーです。 これで伸縮率が計算できます。 ビットマップオブジェクトに対する プロパティで まず垂直の伸縮率は 先ほどから設定されていました。 新たに加えたのが 水平の伸縮率 scaleX です。 この計算式も与えて 比率が正しく入っているはずですので 結果を確かめてみましょう。 ファイルを保存して ブラウザでプレビューしてみましょう。 画像右上のハンドルをドラッグすると 元の垂直の傾斜に加え 水平の伸縮ができるようになりました。 もちろん、組み合わせて 傾斜伸縮させることができます。 これでほぼ完成です。 では、ブラウザのウィンドウは閉じましょう。 “ほぼ”出来上がりと言ったのは 注意しなければならない事が一つあるからです。 三角関数の cos というのは 角度が90度になった時に 0 になります。 そうすると、この変数の値が 0 になり 掛け算した値も 0 になります。 そうすると、0 で割り算するということは 数学ではできませんし コンピュータでも よからぬことが起きる危険があります。 ですから、これを省かなければいけません。 省き方は簡単で単純な If 文です。 もしも 中括弧はじまり中括弧とじまで打ってしまいましょう。 そしてインデントも加えます。 もし変数 cosX(コサインX)の値が 0 でなければ ドラッグコピーします。 という場合は、これで構いません。 多くの場合 If 条件というのは 等しいとか大きい小さいを つけることが多いんですけれども 数値を括弧の中に定めた場合 数値が 0 のときだけ false ということで省かれます。 つまり、0 でなければ処理が実行されますので まさに今回の場合はこれで打ってつけです。 ファイルを保存しておきましょう。 動作は先ほどとは変わらないので このままおさらいに入ります。 今回のポイントは水平の伸縮率 scaleX の計算の仕方です。 普通は元々の幅で伸縮後の幅を 割り算すればいいんですけれども、 傾斜 SkewY が加わっているので ちょっと考慮が必要でした。 計算の仕方は、まず元々の幅 今回はビットマップオブジェクトの image プロパティで 読み込んだ画像のサイズをとり その中の幅を求めました。 これが元々の幅なんですが、傾斜した場合 その傾斜したコサインを とらなければいけないということでしたね。 ですから、傾斜した角度 radian を元に cos をとって 元の幅と cos の値の掛け算した値で 伸縮後の幅を割り算しなければいけません。 この伸縮後の幅というのは ビットマップの左上の point と こっちが左上ですね。それからハンドルのX座標。 引き算したこれが 伸縮後の幅ということになりますので それを割ることの 画像の幅 × cos ということです。

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

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

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

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

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

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