CALayer Mask遮蓋圖層(iOS論文系列)

SSBun發表於2017-12-13

mask Property An optional layer whose alpha channel is used to mask the layer’s content.

  • Declaration
複製程式碼

SWIFT var mask: CALayer?


* **Discussion**
The layer’s alpha channel determines how much of the layer’s content and background shows through. Fully or partially opaque pixels allow the underlying content to show through but fully transparent pixels block that content.
The default value of this property is nil nil. When configuring a mask, remember to set the size and position of the mask layer to ensure it is aligned properly with the layer it masks.
* **Special Considerations**
The layer you assign to this property must not have a superlayer. If it does, the behavior is undefined.
* **Availability**
Available in iOS 3.0 and later.
----

以上是**Mask**在Apple的的官方文件中的描述,不難看出Mask在一般情況下是不存在,預設是nil.**Mask**相當於一個遮蓋,覆蓋在檢視Layer的上層,如果將檢視Layer稱之為`ContentLayer`,可以通過控制**Mask**的`opacity(=alpha)`,`bounds`和`<path>路徑`來控制`ContentLayer`的顯示範圍和透明度 
* 在**Mask**範圍之外的`ContentLayer`將不被顯示(相當於沒有繪製在螢幕上,可以看到`ContentLayer`背後的檢視)
* 在**Mask**範圍之內的`ContentLayer = ContentLayer的opacity * **Mask**的opacity`,也就意味著**Mask**的`opacity`為0或1時`ContentLayer`顯示或不顯示,當其為0.x時`ContentLayer`為半透明狀態
* 特別需要注意的是,**Mask**的背景色為`clearColor`也會被認為時`opacity`為0
 
**官方文件中已經警告:當你給Mask賦值時需要注意Mask不能擁有superLayer,否者Mask將會失效產生意想不到的後果**

----
**機智的小夥伴們可以發現Mask並沒有指定圖層型別,在大綱中,我們已經知道了CALayer的型別有很多種,這樣的話就可以利用一些特殊的圖層實現一些新奇的動畫效果:**

* **此為一個類似於透鏡的效果**

![MaskFilter.gif](http://upload-images.jianshu.io/upload_images/1594222-76762237b597cdb5.gif?imageMogr2/auto-orient/strip)


複製程式碼

import UIKit

class ViewController: UIViewController {          var myImageView:UIImageView!     var maskLayer:CAShapeLayer!

override func viewDidLoad() {         super.viewDidLoad()         setupUI()     }          func setupUI() {         let image = UIImage(named: "_snqARKTgoc")

    let inputImage = CIImage(CGImage: image!.CGImage!)
複製程式碼

let filter = CIFilter(name: "CIColorControls")         filter?.setValue(inputImage, forKey: "inputImage")         filter?.setValue(0.5, forKey: "inputBrightness")         let outputImage = UIImage(CIImage: filter!.outputImage!)

let bgImageView = UIImageView() bgImageView.image = outputImage         bgImageView.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.width * (image!.size.height/image!.size.width));         bgImageView.center = CGPointMake(self.view.center.x, self.view.center.y - 1)         self.view.addSubview(bgImageView)                  let imageView = UIImageView()         imageView.image = image         imageView.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.width * (image!.size.height/image!.size.width));         myImageView = imageView         imageView.center = self.view.center         self.view.addSubview(imageView)                  let shapLayer = CAShapeLayer()         let path = CGPathCreateMutable()         maskLayer = shapLayer         shapLayer.bounds = CGRectMake(0, 0, 100, 100)         CGPathAddEllipseInRect(path, nil, CGRectMake(0, 0, 100, 100))         shapLayer.opacity = 0.5         shapLayer.position = CGPointMake(200, 100)         shapLayer.path = path         shapLayer.fillColor = UIColor.blackColor().CGColor         imageView.layer.mask = shapLayer     }          override func touchesBegan(touches: Set, withEvent event: UIEvent?) {         for touch in touches {             let touchPoint = touch.locationInView(self.view)             if self.myImageView.frame.contains(touchPoint) {                 let realPoint = touch.locationInView(self.myImageView)                 maskLayer.position = realPoint             }         }     }

override func didReceiveMemoryWarning() {         super.didReceiveMemoryWarning()         // Dispose of any resources that can be recreated.     }

}

----
#####擴充套件:
* **使用其他的圖層(`CAGradientLayer`)可以實現更多炫酷的效果,如iPhone的左滑解鎖字型高亮,詳細的實現方式會在後續的篇幅中結合`CAGradientLayer`一塊總結**
複製程式碼

相關文章