渐变色研究CAGradientLayer(+文字渐变)

- (CAGradientLayer *)gradientLayer:(UIView *)view{
    
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = view.frame;
    
    gradientLayer.colors = @[(id)RGB(1, 0.28, 0.82).CGColor,
                             (id)RGB(1, 0.14, 0.58).CGColor];
    gradientLayer.startPoint = CGPointMake(0, 0.5);
    gradientLayer.endPoint = CGPointMake(1, 0.5);
    
    return gradientLayer;
}

  [_customNav.layer insertSublayer:[self gradientLayer:_customNav] atIndex:0];

渐变轴线的起点和终点

@property CGPoint startPoint;
@property CGPoint endPoint;

image.png

调整一下起点和终点的位置，再来看一下效果

gradientLayer.startPoint = CGPointMake(0, 0.5);
gradientLayer.endPoint = CGPointMake(1, 0.5);

image.png

颜色值位置

@property(nullable, copy) NSArray<NSNumber *> *locations;

我们可以通过locations属性，设置各色值在轴线上的位置：

gradientLayer.locations = @[@0.0, @0.75, @1.0];

image.png

⚠️ 注意：locations属性中的值要与colors属性中的值一一对应。
而且locations属性是支持动画效果的，可以看出CAGradientLayer是可以实现很多炫酷的动画效果的。

知识点转自:http://www.jianshu.com/p/8c45d8a1645d

文字渐变效果

本文讲述三种方式实现文字渐变效果：

• 使用colorWithPatternImage

• CAGradientLayer设置mask

• 自定义label在drawRect里使用文字mask绘制渐变

1、使用colorWithPatternImage

这是最简单的实现渐变的方式，一行代码搞定

_label.textColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"3.png"]];

使用这种不仅仅可是实现渐变效果，还可以根据图片内容实现不同的视觉效果，例如:

[图片上传失败...(image-b4a894-1514876312520)]

2、CAGradientLayer设置mask

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor greenColor].CGColor, (id)[UIColor blueColor].CGColor];
    //gradientLayer.locations = @[@0, @0.5, @1];// 默认就是均匀分布
    gradientLayer.startPoint = CGPointMake(0, 0.5);
    gradientLayer.endPoint = CGPointMake(1, 0.5);
    gradientLayer.frame = _label2.frame;
    gradientLayer.mask = _label2.layer;
    _label2.layer.frame = gradientLayer.bounds;
    [self.view.layer addSublayer:gradientLayer];

3、自定义label在drawRect里使用文字mask绘制渐变

注意自定义label的backgroundColor要设置成clearColor

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();

    // 获取文字mask
    [@"我只在乎你" drawInRect:self.bounds withAttributes:@{NSFontAttributeName : self.font}];
    CGImageRef textMask = CGBitmapContextCreateImage(context);

    // 清空画布
    CGContextClearRect(context, rect);

    // 设置蒙层
    CGContextTranslateCTM(context, 0.0, self.bounds.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);
    CGContextClipToMask(context, rect, textMask);

    // 绘制渐变
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGFloat locations[] = {0, 0.5, 1};
    CGFloat colors[] = {1.0,0.0,0.0,1.0,
                        0.0,1.0,0.0,1.0,
                        0.0,0.0,1.0,1.0};
    CGGradientRef gradient=CGGradientCreateWithColorComponents(colorSpace, colors, locations, 3);
    CGPoint start = CGPointMake(0, self.bounds.size.height / 2.0);
    CGPoint end = CGPointMake(self.bounds.size.width, self.bounds.size.height / 2.0);
    CGContextDrawLinearGradient(context, gradient, start, end, kCGGradientDrawsBeforeStartLocation);

    // 释放
    CGColorSpaceRelease(colorSpace);
    CGGradientRelease(gradient);
    CGImageRelease(textMask);
}

如有纰漏欢迎指正，如果你还有其他实现方式欢迎交流。

链接：https://www.jianshu.com/p/fe06704e11a0