CALayer mask屬性實現漸變色Label、刮刮卡效果

寫在前面：
mask就是PS中的遮罩；
遮罩層必須至少有兩個圖層，上面的一個圖層為“遮罩層”，下面的稱“被遮罩層”；這兩個圖層中只有相重疊的地方才會被顯示。也就是說在遮罩層中有物件的地方就是“透明”的，可以看到被遮罩層中的物件，而沒有物件的地方就是不透明的，被遮罩層中相應位置的物件是看不見的。

一、CALayer mask屬性實現顏色漸變的label
二、CALayer mask屬性實現，刮刮卡效果

一、CALayer mask屬性實現顏色漸變的label
封裝一個UIView-GradientColorsLabel, 公開text(要顯示的文字)、colorsArray(漸變顏色陣列)屬性；

GradientColorsLabel.h檔案

@interface GradientColorsLabel : UIView
@property (nonatomic, copy) NSString *text;
@property (nonatomic, strong) NSMutableArray<UIColor*> *colorsArray;
@end

GradientColorsLabel.m檔案

#import "GradientColorsLabel.h"
@interface GradientColorsLabel ()
@property (nonatomic, strong) CAGradientLayer *gradientLayer;
@property (nonatomic, strong) UILabel *label;
@end

@implementation GradientColorsLabel
-(instancetype)initWithFrame:(CGRect)frame {
    
    if (self = [super initWithFrame:frame]) {
        //梯度圖層 - 實現顏色漸變 - 被遮障層
        _gradientLayer = [CAGradientLayer layer];
        _gradientLayer.frame = CGRectMake(0, 0, frame.size.width, frame.size.height);
        _gradientLayer.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor yellowColor].CGColor, (id)[UIColor greenColor].CGColor];
        [_gradientLayer setStartPoint:CGPointMake(0, 0)];
        [_gradientLayer setEndPoint:CGPointMake(0, 1.0)];
        [self.layer addSublayer:_gradientLayer];

        //要顯示的文字標籤控制元件 - 遮障層
        _label = [[UILabel alloc]initWithFrame:_gradientLayer.bounds];
        _label.font = [UIFont systemFontOfSize:18.0];
        _label.textAlignment = NSTextAlignmentCenter;
        [self addSubview:_label];
        
        //設定遮障層 - 實現蒙層
        _gradientLayer.mask = _label.layer;
    }
    return self;
}

-(void)setText:(NSString *)text {
    _text = text;
    _label.text = text;
}

-(void)setColorsArray:(NSMutableArray<UIColor *> *)colorsArray {
    _colorsArray = colorsArray;
    NSMutableArray *newColors = [NSMutableArray array];
    for (UIColor *color in colorsArray) {
        [newColors addObject:(id)color.CGColor];
    }
    
    _gradientLayer.colors = newColors;
    [_gradientLayer setNeedsDisplay];
}
@end

呼叫, 很簡單:

#define Screen_width [UIScreen mainScreen].bounds.size.width
#define Screen_height [UIScreen mainScreen].bounds.size.height

//顏色漸變標籤
    CGFloat width = 300;
    CGFloat height = 80;
    GradientColorsLabel *gradientLabel = [[GradientColorsLabel alloc]initWithFrame:CGRectMake((Screen_width-width)/2, 100, width, height)];
    gradientLabel.text = @"遮障層實現顏色漸變標籤";
    [self.view addSubview:gradientLabel];

二、CALayer mask屬性實現，刮刮卡效果
封裝了一個ScratchCardView, 公開image屬性設定背景圖片；reset重置方法；
用到了CAShapeLayer畫圖，設定路徑path；
ScratchCardView.h檔案

#import <UIKit/UIKit.h>
@interface ScratchCardView : UIView
@property (nonatomic, strong) UIImage *image;
-(void)reset;
@end

ScratchCardView.m檔案

#import "ScratchCardView.h"
@interface ScratchCardView ()
@property (nonatomic, strong) CALayer         *imageLayer;
@property (nonatomic, strong) CAShapeLayer    *shapeLayer;
@property (nonatomic, assign) CGMutablePathRef path;

@property (nonatomic, assign, getter = isOpen) BOOL open;
@end

@implementation ScratchCardView
-(instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        //這是刮刮卡背景色
        self.backgroundColor = [UIColor darkGrayColor];
        
        //背景圖片層 - 被遮障層
        _imageLayer = [CALayer layer];
        _imageLayer.backgroundColor = [UIColor lightGrayColor].CGColor;
        _imageLayer.frame = self.bounds;
        [self.layer addSublayer:_imageLayer];
        
       //遮障層
        _shapeLayer = [CAShapeLayer layer];
        _shapeLayer.lineWidth = 20.0;
        _shapeLayer.strokeColor = [UIColor whiteColor].CGColor;
        _shapeLayer.fillColor = nil;
        _shapeLayer.frame = self.bounds;
        _shapeLayer.lineCap = kCALineCapRound;
        _shapeLayer.lineJoin = kCALineJoinRound;
        
        //設定遮障層
        _imageLayer.mask = _shapeLayer;
        
        //畫圖路徑
        self.path = CGPathCreateMutable();
    }
    return self;
}
//重置
-(void)reset {
    
    if (_path) {
        CGPathRelease(_path);
    }

    _imageLayer.mask = NULL;
    _imageLayer.mask = _shapeLayer;
    
    self.open = NO;
    _path = CGPathCreateMutable();
    _shapeLayer.path = _path;
}
//手勢
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    [super touchesBegan:touches withEvent:event];
    if (!self.isOpen) {
        UITouch *touch = [touches anyObject];
        CGPoint point = [touch locationInView:self];
        CGPathMoveToPoint(self.path, NULL, point.x, point.y);
        CGMutablePathRef path = CGPathCreateMutableCopy(self.path);
        self.shapeLayer.path = path;
        CGPathRelease(path);
    }
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    [super touchesMoved:touches withEvent:event];
    if (!self.isOpen) {
        UITouch *touch = [touches anyObject];
        CGPoint point = [touch locationInView:self];
        CGPathAddLineToPoint(self.path, NULL, point.x, point.y);
        CGMutablePathRef path = CGPathCreateMutableCopy(self.path);
        self.shapeLayer.path = path;
        CGPathRelease(path);
    }
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    [super touchesEnded:touches withEvent:event];
    if (!self.isOpen) {
        [self checkForOpen];
    }
}

- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
{
    [super touchesCancelled:touches withEvent:event];
    if (!self.isOpen) {
        [self checkForOpen];
    }
}
//檢查是否已刮開 邏輯-可以自定義
- (void)checkForOpen
{
    CGRect rect = CGPathGetPathBoundingBox(self.path);
    
    NSArray *pointsArray = [self getPointsArray];
    for (NSValue *value in pointsArray) {
        CGPoint point = [value CGPointValue];
        if (!CGRectContainsPoint(rect, point)) {
            return;
        }
    }
    
    NSLog(@"完成");
    self.open = YES;
    self.imageLayer.mask = NULL;
}

- (NSArray *)getPointsArray
{
    NSMutableArray *array = [NSMutableArray array];
    
    CGFloat width = CGRectGetWidth(self.bounds);
    CGFloat height = CGRectGetHeight(self.bounds);
    
    CGPoint topPoint = CGPointMake(width/2, height/6);
    CGPoint leftPoint = CGPointMake(width/6, height/2);
    CGPoint bottomPoint = CGPointMake(width/2, height-height/6);
    CGPoint rightPoint = CGPointMake(width-width/6, height/2);
    
    [array addObject:[NSValue valueWithCGPoint:topPoint]];
    [array addObject:[NSValue valueWithCGPoint:leftPoint]];
    [array addObject:[NSValue valueWithCGPoint:bottomPoint]];
    [array addObject:[NSValue valueWithCGPoint:rightPoint]];
    
    return array;
}

//set方法
- (void)setImage:(UIImage *)image
{
    _image = image;
    self.imageLayer.contents = (id)image.CGImage;
}
@end