easingを使い倒そう
いつも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)になります。
ではこれを使って、トウィーンのディレイやデュレーションを調整することによって 徐々に加速(失速)するようなアニメーションを作ってみましょう。
少し分かりにくいかもしれませんが、トウィーンの速さとディレイがeasingを使って計算されています。
easing関数を合成してみる
下の図のような二つの関数を
単純につなげるだけなら、
次の式みたいにすれば良いので、
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のエントリにいくつか先駆けてつくってあるものもあるので気になる方はどうぞ。