CALayer子类二、CAGradientLayer

下面再说一个比较常用的子类CAGradientLayer，我们一般使用它生成平滑的颜色过渡。

属性

• colors
  在Layer中现实的几种颜色并完成完美过渡，和CAShapeLayer的path一样，colors是CAGradientLayer特殊属性的起点。
• locations
  颜色区间分布比例，默认为线性均匀分布。取值范围为0～1递增，一般来说其中的元素个数应与colors中的元素个数相同，不同时系统会自行处理分布规则。
  gradientLayer.locations = @[@(0.3),@(0.7)];
  

• startPoint、endPoint
startPoint决定了变色范围的起始点，endPoint决定了变色范围的结束点，两者的连线决定变色的趋势：
  

注意

locations是相对于startPoint和endPoint的变化范围而言的。

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.bounds = CGRectMake(0, 0, 200, 200);
gradientLayer.position = self.view.center;
[self.view.layer addSublayer:gradientLayer];
// 设置渐变颜色组
NSArray *colors = @[(__bridge id)[UIColor redColor].CGColor, 
                    (__bridge id)[UIColor blueColor].CGColor,
                    (__bridge id)[UIColor greenColor].CGColor];
gradientLayer.colors = colors;
// 设置对应的位置
gradientLayer.locations = @[@(0.3), @(0.5), @(0.7)];
// 决定渐变方向
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(0, 1);

// 0.3为起点，0.7位结束点
// 红色location为0，相当于0.3，绿色location为1，相当于0.7，效果一样
gradientLayer.locations = @[@(0), @(0.5), @(1)];
gradientLayer.startPoint = CGPointMake(0, 0.3);
gradientLayer.endPoint = CGPointMake(0, 0.7);

效果:

实例

- (void)gradient {
    
    UIView *drawingView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 50)];
    [self.view addSubview:drawingView];
    
    // 创建 CAGradientLayer 对象
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = drawingView.bounds;
    // 设置颜色组
    gradientLayer.colors = @[(__bridge id)[UIColor blackColor].CGColor,
                             (__bridge id)[UIColor whiteColor].CGColor,
                             (__bridge id)[UIColor blackColor].CGColor];
    // 设置渐变方向起点
    gradientLayer.startPoint = CGPointMake(0, 0.5);
    // 设置渐变方向终点
    gradientLayer.endPoint = CGPointMake(1, 0.5);
    //colors中各颜色对应的初始渐变点
    gradientLayer.locations = @[@(0.2), @(0.5), @(0.8)];
    //  添加渐变色到创建的 UIView 上去
    [drawingView.layer addSublayer:gradientLayer];
    
    // 文本信息
    UILabel *label = [[UILabel alloc] initWithFrame:drawingView.bounds];
    label.text = @"请滑动解锁";
    label.textAlignment = NSTextAlignmentCenter;
    label.font = [UIFont systemFontOfSize:30];
    [drawingView addSubview:label];
    // 将textLabel设置成graLayer的遮罩
    gradientLayer.mask = label.layer;
    
    // 动画
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"locations"];
    animation.fromValue = @[@(0), @(0), @(0.3)];
    animation.toValue = @[@(0.7), @(1), @(1)];
    animation.duration = 1.0f;
    animation.repeatCount = MAXFLOAT;
    [gradientLayer addAnimation:animation forKey:nil];
}

运行效果: