How to animate a curve - ios

Question

I would like to change the curve's Y position which acts like a UISlider with animation.
I have a method drawCurve that will draw a quadCurve, but I would like to animate it. I'm not too sure how I should link it up with CABasicAnimation.
//draw line path
-(void)drawCurve
{
//ensure the drag up or down just in the middle
if (controlPoint.x <= halfWidth || controlPoint.x >= halfWidth) {controlPoint.x = halfWidth;}
if (controlPoint.y <= 0 ) {controlPoint.y = 0;}
if (controlPoint.y >= self.frame.size.height) {controlPoint.y = self.frame.size.height;}
CGContextRef ctx = UIGraphicsGetCurrentContext();
curvePath = CGPathCreateMutable();
CGPathMoveToPoint(curvePath, NULL, startingDrawPointX, startingDrawPointY);
CGPathAddQuadCurveToPoint(curvePath, NULL, controlPoint.x, controlPoint.y, endingDrawPointX, endingDrawPointY);
CGContextAddPath(ctx, curvePath);
CGContextSetStrokeColorWithColor(ctx,kDBrownTextColor.CGColor);
CGContextSetLineWidth(ctx, 2.0);//thickness
CGContextStrokePath(ctx);
CGPathRelease(curvePath);
}
-(void)startAnimation
{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"path"];
animation.duration = 1;
animation.repeatCount = 5;
animation.autoreverses = NO;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.fromValue = (__bridge id)currentCurvePath;
animation.toValue = (__bridge id)ToPath;
[self.layer.superlayer addAnimation:animation forKey:#"animatePath"];
}

Answer 1

Here is an example of what I think your trying to accomplish, using a CAShapeLayer.
+(Class) layerClass {
return [CAShapeLayer class];
}
//draw line path
-(void)drawCurve
{
//ensure the drag up or down just in the middle
if (controlPoint.x <= halfWidth || controlPoint.x >= halfWidth) {controlPoint.x = halfWidth;}
if (controlPoint.y <= 0 ) {controlPoint.y = 0;}
if (controlPoint.y >= self.frame.size.height) {controlPoint.y = self.frame.size.height;}
//create the path
curvePath = CGPathCreateMutable();
CGPathMoveToPoint(curvePath, NULL, startingDrawPointX, startingDrawPointY);
CGPathAddQuadCurveToPoint(curvePath, NULL, controlPoint.x, controlPoint.y, endingDrawPointX, endingDrawPointY);
//add the path to the background layer
CAShapeLayer *layer = (CAShapeLayer *)self.layer;
layer.path = curvePath;
layer.strokeColor = [UIColor brownColor].CGColor;
layer.lineWidth = 2.0;
//release the path
CGPathRelease(curvePath);
}
-(void)startAnimation {
[CATransaction begin];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"path"];
animation.duration = 1;
animation.repeatCount = 5;
animation.autoreverses = NO;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.fromValue = (__bridge id)curvePath;
animation.toValue = (__bridge id)ToPath;
[self.layer addAnimation:animation forKey:#"animatePath"];
[CATransaction commit];
}