利用 UIView 的 mask 為圖片文字染上美麗的漸層

利用 UIView 的 mask，我們可以快速做出漸層的圖片和文字。接下來就讓我們以彼得潘的影子當例子，瞧瞧如何做出漸層的彼得潘影子吧。

漸層的圖片

1 從以下網站下載彼得潘的影子。

Peter Pan Shadow Wall Decal is a Vinyl Wall Decal Displaying Peter Pan and Tinker Bell. - Mint

2 利用 Preview 去背圖片的白色區塊，只留下黑色的影子。

如何用 Previe App (預覽程式)去背圖片

3 利用 UIView 的 mask 生成漸層的圖片。

let image = UIImage(named: "peter")
let imageView = UIImageView(image: image)
let view = UIView(frame: imageView.bounds)
let gradientLayer = CAGradientLayer()
gradientLayer.frame = view.bounds
gradientLayer.colors = [UIColor.orange.cgColor, UIColor.blue.cgColor]
view.layer.addSublayer(gradientLayer)
view.mask = imageView

說明

let image = UIImage(named: "Peter")
let imageView = UIImageView(image: image)

生成顯示彼得潘影子的 imageView。由於當初我們傳入參數 image 生成 imageView，因此生成的 imageView 大小將等於彼得潘圖片的大小。

let view = UIView(frame: imageView.bounds)

生成和 image view 一樣大的 view。

let gradientLayer = CAGradientLayer()
gradientLayer.frame = view.bounds
gradientLayer.colors = [UIColor.orange.cgColor, UIColor.blue.cgColor]
view.layer.addSublayer(gradientLayer)

在 view 上加入漸層的 CAGradientLayer，讓它顯示漸層的顏色。此時 view 的樣子如下。

關於 CAGradientLayer 的相關說明，可參考以下連結。

利用 CAGradientLayer 製作漸層

view.mask = imageView

mask 中文是遮罩的意思，經由設定 UIView 元件的 mask，我們將讓 view 只顯示 mask 裡非透明的區塊，其它部分被遮起來。因此原本長方形的 view 將變成只顯示 imageView 裡非透明的區塊，也就是彼得潘黑色影子的區塊。

mask | Apple Developer Documentation

mask 的相關說明:

結果

Cool，彼得潘的影子變成美麗的漸層了 ~

學會此技巧後，以後遇到以下這類黑白線條圖，都可以輕易染上美麗的漸層。

美麗的漸層米老鼠 ~

漸層的文字

製作漸層文字的原理和剛剛差不多，我們只要將漸層的 view 的 mask 設為 label，即可顯示漂亮的漸層文字。

let label = UILabel()
label.text = "見字如晤"
label.font = UIFont.systemFont(ofSize: 30)
label.sizeToFit()
let view = UIView(frame: label.bounds)
let gradientLayer = CAGradientLayer()
gradientLayer.frame = view.bounds
gradientLayer.colors = [UIColor.orange.cgColor, UIColor.blue.cgColor]
view.layer.addSublayer(gradientLayer)
view.mask = label

說明:

利用 view.mask = label 讓 view 只顯示 label 的文字部分。