美文网首页
CALayer之mask使用

CALayer之mask使用

作者: gpylove | 来源:发表于2019-01-05 15:39 被阅读6次

    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使用

          本文链接:https://www.haomeiwen.com/subject/repqrqtx.html