暂停和恢复圆形动画

Question

我用这个代码绘制圆圈。圆圈在30秒内画。有什么办法暂停和恢复绘图圈？我可以暂停时间，但我找不到停顿的方式并恢复绘图圈。

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

你见过苹果本技术说明上暂停的动画：https://developer.apple.com/library/ios/qa/qa1673/_index.html

因此，对于您的项目，这样的事情会做的伎俩：

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

我把它扔在一个项目上Github，看看它是否会工作：https://github.com/perlmunger/PauseAnimation.git

Answer 2

不幸的是，没有暂停/恢复方法，所以你只需要自己做。

---

暂停

，我们需要做的是删除动画。由于动画未完成，首先我们需要获取strokeEnd的当前显示值并将其分配给strokeEnd。

CGFloat currentStrokeEnd = circle.presentationLayer.strokeEnd; 
[circle setStrokeEnd:currentStrokeEnd]; 
[circle removeAllAnimations]; 

---

恢复

所有你需要做的，是开始一个新的动画。这次它将从circle.strokeEnd变为1.0。您还可以更改持续时间，以便动画以与之前相同的速度运行。 (1.0f - circle.strokeEnd)/30.0f应该为此工作。