임의의 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"]; 


} 

나는 원호를 다시 그리는 방법을 알지 못하므로 어떤 도움이나 생각이라도 대단히 감사하겠습니다.

고마워요.

그래 니트

Answer 1

하위 레이어를 다시 사용하거나 교체하십시오. arc를 클래스 변수로 만드십시오. 그런 다음 하위 레이어를 순환하고 오래된 원호를 제거한 다음 새 무작위 부동 소수점 비율로 다시 만듭니다. arc가 클래스 변수이면, 그것을 대체하고 0에서 움직이거나 현재 퍼센트에서 새로운 퍼센트로 움직일 수 있습니다.