逆のeasingを作る
内部的には同じことになるのですが、見た目上二通りの方法があります。
方法1 - easeInとeaseOutの対象性に着目
easeInとeaseOutの対称性を利用する。easeInとeaseOutは時間軸に関して対称に移動させた関係になっています。 例えばcaurinaのEquationsの中での実装を見てみましょう。簡単のため2次関数をみます。
public static function easeInQuad (t:Number, b:Number, c:Number, d:Number, p_params:Object = null):Number {
return c*(t/=d)*t + b;
}
public static function easeOutQuad (t:Number, b:Number, c:Number, d:Number, p_params:Object = null):Number {
return -c *(t/=d)*(t-2) + b;
}
数学に強い方は標準変形とかして二つの関数がどういう関係なのかやってみるいいと思います。ここでは数式を忘れて、wonderflを使って図にしてみましょう。平行移動もついでにしてみました
一般的にeaseInは導関数が0からスタートして導関数が0でないポイントへいたるイメージで、 easeOutは導関数が0でないポイントからスタートして0になる点にいたるイメージなので、 この二つは時間軸に関して対称です。
方法2 - 対称移動と平行移動の組み合わせ
これは原理は方法1と同じですが泥臭くやってるだけです。ただこちらの方が機械的に出来るという利点があります。 ソースを見てみましょう。
private function getReverseFunction(easing:Function):Function {
return function(t:Number, b:Number, c:Number, d:Number):Number {
return easing(d - t, b, c, d);
};
}
これは与えられたeasingに対して逆のeasingを作る関数です。これを使って
まず最初にTweensyを使ってreverseしたeasingを使ってトウィーンさせます。 Tweensy.toなのにx座標はmaxXから0へと向かっていきます逆再生みたいな感じですね。 （こういうときのためにfromがあります。ちゃんとそれをつかいましょう!) その後にTweenLite.toをつかって同じことをしていますが、ここでちょっと差が出てきます。 Tweensyはトウィーン終了時にtoObjectに登録されている値にターゲットのプロパティーを設定しません。 一方TweenLite(たしかTweenerも)はトウィーン終了時に値を設定します。というのは、二回目の動きの挙動を みていただければ分かりますが、x座標はmaxXから0へ行って再びtoObjectで設定しているx座標の値maxXになります。 これは要はコマ落ちしたときに何が何でも最終の値に値を設定するかしないかという違いなのですが どっちがいいんでしょうか？ソースはしたになります。
var r:int = 30;
var maxX:int = stage.stageWidth - 2 * r;
var reverse:Function = getReverseFunction(Quadratic.easeOut);
var tweenlite:Function = function ():void {
TweenLite.to(_sp, 2.0, {x: maxX, delay: 0.5, ease: reverse});
};
Tweensy.to(_sp,{x:maxX}, 2.0, reverse, 0, null, tweenlite);
カスタムのeasingを作ってみる
上でやったこととと前回の合成とをあわせて 往復するeasingを作ってみましょう(作れるってだけです。onCompleteとかTweensySequenceを使ってやった方がお手軽かつ ソースの可読性があがります)
可読性の低いかなりマッチョなコードになってます。さて硬い話が続きましたが、僕の今回のeasing特集の目的はeasingで使っている関数を もっと色んなとこに使っていこうとか、むしろ自分でカスタマイズしてみようみたいなことなので、最後にeasingの関数を使った サンプルを2点ほど載せさせていただきます。まず最初にeasingで色の変化を調節してみるというもの。鏡面みたいな処理はしてなくって、HSV色空間でVの値を y方向にBounceを使ってバウンドさせています。ちょっと話が変わりますが、HSVとか自分で書いたりどこからコピペするのもめんどい！けれど、frocessingに 入ってるので超便利！！ガシガシ使ってきましょう。
最後にwonderflのHello, BetweenAS3!ライクなサンプル。 Hello, BetweenAS3!のコードを見ているとどうも現行のBetweenAS3とは仕様が変わっているみたいですね。こちらのサンプルは トウィーンする時間とディレイをeasingを使って計算しています。アニメーションが加速/減速します。
