贝塞尔曲线的动画大小

Question

I want to create a circular arc of a bezier curve and then animate it to reduce the radius of the curve.

Currently I have the following code to draw my bezier curve in a UIView:

UIView * curveView = [[UIView alloc] initWithFrame:CGRectMake(50, 550, 100, 100)];
curveView.backgroundColor = [UIColor orangeColor];

UIBezierPath * aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150)
                                                     radius:75
                                                 startAngle:0
                                                   endAngle:2 * M_PI
                                                  clockwise:YES];

CAShapeLayer * shapeLayer = [CAShapeLayer layer];
shapeLayer.path = aPath.CGPath;
shapeLayer.fillColor = [UIColor colorWithRed:.5 green:1 blue:.5 alpha:1].CGColor;
shapeLayer.strokeColor = [UIColor blackColor].CGColor;
shapeLayer.lineWidth = 2;

[curveView.layer addSublayer:shapeLayer];

[self.view addSubview:curveView];

This adds a circular bezier curve to the view as expected. The issue I am having is to animate for the curve to shrink down over a certain period of time.

If I were using UIViews instead I would probably use constraints but I can't seem to find any resources to help me use them in this case.

Having looked through many of the answers to different questions on Stackoverflow it seems like I might need to use CABasicAnimation but the questions are mainly to animate the curve of a line instead of the length of the line.

This issue is difficult as the method used for drawing a line (start point, a series of paths, end point) seems very different from that of drawing a circle. This means I don't know if the process I am looking for will be the same or different. An answer here seems to have a solution for animating a line but my code for creating the circle doesn't use start or end points meaning it doesn't help very much.

I thought about using separate arcs to create the circle and then changing their start points and control points but these arcs don't seem to be perfectly circular, and are more used for custom wiggly lines. There is an example of this here but it isn't for iOS.

Answer 1

path is an animatable property on CAShapeLayer. If you create a second, smaller version of your circle path, you can animate between those two paths just as you would any other animatable property.

UIBezierPath *smallerPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:25 /* note different radius */ startAngle:0 endAngle:2 * M_PI clockwise:YES];

CABasicAnimation *shrinkAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
shrinkAnimation.fromValue = (id)aPath.CGPath;
shrinkAnimation.toValue = (id)smallerPath.CGPath;
shrinkAnimation.duration = 1;
[shapeLayer addAnimation:shrinkAnimation forKey:@"shrink"];