Home > papervision3d > Papervision3DとTweenerで2.5Dアニメーション その２

Papervision3DとTweenerで2.5Dアニメーション その２


前回のエントリの続きで、もうすこしマシな2.5次元アニメーションを作ってみました。
クリックするとadamrockerが奇麗にグチャっとなります。
動作が分かりやすいようワイヤーフレームを横に出しています。

アニメーション部分

クリックするとアニメーションするようになっています。
クリックの動作を定義しているメソッドは以下の通りです。

//--------------------------------------------mouse click
private function clickObj (e:MouseEvent):void {
  var arr:* = obj.geometry.vertices;
  var wires:* = wireObj.geometry.vertices;
  if(isTween) { 
    movePoints(arr, 30, 40);
    movePoints(wires, 30, 40);
    isTween = false;
  }else { 
    movePoints(arr, -30, -40);
    movePoints(wires, -30, -40);
    isTween = true;
  }
  scene.renderCamera(camera);
}

movePoints()メソッドが各格子点を動かしています。
movePoints()メソッドは以下のようになっています。

private function movePoints(arr:*, y:Number, z:Number):void {
  var num:Number = 0;
  for each(var o:* in arr) {
    var diffZ:Number = 0;
    var tmp:int = (num / (segment + 1));
    if((num + tmp) % 2 == 0) {
      diffZ = z;
    }
    var diffY:Number = (num % (segment + 1)) * y;
    movePoint(o, 0, diffY, diffZ);
    num++;
  }
}

第一引数には格子点が格納された配列です、第二引数はy方向の移動量で、第三ひきすうはz方向の移動量です。
x方向へは移動しませんので、この関数では定義していません。
for eachスコープの中では、ちょっとした細工をしています。こういう計算で関数をシンプルにするのがプログラミングの楽しいところですよね。ちゃんと下から偶数段の格子だけがz方向に飛び出してくるようにしています。

Tweenerで実際に格子点を移動させるのはmovePoint()メソッドです。
これは以前と同じメソッドで、以下のように定義しています。

private function movePoint(p:*, diffX:Number, diffY:Number, diffZ:Number):void {
  Tweener.addTween(p, {
                        x:(p.x + diffX), 
                        y:(p.y + diffY), 
                        z:(p.z + diffZ), 
                        time:1, 
                        delay:0,
                        transition:"easeOutElastic"});
}
おわりに

ちゃんと動かすと、それなりの動作をしますねw

関連のありそうなエントリ

Comments:0

Comment Form
Remember personal info

*
To prove that you're not a bot, enter this code
Anti-Spam Image

Trackbacks:0

Trackback URL for this entry
http://www.adamrocker.com/blog/203/papervision3d_and_tweener_make_25dimension_2.html/trackback/
Listed below are links to weblogs that reference
Papervision3DとTweenerで2.5Dアニメーション その２ from throw Life

Home > papervision3d > Papervision3DとTweenerで2.5Dアニメーション その２

Pages
Recent Entries
Categories
Archives
Search
Feeds
Meta

Return to page top