一、CAGradientLayer介绍
CAGradientLayer根据官方的解释是渐变层在其背景色上绘制颜色渐变，即是填充层的形状（包括圆角），通俗的来说就是根据shape形状来绘制渐变色。
Gradient：本身就是梯度的意思，所以在这里就是作为渐变色来理解
1，CAGradientLayer用于处理渐变色的层结构
2，CAGradientLayer的渐变色可以做隐式动画
3，大部分情况下，CAGradientLayer时和CAShapeLayer配合使用的。
4，CAGradientLayer可以用作PNG的遮罩效果
关于CAGradientLayer的坐标系统
startPoint与endPoint分别为渐变的起始方向与结束方向，它是以矩形的四个角为基础的，（0，0）为左上角、（1，0）为右上角、（0，1）为左下角、（1，1）为右下角，默认是值是（0.5，0）和（0.5，1）
1，CAGradientLayer的坐标系统是从（0，0）到（1，1）绘制的矩形
2，CAGradientLayer的frame值的size不为正方形的话，坐标系统会被拉伸
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;
设置渐变的颜色，这是个数组，可以添加多个颜色，例如：
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;
渐变颜色的区间分布，locations的数组长度和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分别为渐变的起始方向与结束方向，它是以矩形的四个角为基础的，（0，0）为左上角、（1，0）为右上角、（0，1）为左下角、（1，1）为右下角，默认是值是（0.5，0）和（0.5，1），例如：
//渐变从左下角开始
gradient.startPoint = CGPointMake(0, 1);
//渐变到右上角结束
gradient.endPoint = CGPointMake(1, 0);
image
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];
这代码实现的渐变效果就和上图一样，接下来带大家分析一下locations的作用。
在上面代码的基础上加上：
gradient.locations = @[@(0.0f), @(1.0f)];
则效果为：
image
这样的效果和没有加上这句代码的效果是一样的。
同样在上面代码的基础上加上：
gradient.locations = @[@(0.5f), @(1.0f)];
则效果为：
image
可以发现左下三角形没有渐变，渐变的开始只是在斜对角线的位置然后到（1，0）位置结束。所以locations的真实作用是控制渐变发生的位置。
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];
}
网友评论