一、CAGradientLayer介紹
CAGradientLayer根據(jù)官方的解釋是漸變層在其背景色上繪制顏色漸變，即是填充層的形狀（包括圓角），通俗的來(lái)說(shuō)就是根據(jù)shape形狀來(lái)繪制漸變色。
Gradient：本身就是梯度的意思，所以在這里就是作為漸變色來(lái)理解
1，CAGradientLayer用于處理漸變色的層結(jié)構(gòu)
2，CAGradientLayer的漸變色可以做隱式動(dòng)畫(huà)
3，大部分情況下，CAGradientLayer時(shí)和CAShapeLayer配合使用的。
4，CAGradientLayer可以用作PNG的遮罩效果
關(guān)于CAGradientLayer的坐標(biāo)系統(tǒng)
startPoint與endPoint分別為漸變的起始方向與結(jié)束方向，它是以矩形的四個(gè)角為基礎(chǔ)的，（0，0）為左上角、（1，0）為右上角、（0，1）為左下角、（1，1）為右下角，默認(rèn)是值是（0.5，0）和（0.5，1）
1，CAGradientLayer的坐標(biāo)系統(tǒng)是從（0，0）到（1，1）繪制的矩形
2，CAGradientLayer的frame值的size不為正方形的話，坐標(biāo)系統(tǒng)會(huì)被拉伸
3，CAGradientLayer的startPoint和endPoint會(huì)直接決定顏色的繪制方向
4，CAGradientLayer的顏色分割點(diǎn)時(shí)以0到1的比例來(lái)計(jì)算的
二、CAGradientLayer屬性介紹
CAGradientLayer包含的屬性很少，而且都很好理解，接下來(lái)就帶大家簡(jiǎn)便的熟悉一下：
1、CALayer的所有屬性
因?yàn)?code>CAGradientLayer繼承與CALayer，所以CAGradientLayer可以使用其父類CALayer所有開(kāi)放的屬性。
2、colors
/* The array of CGColorRef objects defining the color of each gradient
* stop. Defaults to nil. Animatable. */
@property(nullable, copy) NSArray *colors;
設(shè)置漸變的顏色，這是個(gè)數(shù)組，可以添加多個(gè)顏色，例如：
gradient.colors = @[(id)[UIColor blackColor].CGColor,(id)[UIColor whiteColor].CGColor];
注：顏色屬于CGColorRef類，所以必須加CGColor，而且前面還要加(id)。
3、locations
/* An optional array of NSNumber objects defining the location of each
* gradient stop as a value in the range [0,1]. The values must be
* monotonically increasing. If a nil array is given, the stops are
* assumed to spread uniformly across the [0,1] range. When rendered,
* the colors are mapped to the output colorspace before being
* interpolated. Defaults to nil. Animatable. */
@property(nullable, copy) NSArray<NSNumber *> *locations;
漸變顏色的區(qū)間分布，locations的數(shù)組長(zhǎng)度和color一致也可以不一致，這個(gè)值一般不用管它，默認(rèn)是nil，會(huì)平均分布。
4、startPoint和endPoint
/* The start and end points of the gradient when drawn into the layer's
* coordinate space. The start point corresponds to the first gradient
* stop, the end point to the last gradient stop. Both points are
* defined in a unit coordinate space that is then mapped to the
* layer's bounds rectangle when drawn. (I.e. [0,0] is the bottom-left
* corner of the layer, [1,1] is the top-right corner.) The default values
* are [.5,0] and [.5,1] respectively. Both are animatable. */
@property CGPoint startPoint;
@property CGPoint endPoint;
startPoint與endPoint分別為漸變的起始方向與結(jié)束方向，它是以矩形的四個(gè)角為基礎(chǔ)的，（0，0）為左上角、（1，0）為右上角、（0，1）為左下角、（1，1）為右下角，默認(rèn)是值是（0.5，0）和（0.5，1），例如：
//漸變從左下角開(kāi)始
gradient.startPoint = CGPointMake(0, 1);
//漸變到右上角結(jié)束
gradient.endPoint = CGPointMake(1, 0);
5、type
/* The kind of gradient that will be drawn. Currently the only allowed
* value is `axial' (the default value). */
@property(copy) NSString *type;
默認(rèn)值是kCAGradientLayerAxial，表示按像素均勻變化。除了默認(rèn)值也無(wú)其它選項(xiàng)。
三、代碼
UIView *colorView = [[UIView alloc] init];
colorView.frame = CGRectMake(0, 0, 200, 200);
colorView.center = CGPointMake(375/2.0, 667/2.0-100);
[self.view addSubview:colorView];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = colorView.bounds;
gradient.colors = @[(id)[UIColor blackColor].CGColor,(id)[UIColor whiteColor].CGColor];
gradient.startPoint = CGPointMake(0, 1);
gradient.endPoint = CGPointMake(1, 0);
// gradient.locations = @[@(0.5f), @(1.0f)];
[colorView.layer addSublayer:gradient];
這代碼實(shí)現(xiàn)的漸變效果就和上圖一樣，接下來(lái)帶大家分析一下locations的作用。
在上面代碼的基礎(chǔ)上加上：
gradient.locations = @[@(0.0f), @(1.0f)];
則效果為：
這樣的效果和沒(méi)有加上這句代碼的效果是一樣的。
同樣在上面代碼的基礎(chǔ)上加上：
gradient.locations = @[@(0.5f), @(1.0f)];
則效果為：
可以發(fā)現(xiàn)左下三角形沒(méi)有漸變，漸變的開(kāi)始只是在斜對(duì)角線的位置然后到（1，0）位置結(jié)束。所以locations的真實(shí)作用是控制漸變發(fā)生的位置。
CAGradientLayer時(shí)和CAShapeLayer
- (void)setupView {
CGFloat selfW = self.bounds.size.width;
///虛線圓View=============
self.layer.cornerRadius = selfW/2;
self.layer.masksToBounds = YES;
self.backgroundColor = [UIColor clearColor];
self.transform = CGAffineTransformMakeRotation(-M_PI_2);
CGFloat lineWidth =22.0;
CGFloat left =2;
CGFloat width = selfW-left*2;
// 第一層淺白色的虛線圓
CAShapeLayer *circleShapeLayer = [CAShapeLayer layer];
circleShapeLayer.strokeColor = [UIColor colorWithRed:0.64 green:0.71 blue:0.87 alpha:0.2].CGColor;
circleShapeLayer.fillColor = [UIColor clearColor].CGColor;
circleShapeLayer.lineWidth= lineWidth;
circleShapeLayer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(left,left,width,width)].CGPath;
[self.layer addSublayer:circleShapeLayer];
// 第二層黃色黃色的圓
self.circleShapeLayer = [CAShapeLayer layer];
self.circleShapeLayer.strokeColor = [UIColor yellowColor].CGColor;
//
self.circleShapeLayer.fillColor = [UIColor clearColor].CGColor;
self.circleShapeLayer.lineWidth = lineWidth;
self.circleShapeLayer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(left,left,width,width)].CGPath;
self.circleShapeLayer.strokeEnd = 0;
[self.layer addSublayer:self.circleShapeLayer];
//設(shè)置漸變顏色
UIColor*endcolor = [UIColor redColor];
UIColor *startcolor = [UIColor greenColor];
CAGradientLayer*gradientLayer = [CAGradientLayer layer];
gradientLayer.frame=self.bounds;
// [gradientLayer setColors:[NSArray arrayWithObjects:(id)startcolor.CGColor,(id)endcolor.CGColor,nil]];
gradientLayer.colors = @[(id)startcolor.CGColor,(id)endcolor.CGColor,(id)[UIColor yellowColor].CGColor,(id)[UIColor purpleColor].CGColor];
// gradientLayer.locations = @[@.25, @.25, @.25, @.25];
gradientLayer.startPoint=CGPointMake(0,0);
//
gradientLayer.endPoint=CGPointMake(1,0);
[gradientLayer setMask:self.circleShapeLayer]; //用progressLayer來(lái)截取漸變層
[self.layer addSublayer:gradientLayer];
}
