带指示器的圆形进度条

我正在研究一个有指示器的圆形进度条。此外，进展必须动画化。我能够通过使用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

我查了许多已经存在的组件，但他们都没有我需要什么，红色指示灯我的第一次，如图图片。 –

带指示器的圆形进度条

回答

相关问题