AnimateでHTML5 Canvasコンテンツをつくる

アニメーションにイージングを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マウスポインタを追いかけるインスタンスのアニメーションにイージングの減速効果を加えます。
講師:
07:57

字幕

この レッスンではインスタンスの アニメーションの動きが だんだん減速して遅くなるイージングと 呼ばれる効果をつけてみたいと思います。 今ステージの上にあるこのペンギンの ムービークリップインスタンスですが pen_mc という名前が付いています。 1フレームしかありませんが 歩くアニメーションがあって あとスクリプトも書いてありますが まずは先に動きを確認しましょう。 「制御」>「プレビュー」です。 そうするとマウスポインターの後を きっちりついてくる訳ですが これを少し遅れてだんだん近づいてくると いう形にしたいと思います。 そういう動きをイージングと言うんですが 特に近づくにつれて遅くなると いう動きはイーズアウトと呼ばれます。 イーズアウトの動きを作ってみましょう。 スクリプトのレイヤーの第1フレームに スクリプトが書いてありますので Aという印がありますね。 右クリックで アクションパネルを開いて確認します。 まずペンギンのインスタンスなんですが 先程確認した通り pen_mc 今このコードを書いているタイムラインで アクセスしたら それを変数に入れます。 名前は同じですけれども変数に この参照を入れたという事ですね。 そしてマウス座標の変数も設けておいて ステージに対して addEventListener で stagemousemove ステージの上で マウスポインターを動かしたら このリスナー関数を実行して下さい、と。 そしてリスナー関数が受け取る引数 eventObject は マウスポインターの XY 座標を持っていますので それを一旦変数に収めた上で その値にインスタンスの XY 座標を 一致させてるという事になります。 これをいきなり一致するんじゃなくて だんだん近づいていくという風に したいと思いますが その時に1つ加えなければ いけない事があります。 stagemousemove というのは マウスポインターを動かさないと 呼び出しがされないんですね。 つまりイベントが継続的に 一定間隔では起こりません。 だんだん近づいていくアニメーションと いう風にする為には このタイムラインを毎フレーム毎フレーム 一定間隔で動く 現在は 24fps になっていますので 1秒間に24フレーム動くわけですが これと同じような発生の仕方をする イベントが必要です。 それは実はありまして まずお願いする相手なんですが ちょっと特別です。 createjs.Ticker という これクラスなんですけども クラスというのは Math. という あのクラスと一緒ですね。 Math.sqrt なんかの場合ですね。 それと同じなんですが これは CreateJS の中のクラスです。 そしてこの人にお願いをすると addEventListener でお願いすると 毎回毎回一定間隔で、しかも デフォルトでは このフレームレートと同じ間隔で 発行してくれるイベントがあります。 それは何かと言うと tick というイベントです。 小文字で tick tick-tack の tick です。 そしてこのリスナーで処理をすれば 一定間隔で処理されます。 ではここではリスナーの関数名は followMouse にしましょう。 一旦コピーしておいて この後に function の ペーストして eventObject 今回の場合使わないんですが 一応受け取っておきましょう。 何かの機会に使うかもしれません、と。 使わないんですけども。 一応受け取っておくという方が 後々いいとは思います。 ここで マウスポインターを追いかけると いう処理を行えばいいわけです。 カットしてここにペーストします。 マウス座標は動いたとき調べて 変数に入れる訳ですけども アニメーションの方はマウスポインターを 動かそうが動かすまいが実行されると。 尤も、今はちびちびついて行きますから 動きは変わりませんが 動いていることを確認しましょう。 「制御」>「プレビュー」です。 マウスポインターの後を追いかけます。 マウスポインターを動かさなくても 今の tick のイベントを発生しているんですが 特に処理が変わらないので 何も目に見える結果が変わらないと いうことなんですが これを変えてみましょう。 イージングの効果を加える前に もう1つだけ、もうワンステップ 書き加えをします。 どういうことかと言うと マウスポインターの座標と こっちへ持ってっちゃいますね。 それからペンギンの 今 X ですから X 座標ですね。 pen_mc.x 差をとります。 このとった差を変数 また新しい変数名を付けます。 moveX にしましょう。 に入れます。 同様に move 勿論 Y ですね。 そして ( ) の中に mouseY を入れます。 そしてペンギンの Y 座標 差をとるわけですね。 そしてこのとった差を X 座標は x の方に コピーで持ってきます。 差をそのまま入れてしまったら おかしな処理になるので 差を足しこむ。 差があったら差を足しこむ。 差を無くすということですから 結果として同じ動きになるんですね。 ですから、ここまでは結果として 同じ動きなんですが コピーを持ってきて 同じ動きであることを まず確認しておきます。 「制御」>「プレビュー」です。 動きは変わらないですね。 ぴったりくっついてきます。 これで準備は整いましたので だんだん減速するイージングの効果を 最後に加えたいと思います。 どうするかというと、この式の右辺に 変数を掛け算します。 実はこの変数をまだ宣言してませんから 値が無いんですが とりあえず掛けてしまいます。 どんな値かなと ease という変数なんですが 考えてみますが まずこれが1だったら 変わらないですね。 掛ける1をしても変わりません。 0だったら、動かなくなりますね。 0から1の間の数字を指定します。 ではここで変数の宣言をして ease で 小さい方がわかり易いので 0.2 とします。 ではこれで確認しましょう。 「制御」>「プレビュー」です。 遅れてついてきますね。 速く動かすとペンギンが遅れてくるんですが でもしっかりついては来ます。 ついて来るに従って スピードが遅くなる だんだん遅くなる動きのことを イージングアウトという風に言いますので イーズアウトの動きが出来上がった訳です。 このレッスンでは目標に近づくに従って だんだんスピードが遅くなるイーズアウトの 動きの作り方を説明しました。 その前提として毎回毎回一定間隔で 発生するイベント tick なんですが Ticker に対してお願いします。 そしてイーズアウトの作り方なんですが 目標物との 差をとって そのまま差し込んでしまいますと ぴったり追いついてしまうので それに0から1の間の数字を掛け算する。 それによってだんだん近づくに連れて 遅くなる動きになるという事を説明しました。

AnimateでHTML5 Canvasコンテンツをつくる

Animate CCではPCやモバイル、Webブラウザなどさまざまなデバイスとプラットフォームに向けたコンテンツが作れます。またHTML5に対応したダイナミックでインタラクティブな表現が可能です。このコースはAnimateで作った素材をJavaScriptでどのようにスクリプティングするのかを基礎から解説します。

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

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

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

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