CABasicAnimation + UIBezierPath

Question

我正在嘗試創建一個圓形條，例如你可以在iOS上使用本機攝像機拍攝按鈕時找到一個圓形條。

沿着動畫創建一個圓圈，一旦完成，就會「自然」移除。

我嘗試下面的代碼：

CAShapeLayer *circle = [CAShapeLayer layer]; 
circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.lapseBtnOutlet.center.x, self.lapseBtnOutlet.center.y) radius:28 startAngle:2*M_PI*0-M_PI_2 endAngle:2*M_PI*1-M_PI_2 clockwise:YES].CGPath; 
circle.fillColor = [UIColor clearColor].CGColor; 
circle.strokeColor = [UIColor whiteColor].CGColor; 
circle.lineWidth = 2.0; 

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
animation.duration = self.lapseInterval; 
animation.removedOnCompletion = NO; 
animation.fromValue = @(0); 
animation.toValue = @(1); 
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; 
[circle addAnimation:animation forKey:@"drawCircleAnimation"]; 

但現在我的問題是，我不知道如何「刪除」從開始到結束的線。

我嘗試使用autoreverse屬性，但它從開始到結束從頭到尾移除圓。有任何想法嗎？

Answer 1

您需要動畫從0到1的strokeStart，當動畫完成時，移除形狀圖層。

- (void)viewDidLoad { 
    [super viewDidLoad]; 
    [self performSelector:@selector(animateProperty:) withObject:@"strokeEnd" afterDelay:1]; 
    [self performSelector:@selector(animateProperty:) withObject:@"strokeStart" afterDelay:3]; 
} 


-(void)animateProperty:(NSString *) prop { 
    if (! self.circle) { 
     self.circle = [CAShapeLayer layer]; 
     self.circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.lapseBtnOutlet.center.x, self.lapseBtnOutlet.center.y) radius:28 startAngle:2*M_PI*0-M_PI_2 endAngle:2*M_PI*1-M_PI_2 clockwise:YES].CGPath; 
     self.circle.fillColor = [UIColor clearColor].CGColor; 
     self.circle.strokeColor = [UIColor whiteColor].CGColor; 
     self.circle.lineWidth = 2.0; 
     [self.view.layer addSublayer:self.circle]; 
    } 

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:prop]; 
    animation.delegate = ([prop isEqualToString:@"strokeStart"])? self : nil; 
    animation.duration = 1; 
    animation.removedOnCompletion = NO; 
    animation.fromValue = @0; 
    animation.toValue = @1; 
    [self.circle addAnimation:animation forKey:prop]; 
} 


-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag { 
    [self.circle removeFromSuperlayer]; 
    self.circle = nil; 
}