圆形进度条与指标

Question

我正在制作一个圆形进度条，上面有一个指示器。此外，进展必须动画。通过使用CAShapeLayer，UIBezierPath和CABasicAnimation，我能够使循环进度条动画工作。

问题是当我将指示符添加到循环进度条并尝试对其进行动画处理时，指示符将跟随循环进度条动画，事情搞砸了。

示例：如果我将进度设置为75％，那么一切都按预期工作。但如果我将进度设置为76％，那么指标会在进度条之前完成动画。

这张图片是我到目前为止所得到的：

我真正想做的事情：

请参阅以下代码：

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

Answer 1

为什么您没有使用现成的组件，请查看以下progress controls