1.看到这样的一个让圆环转起来的动画,首先应该要想到使用的就是`CAShapeLayer`.实现起来不仅简单而且性能也比较高

创建一个简单的圆环.可是这个圆环只有一个颜色

    CAShapeLayer *partLayer = [CAShapeLayer layer];

    CGPoint center = CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect));
    CGFloat radius = CGRectGetWidth(rect) * 0.5;
    
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:-M_PI_2 endAngle:M_PI_2 * 3 clockwise:YES];
    partLayer.path = path.CGPath;
    
    partLayer.strokeColor = strokeColor.CGColor;
    partLayer.lineWidth = 10;
    partLayer.lineCap = @"bevel";
    partLayer.fillColor = [UIColor clearColor].CGColor;
    
    partLayer.strokeStart = 0;
    partLayer.strokeEnd = 1;

2.我们可以看到这个strokeColor设置了颜色后,画出来的就是什么颜色,那么如何绘制出一个圆环上的多个颜色呢?理解好CAShapeLayer的这两个属性 :

strokeStart: 从什么地方开始绘制, 默认为0
strokeEnd: 绘制到什么时候结束, 默认为1

3.这样我们就可以创建两个相同大小的CAShapeLayer

设置第一个layer的strokeStart = 0, strokeEnd = 0.5, strokeColor为红色,
设置第二个layer的strokeStart = 0.5, strokeEnd = 1.0, strokeColor为绿色
这样我们就可以得到一个前半部分为红色,后半部分为绿色的圆环了.

2.给圆环添加动画

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration  = 0.5;
animation.fromValue = @0;
animation.toValue   = @1;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.removedOnCompletion = YES;
[_circleLayer.mask addAnimation:animation forKey:@"circleAnimation"];

完整.m代码

@interface ViewController ()

@end

@implementation ViewController {
    CAShapeLayer *_circleLayer;    
}

- (void)viewDidLoad {
    [super viewDidLoad];

    [self setupCircleLayer];

    UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
    btn.frame = CGRectMake(50, 44, 100, 40);
    [btn setTitle:@"点我开始圆环动画" forState:UIControlStateNormal];
    [btn addTarget:self action:@selector(circleBtnClick) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
}

- (void)setupCircleLayer {
    _circleLayer = [CAShapeLayer layer];
    
    CGRect rect = CGRectMake(100, 150, 200, 200);
    
    [_circleLayer addSublayer:[self createPartLayerStart:0 end:0.2 rect:rect color:[UIColor orangeColor]]];
    [_circleLayer addSublayer:[self createPartLayerStart:0.2 end:0.4 rect:rect color:[UIColor blueColor]]];
    [_circleLayer addSublayer:[self createPartLayerStart:0.4 end:1.0 rect:rect color:[UIColor darkGrayColor]]];
    
    [self.view.layer addSublayer:_circleLayer];
    
    _circleLayer.mask = [self createPartLayerStart:0 end:1.0 rect:rect color:[UIColor blackColor]];
}

- (CAShapeLayer *)createPartLayerStart:(CGFloat)start end:(CGFloat)end rect:(CGRect)rect color:(UIColor *)strokeColor {
    CAShapeLayer *partLayer = [CAShapeLayer layer];

    CGPoint center = CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect));
    CGFloat radius = CGRectGetWidth(rect) * 0.5;
    
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:-M_PI_2 endAngle:M_PI_2 * 3 clockwise:YES];
    partLayer.path = path.CGPath;
    
    partLayer.strokeColor = strokeColor.CGColor;
    partLayer.lineWidth = 10;
    partLayer.lineCap = @"bevel";
    partLayer.fillColor = [UIColor clearColor].CGColor;
    
    partLayer.strokeStart = start;
    partLayer.strokeEnd = end;
    
    return partLayer;
}

- (void)circleBtnClick {

    _circleLayer.strokeEnd = 1.0;
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration  = 0.5;
    animation.fromValue = @0;
    animation.toValue   = @1;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    animation.removedOnCompletion = YES;
    [_circleLayer.mask addAnimation:animation forKey:@"circleAnimation"];
}