#12 パスデータをモーフィングしてみたーC4のパスであそぶ(1)

この記事は「一人アドベントカレンダー2013〜Lonely Advent Calender 2013〜」の13日目の記事です。

今回からはパスデータを使ったアニメーションを試してみたいと思います。

Morphing C4Shapes from [C4] on Vimeo.

この動画を見て、C4だと手軽にパスアニメーションを作れるということもあり、ひと通り試してみたいと思います。 パスデータを使ったモーションはObjective-Cでゴリゴリ書いていくのも大変そうなので、これは使えそうですね。

C4Shapeを初期化

ひとつのC4Shapeオブジェクトをつくり、そのオブジェクトに形のデータを与えていくことでモーフィングのアニメーションを作り出しています。 まずはsetupでC4Shapeオブジェクトを矩形として初期化してcanvasに配置します。

-(void)setup {
    
    //setup up the initial shape
    theShape = [C4Shape rect:CGRectMake(0,0,240,240)];
    theShape.center = self.canvas.center;
    
    //set its animation duration which will be used for all animations
    theShape.animationDuration = 1.0f;
    
    //add it to the canvas
    [self.canvas addShape:theShape];
}

変化する先の形

次に形を変化させるためのメソッドを追加します。 C4Shapeクラスのインスタンスメソッドであるellipse:を呼び出します。 ellipse:は文字通り、楕円形にするためのメソッドです。引数に矩形を渡し、その矩形内に楕円を描きます。

-(void)ellipse {
    [theShape ellipse:theShape.frame];
}

これを先ほどのsetupの一番最後に呼び出します。

-(void)setup {
    
   (略)
    [self ellipse];
}

チュートリアル通りですが、たったこれだけでモーフィングができちゃいました。