Pause and Resume circle animation

Question

I used this code for drawing circle. The circle is drawing in 30 sec. Is there any way pause and resume drawing circle? I can pause the time but i couldn't find a way for pause and resume the drawing circle.

 int radius = 30;
 circle = [CAShapeLayer layer];
 // Make a circular shape
 circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 100, 2.0*radius, 2.0*radius)
                                          cornerRadius:radius].CGPath;
 // Center the shape in self.view
 circle.position = CGPointMake(CGRectGetMidX(self.view.frame)-radius,
                               CGRectGetMidY(self.view.frame)-radius);

 // Configure the apperence of the circle
 circle.fillColor = [UIColor lightGrayColor].CGColor;
 circle.strokeColor = [UIColor orangeColor].CGColor;
 circle.lineWidth = 10;


 // Add to parent layer
 [container.layer addSublayer:circle];

 // Configure animation
 drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
 drawAnimation.duration            = 30.0; // "animate over 10 seconds or so.."
 drawAnimation.repeatCount         = 1.0;  // Animate only once..
 drawAnimation.removedOnCompletion = NO;   // Remain stroked after the animation...


 // Animate from no part of the stroke being drawn to the entire stroke being drawn
 drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
 drawAnimation.toValue   = [NSNumber numberWithFloat:1.0f];

 // Experiment with timing to get the appearence to look the way you want
 drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

 // Add the animation to the circle
 [circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"];

Answer 1

Have you seen this technical note from Apple on pausing an animation: https://developer.apple.com/library/ios/qa/qa1673/_index.html

So, for your project, something like this would do the trick:

- (void)viewDidLoad
{
    [super viewDidLoad];

    int radius = 30;
    _circle = [CAShapeLayer layer];
    // Make a circular shape
    _circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 100, 2.0*radius, 2.0*radius)
                                              cornerRadius:radius].CGPath;
    // Center the shape in self.view
    _circle.position = CGPointMake(CGRectGetMidX(self.view.frame)-radius,
                                   CGRectGetMidY(self.view.frame)-radius);

    // Configure the apperence of the circle
    _circle.fillColor = [UIColor lightGrayColor].CGColor;
    _circle.strokeColor = [UIColor orangeColor].CGColor;
    _circle.lineWidth = 10;

    _circle.strokeEnd = 0.0f;

    // Add to parent layer
    [self.view.layer addSublayer:_circle];

}

- (IBAction)didTapPlayPauseButton:(id)sender
{
    if (!_drawAnimation) {
        [self addAnimation];
    } else if(_circle.speed == 0){
        [self resumeLayer:_circle];
    } else {
        [self pauseLayer:_circle];
    }

}

- (void)addAnimation
{
    // Configure animation
    _drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    _drawAnimation.duration            = 30.0; // "animate over 10 seconds or so.."
    _drawAnimation.repeatCount         = 1.0;  // Animate only once..
    _drawAnimation.removedOnCompletion = NO;   // Remain stroked after the animation...


    // Animate from no part of the stroke being drawn to the entire stroke being drawn
    _drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    _drawAnimation.toValue   = [NSNumber numberWithFloat:1.0f];

    // Experiment with timing to get the appearence to look the way you want
    _drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

    // Add the animation to the circle
    [_circle addAnimation:_drawAnimation forKey:@"drawCircleAnimation"];
}

- (void)pauseLayer:(CALayer*)layer
{
    CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];
    layer.speed = 0.0;
    layer.timeOffset = pausedTime;
}

- (void)resumeLayer:(CALayer*)layer
{
    CFTimeInterval pausedTime = [layer timeOffset];
    layer.speed = 1.0;
    layer.timeOffset = 0.0;
    layer.beginTime = 0.0;
    CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
    layer.beginTime = timeSincePause;
}

I threw it in a project on Github to see if it would work: https://github.com/perlmunger/PauseAnimation.git