CALayer之mask屬性-遮罩

CALayer有一個屬性叫做mask。

這個屬性本身就是個CALayer類型，有和其他圖層一樣的繪制和布局屬性。

它類似於一個子圖層，相對於父圖層（即擁有該屬性的圖層）布局，但是它卻不是一個普通的子圖層。

不同於那些繪制在父圖層中的子圖層，mask圖層定義了父圖層的部分可見區域。

mask圖層的Color屬性是無關緊要的，真正重要的是圖層的輪廓。mask屬性就像是一個餅干切割機，mask圖層實心的部分會被保留下來，其他的則會被拋棄

如果mask圖層比父圖層要小，只有在mask圖層里面的內容才是它關心的，除此以外的一切都會被隱藏起來。

如下圖

我們自己試試看

比如有兩個Layer, 一個是紅色的正方形,

一個小一點的綠色圓

如果把小一點的綠色圓當做紅色正方形的maskLayer, 則最終只會在顯示綠色圓范圍內顯示出原本紅色正方形的內容

我們上代碼

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    //創建一個藍色的Layer
    CALayer *foregroundLayer        = [CALayer layer];
    foregroundLayer.bounds          = CGRectMake(0, 0, 100, 100);
    foregroundLayer.backgroundColor = [UIColor redColor].CGColor;
    
    //創建一個路徑
    UIBezierPath *apath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, 60, 60)];
    
    //創建maskLayer
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.path = apath.CGPath;
    maskLayer.fillColor = [UIColor greenColor].CGColor;
    maskLayer.fillRule = kCAFillRuleEvenOdd;
    
    //設置位置
    foregroundLayer.position = self.view.center;
    //設置mask
    foregroundLayer.mask = maskLayer;
    
    [self.view.layer addSublayer:foregroundLayer];
    
}

@end

 

我們再可以給遮罩層添加動畫, 實現更加絢麗的效果

比如中間中間小圓逐漸變大

#import "ViewController.h"

static CGFloat num;

@interface ViewController ()

@property (nonatomic, strong) CAShapeLayer *circle;
@property (nonatomic, strong) CADisplayLink *link;

@end

@implementation ViewController

@synthesize circle;

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    //創建一個CAShape
    CALayer *bgLayer = [CALayer layer];
    
    //設置大小顏色和位置
    bgLayer.bounds          = CGRectMake(0, 0, 200, 200);
    bgLayer.backgroundColor = [UIColor redColor].CGColor;
    bgLayer.position        = self.view.center;
    
    //創建一個CAShapeLayer作為MaskLayer
    circle = [CAShapeLayer layer];
    
    //設置路徑
    circle.path      = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100)
                                                      radius:20
                                                  startAngle:0
                                                    endAngle:2 * M_PI
                                                   clockwise:YES].CGPath;
    circle.lineWidth = 5;
    circle.fillColor = [UIColor greenColor].CGColor;
    circle.fillRule  = kCAFillRuleEvenOdd;
    
    //設置maskLayer
    bgLayer.mask = circle;
    
    [self.view.layer addSublayer:bgLayer];
    
    //添加計時器
    self.link = [CADisplayLink displayLinkWithTarget:self selector:@selector(action)];
    [self.link addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
}

- (void)action {
    
    num ++;
    
    circle.path      = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100)
                                                      radius:20 + num
                                                  startAngle:0
                                                    endAngle:2 * M_PI
                                                   clockwise:YES].CGPath;
    
    if (num > 1000) {
        [self.link invalidate];
    }
}