暫停和恢復圓形動畫

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應該爲此工作。