原地址:學(xué)習(xí)做筆記使用

CAGradientLayer能夠提供漸變色（官方叫：梯度色）可實(shí)現(xiàn)遮罩功能

在介紹漸變色之前我們首先了解Layer的坐標(biāo)系

Layer坐標(biāo)系.png

根據(jù)上圖的坐標(biāo)，設(shè)定好起點(diǎn)和終點(diǎn)，漸變色的方向就會(huì)根據(jù)起點(diǎn)指向終點(diǎn)的方向來漸變了。呆會(huì)代碼里會(huì)有寫。

1，CAGradientLayer的坐標(biāo)系統(tǒng)是從（0，0）到（1，1）繪制的矩形
2，CAGradientLayer的frame值的size不為正方形的話，坐標(biāo)系統(tǒng)會(huì)被拉伸
3，CAGradientLayer的startPoint和endPoint會(huì)直接決定顏色的繪制方向
4，CAGradientLayer的顏色分割點(diǎn)時(shí)以0到1的比例來計(jì)算的

CAGradientLayer只提供了5個(gè)屬性：

@interface CAGradientLayer : CALayer


@property(nullable, copy) NSArray *colors;
@property(nullable, copy) NSArray<NSNumber *> *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坐標(biāo)系相對(duì)位置處要開始進(jìn)行漸變顏色了.
    gradientLayer.locations  = @[@(0.25), @(0.5), @(0.75)];
    // 起始點(diǎn)
    gradientLayer.startPoint = CGPointMake(0, 0);
    
    // 結(jié)束點(diǎn)
    gradientLayer.endPoint   = CGPointMake(1, 0);

運(yùn)行效果：