CALayer
有一個屬性叫做mask
腕铸。
這個屬性本身就是個CALayer
類型惜犀,有和其他圖層一樣的繪制和布局屬性。
它類似于一個子圖層狠裹,相對于父圖層(即擁有該屬性的圖層)布局虽界,但是它卻不是一個普通的子圖層。
不同于那些繪制在父圖層中的子圖層涛菠,mask
圖層定義了父圖層的部分可見區(qū)域莉御。
mask
圖層的Color
屬性是無關緊要的,真正重要的是圖層的輪廓俗冻。mask
屬性就像是一個餅干切割機礁叔,mask
圖層實心的部分會被保留下來,其他的則會被拋棄
如果mask
圖層比父圖層要小迄薄,只有在mask
圖層里面的內(nèi)容才是它關心的琅关,除此以外的一切都會被隱藏起來。
如下圖
我們自己試試看
比如有兩個Layer
, 一個是紅色的正方形,
一個小一點的綠色圓
如果把小一點的綠色圓當做紅色正方形的maskLayer
, 則最終只會在顯示綠色圓范圍內(nèi)顯示出原本紅色正方形的內(nèi)容
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//創(chuàng)建一個藍色的Layer
CALayer *foregroundLayer = [CALayer layer];
foregroundLayer.bounds = CGRectMake(0, 0, 100, 100);
foregroundLayer.backgroundColor = [UIColor redColor].CGColor;
//創(chuàng)建一個路徑
UIBezierPath *apath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, 60, 60)];
//創(chuàng)建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
我們再可以給遮罩層添加動畫, 實現(xiàn)更加絢麗的效果
比如中間中間小圓逐漸變大
#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];
//創(chuàng)建一個CAShape
CALayer *bgLayer = [CALayer layer];
//設置大小顏色和位置
bgLayer.bounds = CGRectMake(0, 0, 200, 200);
bgLayer.backgroundColor = [UIColor redColor].CGColor;
bgLayer.position = self.view.center;
//創(chuàng)建一個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];
}
}