先看下效果图
昨天看到的简友写的一片关于渐变效果的实现，原链接没找到。如有侵权还望告知。谢谢。
首先看到效果图理清一下思路
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"];
}
调用的话还是比较简单的哪里需要就哪里创建一下（建议使用懒加载创建。为什么？因为好用哈）
完毕