iOS之CAGradientLayer渐变色

一、CAGradientLayer介绍

CAGradientLayer根据官方的解释是渐变层在其背景色上绘制颜色渐变,即是填充层的形状(包括圆角),通俗的来说就是根据shape形状来绘制渐变色。
Gradient:本身就是梯度的意思,所以在这里就是作为渐变色来理解
1,CAGradientLayer用于处理渐变色的层结构
2,CAGradientLayer的渐变色可以做隐式动画
3,大部分情况下,CAGradientLayer时和CAShapeLayer配合使用的。
4,CAGradientLayer可以用作PNG的遮罩效果

关于CAGradientLayer的坐标系统

startPointendPoint分别为渐变的起始方向与结束方向,它是以矩形的四个角为基础的,(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;

startPointendPoint分别为渐变的起始方向与结束方向,它是以矩形的四个角为基础的,(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];

}

推荐阅读更多精彩内容

  • 1 CALayer IOS SDK详解之CALayer(一) http://doc.okbase.net/Hell...
    Kevin_Junbaozi阅读 3,483评论 2 18
  • 在iOS中系统框架提供了好多方法来供我们绘图,今天我们就研究渐变色. 1 用CAGradientLayer来实现...
    进阶的蚊子阅读 8,072评论 0 9
  • 一、CAGradientLayer介绍 CAGradientLayer根据官方的解释是渐变层在其背景色上绘制颜色渐...
    施忆阅读 21,636评论 2 21
  • 计算广告 标签(空格分隔): 读书笔记 第一章 在线广告综述 在线广告:以人群为投放目标、产品为导向。开启了大规模...
    驭浮生阅读 428评论 1 1
  • 整个夜晚,一直有光亮在窗外 一直有影子走进我的房间 枕畔的书和谁窃窃私语,书中的文字 向着哪个方向逃逸 抽屉,地板...
    望秦阅读 177评论 1 10