CAShapeLayer入门之实现圆形LoadingView ⭕

效果

代码

//
//  LoadingView.m
//  LoadingView
//
//  Created by zhiyunyu on 2018/1/8.
//  Copyright © 2018年 zhiyunyu. All rights reserved.
//

#import "LoadingView.h"

static CGFloat const kQNRadius = 25.f;
static CGFloat const kQNLineWidth = 1.0;

@interface LoadingView ()

@property(nonatomic, strong) CAShapeLayer *circleLayer;

@end

@implementation LoadingView

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self p_addCircleAnimations];
    }
    return self;
}

- (void)p_addCircleAnimations {
    if (self.circleLayer) {
        [self.circleLayer removeFromSuperlayer];
        self.circleLayer = nil;
    }
    CAShapeLayer *circle = [CAShapeLayer layer];
    circle.bounds = self.bounds;
    circle.position = CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2);
    
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:circle.position
                                                              radius:(kQNRadius)
                                                          startAngle:0
                                                            endAngle:2 * M_PI
                                                           clockwise:YES];
    circle.path = circlePath.CGPath;
    circle.strokeColor = [UIColor redColor].CGColor;
    circle.lineWidth = kQNLineWidth;
    circle.fillColor = [UIColor clearColor].CGColor;
    self.circleLayer = circle;
    //修改strokeEnd的值，因此形成动画
    CABasicAnimation *strokeEndAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    strokeEndAnimation.duration = 5.0f;
    strokeEndAnimation.fromValue = @(0.f);
    strokeEndAnimation.toValue = @(1);
    [self.circleLayer addAnimation:strokeEndAnimation forKey:nil];
    [self.layer addSublayer:self.circleLayer];
}

@end