BAD_ACCESS

おもにiOS、ときどき変な電子工作、ガジェット話。

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

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

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

ベジェ曲線のつくりかた

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

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

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

    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を透明にしておかないと塗りが発生してしまいます。

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

iOSシミュレータのスクリーンショット 2013.12.21 18.29.06.png

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

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

-(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];
}

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

広告を非表示にする