一个View的渐变效果CAGradientLayer

产品需求如下：

屏幕快照 2018-10-08 下午2.36.11.png

在其背景色上绘制颜色渐变,从左到右的背景渐变效果。

我的思路：

这个布局很简单，我主要说下背景的渐变效果如何实现的即可。首先我需要一个bgView用来承载布局。这个背景渐变颜色是从左到右的，所以我还需要使用CAGradientLayer来实现渐变效果，然后将其添加到bgView.layer上面。

[_bgView.layer addSublayer:self.bottomMaskLayer];

代码块如下

-(UIView *)bgView{
    if (!_bgView) {
        _bgView = [[UIView alloc] init];
        _bgView.layer.masksToBounds = YES;
        _bgView.layer.cornerRadius = 8.0;
        _bgView.contentMode = UIViewContentModeScaleAspectFill;
        _bgView.clipsToBounds = YES;
        [_bgView.layer addSublayer:self.bottomMaskLayer];
    }
    return _bgView;
}

- (CAGradientLayer *)bottomMaskLayer {
    if (!_bottomMaskLayer) {
        _bottomMaskLayer = [CAGradientLayer layer];
        _bottomMaskLayer.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithHexString:@"#5C9BEC"]CGColor],(id)[[UIColor colorWithHexString:@"#0E65D7"]CGColor], nil];
        _bottomMaskLayer.startPoint = CGPointMake(0, .5);
        _bottomMaskLayer.endPoint = CGPointMake(1, .5);
//        _bottomMaskLayer.locations = @[@(0.15f),@(0.9f)];
        _bottomMaskLayer.borderWidth  = 0.0;
    }
    return _bottomMaskLayer;
}

- (void)addSubViews{
    [self.contentView addSubview:self.bgView];
}

- (void)setConstraints{
    [self.bgView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.mas_equalTo(self.contentView).offset(15);
        make.trailing.mas_equalTo(self.contentView).offset(-15);
        make.top.mas_equalTo(self.contentView);
        make.bottom.mas_equalTo(-10);
    }];
}

- (void)setCellWithModel:(SCDeviceSeriesModel *)obj{
    self.seriesNameLabel.text = obj.series_name;
    self.seriesValueLabel.text = [NSString stringWithFormat:@"%@%@",obj.series_value,obj.series_unit];
    self.bottomMaskLayer.frame = CGRectMake(0, 0, kSCREEN_WIDTH-30, 86);
}

以上就是针对View渐变效果整理的代码。下面简单说下CAGradientLayer。因为主要用的就是这个来实现的。

继承关系：

因为CAGradientLayer继承与CALayer，所以CAGradientLayer可以使用其父类CALayer所有开放的属性

作用：

1，CAGradientLayer用于处理渐变色的层结构
2，CAGradientLayer的渐变色可以做隐式动画
3，大部分情况下，CAGradientLayer时和CAShapeLayer配合使用的。
4，CAGradientLayer可以用作PNG的遮罩效果

关于CAGradientLayer的坐标系统
为什么要提到CAGradientLayer的坐标系统呢？因为渐变色的作用范围，变化梯度的方向，颜色变换的作用点都和CAGradientLayer的坐标系统有关

屏幕快照 2018-10-08 下午3.39.10.png

根据上图的坐标，设定好起点和终点，渐变色的方向就会根据起点指向终点的方向来渐变了。

1，CAGradientLayer的坐标系统是从（0，0）到（1，1）绘制的矩形
2，CAGradientLayer的frame值的size不为正方形的话，坐标系统会被拉伸
3，CAGradientLayer的startPoint和endPoint会直接决定颜色的绘制方向
4，CAGradientLayer的颜色分割点时以0到1的比例来计算的

设置渐变颜色

设置渐变的颜色，这是个数组，可以添加多个颜色

/* The array of CGColorRef objects defining the color of each gradient
 * stop. Defaults to nil. Animatable. */

@property(nullable, copy) NSArray *colors;

例如：

 //设定颜色组
    self.gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
                                  (__bridge id)[UIColor purpleColor].CGColor];

   _bottomMaskLayer.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithHexString:@"#5C9BEC"]CGColor],(id)[[UIColor colorWithHexString:@"#0E65D7"]CGColor], nil];
     

重要❗️

颜色属于CGColorRef类，所以必须加CGColor，而且前面还要加(id)。

设置颜色分割点

/* 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，会平均分布。locations的真实作用是控制渐变发生的位置。

    //设定颜色分割点
    self.gradientLayer.locations = @[@(0.5f) ,@(1.0f)];

设置渐变的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);

屏幕快照 2018-10-08 下午3.51.36.png

type

默认值是kCAGradientLayerAxial，表示按像素均匀变化。除了默认值也无其它选项。

/* The kind of gradient that will be drawn. Currently the only allowed
 * value is `axial' (the default value). */

@property(copy) NSString *type;