CALayer之mask使用

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];

你可能感兴趣的:(CALayer之mask使用)