drawTrianglesであそぼ、第２回です。
前回は、とりあえず使ってみるということでdrawTrianglesを扱うためのクラスを作り、適当にエフェクトを作ってみました。
今回は前回の仕組みを利用し、ちょっとおしゃれっぽく見えるエフェクトを作ってみます。

考え方

とは言っても、前回でdrawTrianglesを扱うクラスを作ってしまっているので、エフェクトのバリエーションを増やすにあたって工夫するポイントはDistortUnitクラスのfadeIn、およびfadeOutメソッドだけです。

前回のコードを見るとこのようになっています。

public function fadeOut():void {
    var i:int = 0;
    for each(var p:touchPoint in PtArray) {
         BetweenAS3.delay(
              BetweenAS3.tween(p,{$x:-100+200*Math.random(),$y:-100+200*Math.random()},null,1,Quint.easeOut),
              0.02*i
         ).play();
         i++;
    }
    var alphaTween:ITween = BetweenAS3.tween(Distorter,{alpha:0},null,1.5,Quint.easeOut);
    alphaTween.addEventListener(TweenEvent.COMPLETE, alphaTweenCompHandler);
    alphaTween.play();
}
private function alphaTweenCompHandler(event:TweenEvent):void {
      event.target.addEventListener(TweenEvent.COMPLETE, alphaTweenCompHandler);
    var coefY:Number = 300*Math.random();
    for each(var p:touchPoint in PtArray) {
         p.x = bmp.width/2-10+20*Math.random();
         p.y = bmp.height/2-10+20*Math.random();
    }
}
public function fadeIn():void {
    var i:int = 0;
    var p:touchPoint;
     
    for each(p in PtArray) {
         BetweenAS3.delay(
              BetweenAS3.tween(p,{x:p.baseX,y:p.baseY},null,0.5),
              0.6*Math.random()
         ).play();
         i++;
    }
    BetweenAS3.tween(Distorter,{alpha:1},null,1).play();
}

BetweeenAS3を使って頂点クラスをアニメーションさせてます。
今回は、この頂点クラスの動かし方を工夫することで、前回の何も考えていないエフェクトから１歩前進させてみます。

ふわっと剥がれる雰囲気のエフェクト

まず１個目は、シンプルだけど小技が効いてる雰囲気で、少しだけ歪ませてふわっと剥がれるような感じの演出にしてみます。

fadeOutのメソッドの肝は、ここ。

BetweenAS3.delay(
   BetweenAS3.tween(p,{$x:200,$y:-100},null,0.5,Quint.easeOut),
   0.02*i
).play();

これはfor文で頂点ポイントの配列を１個１個巡回して実行していて、「p」が巡回中の頂点になります。
また、配列には図のような形で、左上から順番に頂点が入れてあります。この状態で移動先を {$x:200, $y:-100}としており、BetweenAS3においては$つきのパラメータは相対位置を示します。

これをすべてのポイントに対して設定するため、fadeOut完了時の表示としては単純に画像が移動した状態になります。

画像の歪みを発生させているのは、ディレイ間隔に 0.02*iを設定している部分です。
この設定により、右下のポイントほど遅れて遷移がスタートすることになり、結果としてふわりと画像が浮いたような雰囲気に歪むことになります。
fadeInのメソッドも、ほぼ同様の処理をしています。

BetweenAS3.delay(
    BetweenAS3.tween(p,{x:p.baseX,y:p.baseY},null,0.5,Quint.easeOut),
     0.02*i
).play();

ジニーエフェクト系のエフェクト

ジニーエフェクトは以前大きく話題になっていましたが、この動きもfadeIn, fadeOutのアニメーションの設定を工夫することで、このようにある程度再現することができます。

まずfadeOutを見てみましょう。
サンプルでは１点に吸い込まれるような動きをしていますが、この処理はこのようなコードになっております。

BetweenAS3.delay(
   BetweenAS3.tween(p,{x:220,y:0},null,0.2),
   0.01*i
).play();

x:220, y:0のまさに１点に移動するだけ。
これだけでちょっとOSXぽい雰囲気で、いい感じです。

次にfadeOut。こちらは画面下のランダムな位置からふわりと出てくる印象です。
OSXのDocsにしまっていたウィンドウを出す感じですね。
コードはこちら

var xparam:Number = ( i%cutNum ) / cutNum;
var yparam:int = ( i/cutNum );

BetweenAS3.delay(
   BetweenAS3.tween(p,{y:p.baseY},null,1.5,Quint.easeOut),
   yparam*0.1/2
).play();

BetweenAS3.delay(
   BetweenAS3.tween(p,{x:p.baseX},null,2,Quint.easeOut),
   yparam*0.1
).play();
i++;

ジニーエフェクトをスローで見るとわかるのですが、頭が先に伸びていって後半はゆっくりそれに追随するような動きをします。このコードはそのあたりを考慮しています。
cutNumは横／縦共通の分割数。yparamとしてi/cutNumが設定されていますが、これで各ポイントが縦何%くらいに位置しているかを取り出しています。
ディレイの設定にこのyparamを使い、さらにxとyのタイミングをずらす意味でyのディレイを2で割る、、つまり遷移開始の速さを倍にしています。
xparamは使うかと思ったら特に必要なかったようです。

こうすることで、ジニーエフェクト風の動きにできます。

・
・
・

以上、いかがでしたでしょうか。drawTrianglesを使いこなすと、手がこみつつも陳腐化しない、いい感じのフェードエフェクトが作れるんではと思います。

次の第３回では、これを利用して簡単なモーフィングアニメでも作ってみることにしましょう。
ではでは〜