Круговой индикатор выполнения с CAShapeLayer и CABasicAnimation

Question

Я пытаюсь сделать круговой обзор прогресса, используя идею из здесь

Это мой код для CircleView:

#import "CircleView.h"

@interface CircleView()

@property (nonatomic, strong) CAShapeLayer *circleLayer;

@end

@implementation CircleView

-(instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];

if (self) {
    self.backgroundColor = UIColor.clearColor;

    UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width / 2., self.frame.size.height / 2.0) radius: (self.frame.size.width - 10) / 2 startAngle:0.0 endAngle:M_PI * 2 clockwise:YES];

    CAShapeLayer *downLayer = [[CAShapeLayer alloc] init];
    downLayer.path = circlePath.CGPath;
    downLayer.fillColor = UIColor.clearColor.CGColor;
    downLayer.strokeColor = UIColor.lightGrayColor.CGColor;
    downLayer.lineWidth = 10.0;

    downLayer.strokeEnd = 1.0;

    self.circleLayer = [[CAShapeLayer alloc] init];
    self.circleLayer.path = circlePath.CGPath;
    self.circleLayer.fillColor = UIColor.clearColor.CGColor;
    self.circleLayer.strokeColor = UIColor.redColor.CGColor;
    self.circleLayer.lineWidth = 10.0;

    self.circleLayer.strokeEnd = 0.0;

    [self.layer addSublayer:downLayer];
    [self.layer addSublayer: self.circleLayer];
}

return self;
}

-(void)animateCircle:(NSTimeInterval)duration fromPart:(CGFloat)fromPart toPart: (CGFloat)toPart {

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

animation.duration = duration;

animation.fromValue = @(fromPart);
animation.toValue = @(toPart);

animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

self.circleLayer.strokeEnd = toPart;

[self.circleLayer addAnimation:animation forKey:@"animateCircle"];

}

@end

Проблема в том, что я пытаюсь сделать эту анимацию более одного раза. Затем он показывает только анимацию из последнего вызова и как будто предыдущие вызовы уже закончили анимацию. Например, если я сделаю следующие два звонка:

[self.circleView animateCircle:1 fromPart:0.0 toPart:0.25];
[self.circleView animateCircle:1 fromPart:0.25 toPart:0.5];

Показывает только анимацию окраски от 0,25 процента круга до 0,5 процента круга. Могу ли я это изменить? Мне нужно показать все анимации одну за другой. (Нужно показать ход загрузки)

Answer 1

Вам нужно удалить эти 2 строки ниже, и все будет работать как положено.

animation.fromValue = @(fromPart);
animation.toValue = @(toPart);

Поскольку вы используете CircleView для отображения хода загрузки, поэтому вашему методу не требуется значение fromPart при анимации круга. Вы можете обновить animateCircle метод, как показано ниже.

-(void)animateCircle:(NSTimeInterval)duration toPart: (CGFloat)toPart {

  CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

  animation.duration = duration;

  animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

  self.circleLayer.strokeEnd = toPart;

  [self.circleLayer addAnimation:animation forKey:@"animateCircle"];

}

Результат