一、CAGradientLayer介紹
CAGradientLayer根據(jù)官方的解釋是漸變層在其背景色上繪制顏色漸變倡怎，即是填充層的形狀（包括圓角）踢械，通俗的來說就是根據(jù)shape形狀來繪制漸變色趟薄。
Gradient：本身就是梯度的意思绽诚，所以在這里就是作為漸變色來理解
1，CAGradientLayer用于處理漸變色的層結(jié)構(gòu)
2杭煎，CAGradientLayer的漸變色可以做隱式動畫
3恩够，大部分情況下，CAGradientLayer時和CAShapeLayer配合使用的羡铲。
4蜂桶，CAGradientLayer可以用作PNG的遮罩效果
關(guān)于CAGradientLayer的坐標系統(tǒng)
startPoint與endPoint分別為漸變的起始方向與結(jié)束方向，它是以矩形的四個角為基礎的也切，（0扑媚，0）為左上角、（1雷恃，0）為右上角疆股、（0，1）為左下角倒槐、（1旬痹，1）為右下角，默認是值是（0.5讨越，0）和（0.5两残，1）
1，CAGradientLayer的坐標系統(tǒng)是從（0把跨，0）到（1人弓，1）繪制的矩形
2，CAGradientLayer的frame值的size不為正方形的話节猿，坐標系統(tǒng)會被拉伸
3，CAGradientLayer的startPoint和endPoint會直接決定顏色的繪制方向
4，CAGradientLayer的顏色分割點時以0到1的比例來計算的
二滨嘱、CAGradientLayer屬性介紹
CAGradientLayer包含的屬性很少峰鄙，而且都很好理解，接下來就帶大家簡便的熟悉一下：
1太雨、CALayer的所有屬性
因為CAGradientLayer繼承與CALayer吟榴，所以CAGradientLayer可以使用其父類CALayer所有開放的屬性。
2囊扳、colors
/* The array of CGColorRef objects defining the color of each gradient
* stop. Defaults to nil. Animatable. */
@property(nullable, copy) NSArray *colors;
設置漸變的顏色吩翻，這是個數(shù)組，可以添加多個顏色锥咸，例如：
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ù)組長度和color一致也可以不一致雪侥，這個值一般不用管它碗殷，默認是nil，會平均分布速缨。
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é)束方向，它是以矩形的四個角為基礎的旬牲，（0仿粹，0）為左上角、（1引谜，0）為右上角牍陌、（0，1）為左下角员咽、（1毒涧，1）為右下角，默認是值是（0.5贝室，0）和（0.5契讲，1），例如：
//漸變從左下角開始
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;
默認值是kCAGradientLayerAxial捡偏，表示按像素均勻變化。除了默認值也無其它選項峡迷。
三银伟、代碼
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];
這代碼實現(xiàn)的漸變效果就和上圖一樣你虹，接下來帶大家分析一下locations的作用。
在上面代碼的基礎上加上：
gradient.locations = @[@(0.0f), @(1.0f)];
則效果為：
這樣的效果和沒有加上這句代碼的效果是一樣的彤避。
同樣在上面代碼的基礎上加上：
gradient.locations = @[@(0.5f), @(1.0f)];
則效果為：
可以發(fā)現(xiàn)左下三角形沒有漸變傅物，漸變的開始只是在斜對角線的位置然后到（1，0）位置結(jié)束琉预。所以locations的真實作用是控制漸變發(fā)生的位置董饰。
CAGradientLayer時和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];
//設置漸變顏色
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來截取漸變層
[self.layer addSublayer:gradientLayer];
}
