drawTrianglesであそぼ3 モーフィングぽい表現

Dec 20, 2009

drawTriangles
wonderfl

さて、drawTrianglesであそぼの第３回。
今回は、drawTrianglesを使ってモーフィングっぽいアニメーションをさせます。
モーフィングとは絵と絵の間を補間して、スムーズに変化させる映像手法の１つです。
映像の分野では色々な場面で使われているおなじみの手法ですが、
前回、前々回で使ったクラスを応用して、モーフィング「っぽい」動きをさせることができます。

flash on 2009-12-20 - wonderfl build flash online

このような感じ。
画像と画像の間がつながっているわけではありませんが、左上を向いた猫がフクロウになる時に
こちらに振り返っているような微妙なつながり感があります。

方法

手法を解説しましょう。
モーフィングは、ようするに補間なので「前の画像から今の画像へスムーズに移動しましたよー」ということが
わかるようにアニメーションさせればよいということになります。
上記のサンプルで言うと、「猫が梟になる時に、猫がこっちに向き直って変化しましたよー」ということ。
ということは、左を向いていた猫が正面を向いていく、というアニメーションが必要になります。
これを前回のdrawTrianglesで、歪みを調整することで作ればいいのです。

必要なことは基本的に前回と同じで、遷移のタイミングでコントロールポイントを移動させます。
移動の考え方としてはこんな感じ。

・「顔がどこにあるか」でポイントの位置を調整する
・遷移前のポイント位置から遷移後のポイント位置へアニメーションさせる

このようにして、遷移前と遷移後のアニメーションに関連を持たせます。

こんな感じで、中央４つのポイントを移動させながら遷移すればいいってことですね。

コード

今回はfadeIn、fadeOut以外にもーいくつか改変があります。
とは言えまずはfadeOutメソッドを見てみましょう。

public function fadeOut():void {
 var i:int = 0;
 for each(var p:touchPoint in PtArray) {
  BetweenAS3.delay(
    BetweenAS3.tween(p,{x:_nextDistort.PtArray[i].baseX,y:_nextDistort.PtArray[i].baseY},null,1,Quint.easeOut),
      0.0*i
    ).play();
    i++;
  }
  BetweenAS3.tween(Distorter,{alpha:0},null,1,Quint.easeOut).play();
}

_nextDistort.PtArray[i]のbaseX, baseYプロパティに遷移していることがわかります。 _nextDistortは名前の通り、次のシーンのDistortUnitインスタンスです。これはsetNextメソッドで受け取ります。また、猫の画像とフクロウの画像でポイントの場所が違いますが、これはコンストラクタで受け取る引数で指定することにします。

private var distort1:DistortUnit = new DistortUnit("data/nuko_mini.jpg","TL");
private var distort2:DistortUnit = new DistortUnit("data/fukuro_mini.jpg","MC");

受け取った引数は_facePos変数に入れられ、さらにDistortインスタンスのsetDistortionメソッドに渡されます。最終的にDistortインスタンスのsetVerticesメソッドでこの引数による分岐の処理をしています。条件によってcoefX, coefYの値を変えて、「顔がどっち寄りか」を設定しているということです。

ex)