QuartzCore之CAGradientLayer渐变色

原地址:学习做笔记使用

CAGradientLayer能够提供渐变色（官方叫：梯度色）可实现遮罩功能

在介绍渐变色之前我们首先了解Layer的坐标系

Layer坐标系.png

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

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

CAGradientLayer只提供了5个属性：

@interface CAGradientLayer : CALayer


@property(nullable, copy) NSArray *colors;
@property(nullable, copy) NSArray *locations;


@property CGPoint startPoint;
@property CGPoint endPoint;

@property(copy) NSString *type;
@end

代码示例：

 CAGradientLayer *gradientLayer  = [CAGradientLayer layer];
    self.gradientLayer = gradientLayer;
    [self.view.layer addSublayer:gradientLayer];
    
    gradientLayer.bounds = CGRectMake(0, 0, 200, 200);
    gradientLayer.position = self.view.center;
    // 颜色分配
    gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                          (__bridge id)[UIColor greenColor].CGColor,
                          (__bridge id)[UIColor blueColor].CGColor];
    
    // 颜色分割线
    //而locations并不是表示颜色值所在位置,它表示的是颜色在Layer坐标系相对位置处要开始进行渐变颜色了.
    gradientLayer.locations  = @[@(0.25), @(0.5), @(0.75)];
    // 起始点
    gradientLayer.startPoint = CGPointMake(0, 0);
    
    // 结束点
    gradientLayer.endPoint   = CGPointMake(1, 0);

运行效果：