基於隨機CGFloat值重新繪製UIBezierPath

Question

我正在開發一個使用UIBezierPath的自定義圓形進度條。我想根據隨機生成的CGFloat值更改進度。

我的進度條是這樣的：

我用下面的代碼提請進度條：

// Draw the arc with bezier path 
    int radius = 100; 

    CAShapeLayer *arc = [CAShapeLayer layer]; 
    arc.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 50) radius:radius startAngle:M_PI endAngle:M_PI/150 clockwise:YES].CGPath; 
    arc.position = CGPointMake(CGRectGetMidX(self.view.frame)-radius, 
           CGRectGetMidY(self.view.frame)-radius); 
    arc.cornerRadius = 100.0; 
    arc.fillColor = [UIColor clearColor].CGColor; 
    arc.strokeColor = [UIColor purpleColor].CGColor; 
    arc.lineWidth = 6; 

    [self.view.layer addSublayer:arc]; 

    // Animation of the progress bar 
    CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
    drawAnimation.duration   = 5.0; // "animate over 10 seconds or so.." 
    drawAnimation.repeatCount   = 1.0; // Animate only once.. 
    drawAnimation.removedOnCompletion = YES; // Remain stroked after the animation.. 
    drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f]; 
    drawAnimation.toValue = [NSNumber numberWithFloat:10.0f]; 
    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; 
    [arc addAnimation:drawAnimation forKey:@"drawCircleAnimation"]; 

    // Gradient of progress bar 
    CAGradientLayer *gradientLayer = [CAGradientLayer layer]; 
    gradientLayer.frame = self.view.frame; 
    gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor yellowColor].CGColor,(__bridge id)[UIColor purpleColor].CGColor ]; 
    gradientLayer.startPoint = CGPointMake(0,0.1); 
    gradientLayer.endPoint = CGPointMake(0.5,0.2); 
    [self.view.layer addSublayer:gradientLayer]; 
    gradientLayer.mask = arc; 

    refreshButton = [[UIButton alloc] initWithFrame:CGRectMake(50, 370, 50, 50)]; 
    [refreshButton addTarget:self action:@selector(refresh:) forControlEvents:UIControlEventTouchUpInside]; 
    [refreshButton setBackgroundImage:[UIImage imageNamed:@"refresh.png"] forState:UIControlStateNormal]; 
    [self.view addSubview:refreshButton]; 

的UIButton的用綠色箭頭隨機生成CGFloat的值。所以我的問題是如何重置動畫，以便它停在相應的位置，如果它在0.0和1.0之間？我嘗試在按鈕的方法內部插入動畫的代碼，但是結果是新的弧線被繪製在現有的弧線的頂部。

-(void)refresh:(id)sender{ 
    NSLog(@"Refresh action:"); 
    CGFloat randomValue = (arc4random() % 256/256.0); 
    NSLog(@"%f", randomValue); 

    valueLabel.text = @""; 
    valueLabel = [[UILabel alloc] initWithFrame:CGRectMake(150, 370, 100, 50)]; 
    valueLabel.text = [NSString stringWithFormat: @"%.6f", randomValue]; 
    [self.view addSubview:valueLabel]; 

    // Draw the arc with bezier path 
    int radius = 100; 

    CAShapeLayer *arc = [CAShapeLayer layer]; 
    arc.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 50) radius:radius startAngle:M_PI endAngle:M_PI/150 clockwise:YES].CGPath; 
    arc.position = CGPointMake(CGRectGetMidX(self.view.frame)-radius, 
           CGRectGetMidY(self.view.frame)-radius); 
    arc.cornerRadius = 100.0; 
    arc.fillColor = [UIColor clearColor].CGColor; 
    arc.strokeColor = [UIColor purpleColor].CGColor; 
    arc.lineWidth = 6; 

    [self.view.layer addSublayer:arc]; 

    // Animation of the progress bar 
    CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
    drawAnimation.duration   = 5.0; // "animate over 10 seconds or so.." 
    drawAnimation.repeatCount   = 1.0; // Animate only once.. 
    drawAnimation.removedOnCompletion = YES; // Remain stroked after the animation.. 
    drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f]; 
    drawAnimation.toValue = [NSNumber numberWithFloat:randomValue]; 
    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; 
    [arc addAnimation:drawAnimation forKey:@"drawCircleAnimation"]; 


} 

我不知道如何重新劃出弧線，所以任何幫助或想法，將不勝感激！

非常感謝。

Granit

Answer 1

嘗試重新使用子圖層或替換它。使弧成爲類變量。然後循環遍歷子層，刪除舊的弧，然後用新的隨機浮動百分比重新制作。一旦arc是一個類變量，那麼您可以替換它並從零開始動畫，或者您可以將其當前百分比設置爲新的百分比。