先看下效果图

昨天看到的简友写的一片关于渐变效果的实现，原链接没找到。如有侵权还望告知。谢谢。

首先看到效果图理清一下思路

1.创建圆

2.渐变层

3.运行动画（可有可无）

那么理清思路就可以开搞了，不唠叨上代码（自定义一个类继承UIView）

 .h文件

/*

设置渐变圆形进度条

*/

@interface CirCleViewGredientLayer : UIView

@property (nonatomic, strong) CAShapeLayer * colorLayer;

@property (nonatomic, strong) CAShapeLayer * colorMaskLayer;

@property (nonatomic, strong) CAShapeLayer * blueMaskLayer;

@property (nonatomic, assign) CGFloat  lineWidths;

@property (nonatomic, assign) CGFloat  strokeFloat;

@end

// 创建圆环(可以看出蓝色圆环和渐变圆环是半径，大小相同的。所以直接返回出layer(easy))

-(CAShapeLayer*)gredientLayerMaskLayer{

CAShapeLayer * layers = [CAShapeLayer layer];

layers.frame = self.bounds;

UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2) radius:self.bounds.size.width/2-_lineWidths startAngle:DEGREES_TO_RADIANS(-90.0f) endAngle:DEGREES_TO_RADIANS(270.0f) clockwise:YES];

layers.lineWidth = _lineWidths;

layers.path = path.CGPath;

layers.fillColor = [UIColor clearColor].CGColor;

layers.strokeColor = [UIColor blackColor].CGColor;

layers.lineCap = kCALineCapRound;

return layers;

}

2.蓝色圆环

//blueCircle

-(void)setUpBlueMaskLayer{

CAShapeLayer * layer = [self gredientLayerMaskLayer];

self.blueMaskLayer = layer;

self.blueMaskLayer.strokeColor = [myTool uiColorFromString:@"#1997eb"].CGColor;

[self.layer addSublayer:self.blueMaskLayer];

}

3.渐变图层

-(void)createEmptyLayerAndGradientLayer{

self.colorLayer = [CAShapeLayer layer];

self.colorLayer.frame = self.bounds;

[self.layer addSublayer:self.colorLayer];

// 左边渐变颜色

CAGradientLayer * leftLayer = [CAGradientLayer layer];

leftLayer.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);

leftLayer.locations = @[@0.1,@0.3,@0.4,@0.6,@0.8,@1];

leftLayer.colors = @[

(id)[myTool uiColorFromString:@"#90ff51"].CGColor,

(id)[myTool uiColorFromString:@"#f9f654"].CGColor,

(id)[myTool uiColorFromString:@"#f9b863"].CGColor,

(id)[myTool uiColorFromString:@"#f95ec1"].CGColor,

(id)[myTool uiColorFromString:@"#53befd"].CGColor,

(id)[myTool uiColorFromString:@"#55ff93"].CGColor];

[self.colorLayer addSublayer:leftLayer];

}

4.渐变圆环

// gredientCircle

-(void)setUpColorMaskLayer{

CAShapeLayer * layer = [self gredientLayerMaskLayer];

self.colorLayer.mask = layer;

self.colorMaskLayer = layer;

self.colorMaskLayer.strokeEnd = _strokeFloat;

[self doAnimationWithLayer:self.colorMaskLayer];

}

5.创建完毕实现一下

-(void)drawRect:(CGRect)rect{

[self setUpGredientLayer];

}

-(void)setUpGredientLayer{

// 设置渐变背景

[self setUpBlueMaskLayer];// 蓝色圆环

[self createEmptyLayerAndGradientLayer];// 创建一个全屏layer，用于承载渐变图层.

[self setUpColorMaskLayer];// 渐变圆环.

}

动画的实现

// animation

-(void)doAnimationWithLayer:(CAShapeLayer *)layer{

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

animation.duration = 1.5;

animation.fromValue = @(0);

animation.toValue = @(_strokeFloat);

[layer addAnimation:animation forKey:@"strokeEndAnimation"];

}

调用的话还是比较简单的哪里需要就哪里创建一下（建议使用懒加载创建。为什么？因为好用哈）

完毕