先看下效果圖
昨天看到的簡友寫的一片關(guān)于漸變效果的實(shí)現(xiàn)咬展，原鏈接沒找到件已。如有侵權(quán)還望告知峡继。謝謝吼虎。
首先看到效果圖理清一下思路
1.創(chuàng)建圓
2.漸變層
3.運(yùn)行動畫（可有可無）
那么理清思路就可以開搞了犬钢，不嘮叨上代碼（自定義一個類繼承UIView）
?.h文件
/*
設(shè)置漸變圓形進(jìn)度條
*/
@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
// 創(chuàng)建圓環(huán)(可以看出藍(lán)色圓環(huán)和漸變圓環(huán)是半徑，大小相同的思灰。所以直接返回出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.藍(lán)色圓環(huán)
//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.漸變圓環(huán)
// gredientCircle
-(void)setUpColorMaskLayer{
CAShapeLayer * layer = [self gredientLayerMaskLayer];
self.colorLayer.mask = layer;
self.colorMaskLayer = layer;
self.colorMaskLayer.strokeEnd = _strokeFloat;
[self doAnimationWithLayer:self.colorMaskLayer];
}
5.創(chuàng)建完畢實(shí)現(xiàn)一下
-(void)drawRect:(CGRect)rect{
[self setUpGredientLayer];
}
-(void)setUpGredientLayer{
// 設(shè)置漸變背景
[self setUpBlueMaskLayer];// 藍(lán)色圓環(huán)
[self createEmptyLayerAndGradientLayer];// 創(chuàng)建一個全屏layer玷犹，用于承載漸變圖層.
[self setUpColorMaskLayer];// 漸變圓環(huán).
}
動畫的實(shí)現(xiàn)
// 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"];
}
調(diào)用的話還是比較簡單的哪里需要就哪里創(chuàng)建一下（建議使用懶加載創(chuàng)建。為什么洒疚？因為好用哈）
完畢
