1

本文講述三種方式實現文字漸變效果：

• 使用colorWithPatternImage
• CAGradientLayer設置mask
• 自定義label在drawRect里使用文字mask繪制漸變

1、使用colorWithPatternImage

這是最簡單的實現漸變的方式，一行代碼搞定

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

使用這種不僅僅可是實現漸變效果，還可以根據圖片內容實現不同的視覺效果，例如:

圖片紋理效果

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);
}

如有紕漏歡迎指正，如果你還有其他實現方式歡迎交流。