#14 パスで波をつくるーC4のパスであそぶ(3)

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

前回は文字をパス化してモーフィングする例を試しました。今回はベジェ曲線をつかって波形アニメーションをつくってみようと思います。

ベジェ曲線のつくりかた

ベジェ曲線ももちろんC4Shapeクラスに属しています。 ２点の座標情報と２点のコントロールポイントを与えることでベジェ曲線をつくり出すことができます。

今回はこの２点のコントロールポイントの値にアニメーションを付けることで波形のアニメーションを作ります。

まずは線の終端を決めます。端っこと端っこの値を入れます。

    CGPoint bezierEndPoints[2] = {
        CGPointMake(0,self.canvas.height/2),
        CGPointMake(self.canvas.width,self.canvas.height/2)
    };

つづいてコントロールポイントを決めます。

    CGPoint bezierControlPoints[2] = {
        CGPointMake(self.canvas.width/2,0),
        CGPointMake(self.canvas.width/2,self.canvas.height)
    };

ここでは線分の真ん中の一番上と下に置いています。 終端とコントロールポイントを作成したところでベジェ曲線を作ります。

    //create the bezier curve
    bezierCurve = [C4Shape curve:bezierEndPoints controlPoints:bezierControlPoints];
    bezierCurve.fillColor = [UIColor clearColor];
    [self.canvas addShape:bezierCurve];

fillcolorを透明にしておかないと塗りが発生してしまいます。

この時点で波形が出来上がっているはずです。

ベジェ曲線をアニメーションさせる

ではコントロールポイントを上下に動かすことで波形のアニメーションをつくってみます。 コントロールポイントの２点をcontrolA、controlBとしてそれらを更新するアニメーション用のメソッドを作ります。 AUTOREVERSEとREPEATのオプションをつけているので同じタイミングと同じ幅で振幅するようなアニメーションになっているはずです。

-(void)updateControlA
{
    bezierCurve.animationDuration = 0.5;
    bezierCurve.animationOptions = AUTOREVERSE | REPEAT;
    bezierCurve.controlPointA = CGPointMake(self.canvas.width/2, self.canvas.height);
}

-(void)updateControlB
{
    bezierCurve.animationDuration = 0.5;
    bezierCurve.animationOptions = AUTOREVERSE | REPEAT;
    bezierCurve.controlPointB = CGPointMake(self.canvas.width/2, 0);
}

setupメソッドの中身はこんなかんじになります。

-(void)setup {
    
    //create the end points for the bezier curve
    CGPoint bezierEndPoints[2] = {
        CGPointMake(0,self.canvas.height/2),
        CGPointMake(self.canvas.width,self.canvas.height/2)
    };
    
    //create the control points for the bezier curve
    CGPoint bezierControlPoints[2] = {
        CGPointMake(self.canvas.width/2,0),
        CGPointMake(self.canvas.width/2,self.canvas.height)
    };
    
    //create the bezier curve
    bezierCurve = [C4Shape curve:bezierEndPoints controlPoints:bezierControlPoints];
    bezierCurve.fillColor = [UIColor clearColor];
    [self.canvas addShape:bezierCurve];
    
    [self runMethod:@"updateControlA" afterDelay:0.5];
    [self runMethod:@"updateControlB" afterDelay:0.5];
}

いい感じに波うってますね。 この後、波形の動きにインタラクションを与えたいと思います。