いつもAS3について考えているつもりなのに数学ネタに終始していて、ホント響かないエントリーを量産し続けるtaroであります。今回お送りするネタをまとめてみました。 flashならイージングだろってことで今回はeasing関数についてのお話をしようと思います。あ。結局関数なのね。そうです!


easing関数の使いどころ


今回はfl.motion.easing.*の使い方を考えてみます。 Tweenerだと、caurina.transitions.Equationsに入っている関数群、 TweenLite / TweenMaxだと、gs.easing.*にあるクラスに含まれる関数群も同じ働きをするので、 同様のtipsが使えます。

これらの関数は4つのNumber型の引数を取り、Numberを返します。

public static function easeOut(t:Number, b:Number, c:Number, d:Number):Number
引数
t現在の時間。0~dまでの値
b開始の値
c変化量
dトータルの時間
返値
 時刻tでの値

図で表すならば、下の図のグラフのx=tの所のy座標がQuad.easeOut(t, b, c, d)になります。

2次関数のグラフ

ではこれを使って、トウィーンのディレイやデュレーションを調整することによって 徐々に加速(失速)するようなアニメーションを作ってみましょう。

少し分かりにくいかもしれませんが、トウィーンの速さとディレイがeasingを使って計算されています。


easing関数を合成してみる


下の図のような二つの関数を

道fとg

単純につなげるだけなら、

fとgを合成した道

次の式みたいにすれば良いので、

fとgを合成した道の式

Quad.easeInにQuad.easeOutをくっつけてみましょう

public function myEasing(t:Number, b:Number, c:Number, d:Number):Number {
	if (t < d / 2) {
   		return Quad.easeIn(t, b, c / 2, d / 2);
	} else {
		return Quad.easeOut(t - d / 2, b + c / 2, c / 2, d / 2);
	}
}

そのままの式を使うと時間が2倍になっちゃうので時間軸は1/2倍にしてあります。 wonderflで図にしてみました。

書きたいことは沢山あるのですが、あんまり書いても長すぎるので今日はここまでで。 次回は

  • ・逆のeasingを作る
  • ・カスタムのeasingを作る

ということを紹介します。僕のwonderflのエントリにいくつか先駆けてつくってあるものもあるので気になる方はどうぞ。

HTML5飯