Swift — 玩玩 遮罩（Mask）

上一篇說說 CALayer 大致上認識了一下 Layer 的運作以及為什麼需要 Layer ，這次我們來試試看 Layer 裡的 Mask 有什麼有趣的功能。

Mask（ 遮罩 ）

一個 Optional 的 Layer，其 alpha 途徑用於遮蓋 Layer 的內容。

其實 UIView 裡面也有相同的屬性，只要把上述的 Layer 更換為 View 即可。

至於要使用 Layer 與 View 的抉擇可以查看這篇文章：

详解CALayer 和 UIView的区别和联系

用簡單的方式來說，當我們有兩個 Layer 物件時，上面的 Layer 稱之為 “遮罩層”，下面的 Layer 為 “被遮罩層”，當這兩個 Layer 有重疊的地方才會顯示。

我們先用 Layer 的方式實現這個效果，首先我們先拖入一張與 View 一樣大的 UIImageView 到 Stroyboard：

只是一隻貓的圖片

現在我們需要做出遮罩效果，所以我們需要用到 mask 這個屬性：

let mask = CALayer()
mask.backgroundColor = UIColor.black.cgColor 
// 這邊我們必須設定顏色，否則沒有效果
mask.frame = CGRect(x: 100, y: 100, width: 200, height: 200)
mask.cornerRadius = mask.frame.width / 2
myImage.layer.mask = mask
// 最後將我們圖片的 layer.mask 設置為我們剛剛所創建的 mask

圓形 Layer 遮罩效果

可以看到我們 Layer 與圖片重疊的地方才會顯示，當然我們也可以自己去找一張圖片來當我們的 mask ，我們從網路上找了一個蘋果的 icon 做遮罩：

mask.contents = UIImage(named: "apple")?.cgImage
// 這邊我們把 Layer 內容設置我們 apple 的圖片

蘋果圖片遮罩效果

當然我們也可以使用 CAShapeLayer 畫出一個我們遮罩的形狀，然後再套用在上面，這邊我們用 CAShapeLayer 畫出一個類似沙漏的形狀，並把他設置為我們圖片遮罩：

let mask = CAShapeLayer()
var path = UIBezierPath()
mask.fillColor = UIColor.black.cgColor
path.move(to: CGPoint(x: 100, y: 100))
path.addLine(to: CGPoint(x: 300, y: 100))
path.addLine(to: CGPoint(x: 100, y: 600))
path.addLine(to: CGPoint(x: 300, y: 600))
path.close()
mask.path = path.cgPath
myImage.layer.mask = mask

使用 CAShapeLayer 畫出遮罩

當然只有簡單畫出幾個遮罩沒什麼意思，因為本身很喜歡使用 Animation 效果，所以之後我們會將這些效果套用在一些動畫效果身上，可以使畫面看起來更華麗。