快捷導(dǎo)航

iOS Mask屬性的詳細(xì)介紹及應(yīng)用實(shí)例

更新時(shí)間：2016年11月03日 15:29:53 投稿：lqh

這篇文章主要介紹了iOS Mask屬性的詳細(xì)介紹的相關(guān)資料,這里對(duì)Mask的屬性進(jìn)行了詳細(xì)說(shuō)明并附簡(jiǎn)單代碼實(shí)例，幫助大家更直接學(xué)習(xí)理解，這部分知識(shí)，需要的朋友可以參考下

前言：

在開(kāi)發(fā)過(guò)程中，類似android和其他平臺(tái)的UI開(kāi)發(fā)方法，需要通過(guò)一個(gè)mask圖顯示部分UI或者Icon資源。ios的控件自帶alpha的值，但是這個(gè)值都是整個(gè)icon或者UI的透明效果，不能做到自定義的透明或者鏤空效果。我們必須借助于mask資源圖。

Mask屬性介紹

Mask平時(shí)用的最多的是masksToBounds 吧. 其實(shí)除此以外Mask使用場(chǎng)景很多,看完之后你會(huì)發(fā)現(xiàn)好真是好用的不要不要的...

先來(lái)了解下Mask屬性到底是什么?

Mask 英文解釋是蒙板/面罩,平時(shí)我們稱為蒙層. 在蘋果官方文檔里如下圖,意思是Mask是一個(gè)可選的Layer,它可以是根據(jù)透明度來(lái)掩蓋Layer的內(nèi)容.

這么一說(shuō)好像...還是不曉得有什么卵用...

那再看下面這個(gè)說(shuō)明,意思是Layer的透明度決定了Layer內(nèi)容是否可以顯示,非透明的內(nèi)容和背景可以顯示,透明的則無(wú)法顯示.

Mask 實(shí)例使用

實(shí)例1:漸變進(jìn)度條

先看"臉" 再談"內(nèi)涵"

整個(gè)動(dòng)畫效果主要可以分成4步驟:

1.創(chuàng)建一個(gè)CALayer 做為背景色進(jìn)度條

CALayer *bgLayer = [CALayer layer];

  bgLayer.frame = CGRectMake(kNumberMarkWidth / 2, self.numberMarkView.bottom + 10.f, self.width - kNumberMarkWidth / 2, kProcessHeight);

  bgLayer.backgroundColor = [UIColor colorWithHex:0xF5F5F5].CGColor;

  bgLayer.masksToBounds = YES;

  bgLayer.cornerRadius = kProcessHeight / 2;

  [self.layer addSublayer:bgLayer];

2.創(chuàng)建一個(gè)CAGradientLayer 漸變效果的Layer

self.gradientLayer = [CAGradientLayer layer];
  self.gradientLayer.frame = bgLayer.frame;
  self.gradientLayer.masksToBounds = YES;
  self.gradientLayer.cornerRadius = kProcessHeight / 2;
　　// 設(shè)置漸變顏色數(shù)組
  [self.gradientLayer setColors:[NSArray arrayWithObjects:
                  (id)[[UIColor colorWithHex:0xFF6347] CGColor],
                  [(id)[UIColor colorWithHex:0xFFEC8B] CGColor],
                  (id)[[UIColor colorWithHex:0xEEEE00] CGColor],
                  (id)[[UIColor colorWithHex:0x7FFF00] CGColor],
                  nil]];
　　// 設(shè)置漸變位置數(shù)組
  [self.gradientLayer setLocations:@[@0.3, @0.5, @0.7, @1]];
　　// 設(shè)置漸變開(kāi)始和結(jié)束位置
  [self.gradientLayer setStartPoint:CGPointMake(0, 0)];
  [self.gradientLayer setEndPoint:CGPointMake(1, 0)];

3.創(chuàng)建一個(gè)Mask Layer,并設(shè)置為CAGradientLayer漸變層的Mask. 然后通過(guò)設(shè)置maskLayer 寬度來(lái)控制進(jìn)度了. 是不是很簡(jiǎn)單,不過(guò)好像沒(méi)有感覺(jué)不出Mask的強(qiáng)大之處...

　self.maskLayer = [CALayer layer];
   self.maskLayer.frame = CGRectMake(0, 0, (self.width - kNumberMarkWidth / 2) * self.percent / 100.f, kProcessHeight);
  [self.gradientLayer setMask:self.maskLayer];

- (void)circleAnimation { // 進(jìn)度條動(dòng)畫
  
  [CATransaction begin];
  [CATransaction setDisableActions:NO];
  [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
  [CATransaction setAnimationDuration:kAnimationTime];
  self.maskLayer.frame = CGRectMake(0, 0, (self.width - kNumberMarkWidth / 2) * _percent / 100.f, kProcessHeight);
  [CATransaction commit];
}

4.文字漸變,這個(gè)就能看出Mask 的特點(diǎn)了.

先創(chuàng)建一個(gè)Label展示分?jǐn)?shù),再同第2步創(chuàng)建一個(gè)一樣的漸變CAGradientLayer.將Label的關(guān)聯(lián)圖層設(shè)置為漸變CAGradientLayer 的Mask, 這樣就OK了.

上面有說(shuō)過(guò)Mask屬性特點(diǎn)是內(nèi)容非透明則可以顯示,透明則隱藏.

實(shí)例中,Label做為漸變層的Mask, Label中文字部分是非透明的,其他是透明的.那么文字和文字背景(這里就是漸變層)可以顯示.大概就像鏤空文字部分,然后顯示出底下的漸變層.

最后只要移動(dòng)Label 的位置就能看到我們所要的效果文字顏色漸變. 下左圖設(shè)置了Mask , 下右圖未設(shè)置Mask.

- (void)setNUmberMarkLayer { // 提示文字設(shè)置漸變色
  
  CAGradientLayer *numberGradientLayer = [CAGradientLayer layer];
  numberGradientLayer.frame = CGRectMake(0, kTopSpaces, self.width, kNumberMarkHeight);
  [numberGradientLayer setColors:self.colorArray];
  [numberGradientLayer setLocations:self.colorLocationArray];
  [numberGradientLayer setStartPoint:CGPointMake(0, 0)];
  [numberGradientLayer setEndPoint:CGPointMake(1, 0)];
  [self.layer addSublayer:numberGradientLayer];
  [numberGradientLayer setMask:self.numberMark.layer];
  self.numberMark.frame = numberGradientLayer.bounds;
}

源碼可以進(jìn)github查看: https://github.com/xl20071926/LXGradientProcessView

另外還有類似的仿照芝麻信用,用Mask和CAShaperLayer 做的,有興趣的也可以看下:https://github.com/xl20071926/LXCircleAnimationView

實(shí)例2:鏤空效果

新手引導(dǎo)大多數(shù)app都會(huì)有這個(gè)功能,然而據(jù)了解蠻多就是直接貼張圖片上面就搞定了.

額,這樣做確實(shí)簡(jiǎn)單,可是這樣好Low而且做出來(lái)的效果不好,那我們來(lái)用逼格高點(diǎn)的鏤空方式實(shí)現(xiàn):

先來(lái)一個(gè)簡(jiǎn)單的效果圖:

實(shí)現(xiàn)起來(lái)也很簡(jiǎn)單,主要分3個(gè)步驟:

1.創(chuàng)建一個(gè)鏤空的路徑:

　　UIBezierPath 有個(gè)原生的方法- (void)appendPath:(UIBezierPath *)bezierPath, 這個(gè)方法作用是倆個(gè)路徑有疊加的部分則會(huì)鏤空.

　　這個(gè)方法實(shí)現(xiàn)原理應(yīng)該是path的FillRule 默認(rèn)是FillRuleEvenOdd(CALayer 有一個(gè)fillRule屬性的規(guī)則就有kCAFillRuleEvenOdd), 而EvenOdd 是一個(gè)奇偶規(guī)則,奇數(shù)則顯示,偶數(shù)則不顯示.疊加則是偶數(shù)故不顯示.

2.創(chuàng)建CAShapeLayer 將鏤空path賦值給shapeLayer

3.將shapeLayer 設(shè)置為背景視圖的Mask

UIView *backgroundView = [[UIView alloc] init];
  backgroundView.frame = self.view.bounds;
  backgroundView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.7];
  [self.view addSubview:backgroundView];
  // 創(chuàng)建一個(gè)全屏大的path
  UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.view.bounds];
  // 創(chuàng)建一個(gè)圓形path
  UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.center.x, self.view.center.y - 25)
                               radius:50
                             startAngle:0
                              endAngle:2 * M_PI
                              clockwise:NO];
  [path appendPath:circlePath];
  
  CAShapeLayer *shapeLayer = [CAShapeLayer layer];
  shapeLayer.path = path.CGPath;
  backgroundView.layer.mask = shapeLayer;

順便提下,在實(shí)際開(kāi)發(fā)中可能遇到這種需求,當(dāng)tableView 滑動(dòng)到某個(gè)位置的時(shí)候才顯示新手引導(dǎo).

這時(shí)候就需要將tableView上的坐標(biāo)轉(zhuǎn)化為相對(duì)于屏幕的坐標(biāo). 可用原生的方法:

- (CGRect)convertRect:(CGRect)rect toView:(nullable UIView *)view;

- (CGRect)convertRect:(CGRect)rect fromView:(nullable UIView *)view;

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: