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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,163评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,301评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,089评论 0 352
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,093评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,110评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,079评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,005评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,840评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,278评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,497评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,394评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,980评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,628评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,649评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,548评论 2 352

推荐阅读更多精彩内容