Animate a point of a Bezier curve [duplicate]

Question

This question already has an answer here:

How to Animate a UIBezierPath (1 answer)

Closed 8 years ago.

Is is possible to animate a point of a bezier curve? I am trying make a smooth transition from a line to an arrow.

Here's what the line looks like in code

//// Color Declarations
UIColor* white = [UIColor colorWithRed: 1 green: 1 blue: 1 alpha: 0.374];

//// Group
{
    //// Bezier Drawing
    UIBezierPath* bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint: CGPointMake(30.5, 43.5)];
    [bezierPath addLineToPoint: CGPointMake(30.5, 29.59)];
    [bezierPath addLineToPoint: CGPointMake(30.5, 15.5)];
    bezierPath.lineCapStyle = kCGLineCapRound;

    bezierPath.lineJoinStyle = kCGLineJoinBevel;

    [white setStroke];
    bezierPath.lineWidth = 5.5;
    [bezierPath stroke];
}

... however I do not know how to pick a point and animate just that. Is this even possible?

Answer 1

Explicit CGPath animation using a CAShapeLayer:

// Create the starting path. Your curved line.
UIBezierPath * startPath; 
// Create the end path. Your straight line.
UIBezierPath * endPath; 

// Create the shape layer to display and animate the line.
CAShapeLayer * myLineShapeLayer = [[CAShapeLayer alloc] init];

CABasicAnimation * pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
pathAnimation.fromValue = (__bridge id)[startPath CGPath];
pathAnimation.toValue = (__bridge id)[endPath CGPath];
pathAnimation.duration = 5.0f;
[myLineShapeLayer addAnimation:pathAnimation forKey:@"animationKey"];

Answer 2

It isn't clear what you are asking. Are you trying to animate changing the shape of your line by moving one of the control points?

The way to animate changes to paths is to create a CAShapeLayer and install it as a sublayer of your view's layer. Then if you change the path associated with the shape layer the system will use implicit animation to make the change.

Note that the path in the shape layer needs to have the same number/type of control points or the results of the animation are "undefined."