#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
を透明にしておかないと塗りが発生してしまいます。
この時点で波形が出来上がっているはずです。
ベジェ曲線をアニメーションさせる
ではコントロールポイントを上下に動かすことで波形のアニメーションをつくってみます。
コントロールポイントの2点を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]; }
いい感じに波うってますね。 この後、波形の動きにインタラクションを与えたいと思います。