帶指示器的圓形進度條

我正在研究一個有指示器的圓形進度條。此外，進展必須動畫化。我能夠通過使用CAShapeLayer，UIBezierPath和CABasicAnimation獲得圓形進度條的動畫效果。帶指示器的圓形進度條

問題是，當我將指標添加到圓形進度條並嘗試對其進行動畫處理時，所以指標會跟隨圓形進度條動畫，事情就搞砸了。

示例：如果我將進度設置爲75％，則表示所有內容都按預期工作。但是，如果我將進度設置爲76％，那麼該指標會在進度欄之前完成其動畫。

此圖片是我走到這一步：

enter image description here

我真正想做的事：

enter image description here

下面見代碼：

CGFloat progress = 0.76; 

UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.frame.size.width/2.0f, self.view.frame.size.height/2.0f) 
                  radius:(150 * 0.5) 
                 startAngle:DEGREES_TO_RADIANS(-90) 
                 endAngle:DEGREES_TO_RADIANS((360 * progress) -90) 
                 clockwise:YES]; 

CAShapeLayer *_circle = [CAShapeLayer layer]; 
_circle.path = circlePath.CGPath; 
_circle.lineCap = kCALineCapSquare; 
_circle.fillColor = [UIColor clearColor].CGColor; 
_circle.strokeStart = 0; 
_circle.zPosition = 1; 

UIBezierPath *linePath = [UIBezierPath bezierPathWithRect:CGRectMake(0, -4, 4.0, 20.0)]; 

CAShapeLayer *_line = [CAShapeLayer layer]; 
_line.strokeColor = [UIColor redColor].CGColor; 
_line.fillColor = [UIColor redColor].CGColor; 
_line.path = linePath.CGPath; 

[self.view.layer addSublayer:_circle]; 
[self.view.layer addSublayer:_line]; 

_circle.lineWidth = 10.0f; 
_circle.strokeColor = [UIColor colorWithRed:77.0/255.0 green:196.0/255.0 blue:122.0/255.0 alpha:1.0f].CGColor; 

// Add Animation 
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
pathAnimation.duration = 1.0; 
pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 
pathAnimation.fromValue = @0.0f; 
pathAnimation.toValue = @1.0f; 
[_circle addAnimation:pathAnimation forKey:@"strokeEndAnimation"]; 
_circle.strokeEnd = 1.0f; 

UIBezierPath *lineCirclePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.frame.size.width/2.0f, self.view.frame.size.height/2.0f) 
                  radius:(150 * 0.5) 
                 startAngle:DEGREES_TO_RADIANS(-90) 
                 endAngle:DEGREES_TO_RADIANS((360 * progress) -90) 
                 clockwise:YES]; 

CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 
anim.path = lineCirclePath.CGPath; 
anim.rotationMode = kCAAnimationRotateAuto; 
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 
anim.duration = 1.0; 
anim.fillMode = kCAFillModeForwards; 
anim.removedOnCompletion = NO; 
[_line addAnimation:anim forKey:@"race"];

來源

2015-06-21 Paulo Venturi

你爲什麼不使用現成的組件爲它檢查以下progress controls

來源

2015-06-21 00:51:54

我查了許多已經存在的組件，但他們都沒有我需要什麼，紅色指示燈我的第一次，如圖圖片。 –

帶指示器的圓形進度條

回答

相關問題