iOS 作一個圓形漸變圓環

代碼主要用到: CALayer+UIBezierPath+CAShapeLayer+CAGradientLayer+CABasicAnimation
1.建立一個圖層

CGFloat layerWH = 100;
    _contentLayer = [CALayer layer];
    [self.view.layer addSublayer:_contentLayer];
    _contentLayer.frame = CGRectMake(100, 100, layerWH, layerWH);
    _contentLayer.backgroundColor = [UIColor blueColor].CGColor;

效果如圖:

2.繪製一個路徑,再生成一個背景圓環加到view上

//建立圓環
    CGFloat lineWidth = 5;
    CGFloat radius = layerWH * 0.5 - lineWidth * 0.5;
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(layerWH * 0.5, layerWH * 0.5) radius:radius startAngle:0 endAngle:M_PI * 2 clockwise:YES];
    //圓環遮罩
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = [UIColor whiteColor].CGColor;
    shapeLayer.lineWidth = lineWidth;
    shapeLayer.strokeStart = 0;
    shapeLayer.strokeEnd = 1;
    shapeLayer.lineCap = kCALineCapRound;
    shapeLayer.lineDashPhase = 0.8;
    shapeLayer.path = bezierPath.CGPath;
    [_contentLayer setMask:shapeLayer];

效果如圖:

3.利用CAGradientLayer繪製漸變的顏色 因爲CAGradientLayer是座標到座標之間的漸變,須要什麼效果須要本身定製
漸變成座標以下:

NSMutableArray *colors = [NSMutableArray arrayWithObjects:(id)[UIColor yellowColor].CGColor,(id)[UIColor orangeColor].CGColor, nil];
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.shadowPath = bezierPath.CGPath;
    gradientLayer.frame = CGRectMake(0, 0, layerWH * 0.5, layerWH);
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(0, 1);
    [gradientLayer setColors:[NSArray arrayWithArray:colors]];
    
    NSMutableArray *colors1 = [NSMutableArray arrayWithObjects:(id)[UIColor redColor].CGColor,(id)[[UIColor orangeColor] CGColor], nil];
    CAGradientLayer *gradientLayer1 = [CAGradientLayer layer];
    gradientLayer1.shadowPath = bezierPath.CGPath;
    gradientLayer1.frame = CGRectMake(layerWH * 0.5, 0, layerWH * 0.5, layerWH);
    gradientLayer1.startPoint = CGPointMake(0, 0);
    gradientLayer1.endPoint = CGPointMake(0, 1);
    [gradientLayer1 setColors:[NSArray arrayWithArray:colors1]];
    [_contentLayer addSublayer:gradientLayer]; //設置顏色漸變
    [_contentLayer addSublayer:gradientLayer1];

效果如圖:

最後疊加的效果如圖: