前回は,座標を考えるときは,どこから見た値なのか意識しなければならないことを説いた。そのうえで,自分を中心とした天動説のプロパティと,自分の存在する空間で考える地動説のプロパティとを区別し,地動説に基準を合わせて座標の計算を試みた。
今回はその続きとして,天動説を基準とした座標計算から始めよう。そして,減速しながら目的の値に近づくイージングのアニメーションについて解説したい。
天動説で座標空間を一致させる
まずは,前回確認した天動説と地動説のプロパティを区別せずに記述したスクリプトの例だ。自分の配置された親の座標空間を基準とする地動説のプロパティDisplayObject.xに,自分の基準点から見た天動説の座標を示すDisplayObject.mouseXプロパティの値が代入されている(図1)。
addEventListener(Event.ENTER_FRAME, xFollowMouse);
function xFollowMouse(eventObject:Event):void {
x = mouseX;
}
[ムービープレビュー]を見ると,代入式の両辺の基準が合っていないために,点滅したようなアニメーションになった。そこで,前回は地動説で基準を合わせようと,右辺のプロパティDisplayObject.mouseXのターゲットに親のタイムライン(DisplayObject.parent)を指定した。
しかし,今回は天動説を基準とするので,この右辺は変えない。そのうえで行う修正は,きわめてシンプルだ。先に結果を見てしまおう。
xfunction xFollowMouse(eventObject:Event):void {
x += mouseX;
}
代入の演算子が,普通の代入=ではなく,加算後代入演算子+=になっていることに注目してほしい。早速[ムービープレビュー]を確かめると,意図したとおりに,インスタンスがマウスポインタの水平座標に追随する。さて,演算子を変えただけで,なぜふたつのプロパティの基準が一致したのだろう。
たとえば,先日の箱根駅伝でランナーが,先頭走者に追いつこうとすると,まず相手の位置を知らなければならない。そのとき,ひとつは先頭走者のスタート地点からの位置を調べることが考えられる。もちろん,その位置は刻々と変化する。そこに可能なかぎり速く達しようとすれば,先頭走者に追いつくことができる。スタート地点からの位置というのは,地動説の基準である。
しかし,マラソンなどの場合には,もうひとつの情報の捉え方の方が端的だろう。それは,先頭走者と自分の間が,どれくらい離れているかを知ることだ。その差を速く走ることにより埋めれば,すなわち追いつくということになる。こちらが,天動説の基準になる。
DisplayObject.mouseXプロパティの値は天動説の基準で,自分の位置から見たマウスポインタの座標,つまりマウスポインタと自分との間の座標の差である。加算後打入演算子+=でその値をDisplayObject.xプロパティに代入するというのは,自分の現在位置にその差を足し込んで埋める処理になる。その結果,インスタンスはマウスポインタに追いつくのである(※1)。
わかったところで,水平・垂直座標を合わせて,インスタンスがマウスポインタに追随するスクリプトを,天動説基準で完成させよう(スクリプト1)。[ムービープレビュー]で確認すると,インスタンスがマウスポインタに追随する。
スクリプト1 MovieClipインスタンスをマウスポインタの動きに追随させる―天動説
// MovieClip: マウスポインタに追随させるインスタンス
addEventListener(Event.ENTER_FRAME, xFollowMouse);
function xFollowMouse(eventObject:Event):void {
x += mouseX;
y += mouseY;
}- ※1)
- たとえば,
DisplayObject.mouseXプロパティの値が100だったとする。それは,マウスポインタと自分との間の座標の差なので,その値100をDisplayObject.xに加算すれば,差がなくなって結果として追いつく(図3)。



