How to animate a curve

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