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

您是否看过Apple关于暂停动画的技术说明：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应该为此工作。

暂停和恢复圈动画

2 个答案: