mask是CALayer的一个属性,它本身也是一个CALayer类。mask有和其他图层一样的绘制和布局属性。它类似于一个子图层,相对于父图层(即拥有该属性的图层)布局,但是它却不是一个普通的子图层。不同于那些绘制在父图层中的子图层,mask图层定义了父图层的部分可见区域。mask简单理解就是一个遮罩,mask图层区域外的任何区域不显示。
mask是一个可选的CALayer,它可以是根据透明度来遮盖layer的内容。mask图层的透明度的取值范围(0,1),而CALayer里有两个主要的属性和透明度有关,就是contents属性和backgroundCorlor属性。我们用contents最多的就是给它赋值一个图片,而图片是有透明通道和无透明通道的;backgroundColor属性也是有透明度的,而且clearColor的透明度是0。
当mask图层完全透明时,即透明度为0,则遮罩区域不显示
当mask图层完全不透明时,即透明度为1,则遮罩区域显示
当mask图层的透明度值在0~1之间,则mask图层会和被遮罩层内容混合
注意:被遮罩图层不能有父图层即superLayer,否则效果是不确定的。
例子1:生成圆角
CAShapeLayer *mask = [CAShapeLayer layer];
mask.path = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds cornerRadius:10].CGPath;
imageView.layer.mask= mask;
例子2,twitter开机动画
#import "TwitterView.h"
@interfaceTwitterView ()
@end
@implementation TwitterView
- (void)twitterMaskAnimation {
self.backgroundColor = [UIColor whiteColor];
CALayer *maskLayer = [CALayer layer];
maskLayer.bounds = CGRectMake(0,0,100,100);
maskLayer.position =self.center;
maskLayer.contents = (__bridgeid_Nullable)([UIImage imageNamed:@"twitter"].CGImage);
maskLayer.contentsGravity = kCAGravityResizeAspect;
maskLayer.anchorPoint = CGPointMake(0.5,0.5);
[self.layer setMask:maskLayer];
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"bounds"];
animation.delegate =self;
animation.duration =1;
animation.beginTime = CACurrentMediaTime()+1;
animation.timingFunctions =@[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
NSValue *initalBounds = [NSValue valueWithCGRect:maskLayer.bounds];
NSValue *middleBounds = [NSValue valueWithCGRect:CGRectMake(0,0,80,80)];
NSValue *finalBounds = [NSValue valueWithCGRect:CGRectMake(0,0,2000,2000)];
animation.values =@[initalBounds,middleBounds,finalBounds];
animation.keyTimes =@[@0,@0.3,@0.7];
[maskLayer addAnimation:animation forKey:@"bounds"];
}
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
self.layer.mask =nil;
[self removeFromSuperview];
}
@end
例子3,UILabel字体颜色渐变
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame=CGRectMake(100,100,200,20);
gradient.colors=@[(id)[UIColorredColor].CGColor, (id)[UIColoryellowColor].CGColor,(id)[UIColorgreenColor].CGColor];
[gradient setStartPoint:CGPointMake(0.0, 0.0)];
[gradient setEndPoint:CGPointMake(0.0, 1.0)];
UILabel*label = [[UILabel alloc]initWithFrame:gradient.bounds];
label.text=@"红黄绿渐变~~";
label.font = [UIFont boldSystemFontOfSize:25];
label.backgroundColor= [UIColor clearColor];
[self.view addSubview:label];
[self.view.layer addSublayer:gradient];
gradient.mask= label.layer;
例子4,进度条
CALayer*bgLayer = [CALayerlayer];
bgLayer.frame=CGRectMake(100,100,200,10);
bgLayer.backgroundColor = [UIColor lightGrayColor].CGColor;
bgLayer.masksToBounds=YES;
bgLayer.cornerRadius=5;
[self.view.layer addSublayer:bgLayer];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame= bgLayer.bounds;
[gradientLayer setColors:@[(id)[[UIColorredColor]CGColor],
(id)[[UIColoryellowColor]CGColor],
(id)[[UIColorgreenColor]CGColor],
(id)[[UIColorblueColor]CGColor],
(id)[[UIColorpurpleColor]CGColor]]];
[gradientLayer setLocations:@[@0.1,@0.3,@0.5,@0.7,@1]];
[gradientLayer setStartPoint:CGPointMake(0,0)];
[gradientLayer setEndPoint:CGPointMake(1,0)];
gradientLayer.masksToBounds=YES;
gradientLayer.cornerRadius=5;
[bgLayer addSublayer:gradientLayer];
CALayer*maskLayer = [CALayer layer];
maskLayer.frame=CGRectMake(0,0,0,10);
maskLayer.backgroundColor = [UIColor whiteColor].CGColor;
[gradientLayer setMask:maskLayer];
[CATransaction begin];
[CATransaction setDisableActions:NO];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[CATransaction setAnimationDuration:5];
maskLayer.frame=CGRectMake(0,0,200,10);
[CATransaction commit];
网友评论