利用 UIView 的 mask 為圖片文字染上美麗的漸層
利用 UIView 的 mask,我們可以快速做出漸層的圖片和文字。接下來就讓我們以彼得潘的影子當例子,瞧瞧如何做出漸層的彼得潘影子吧。
漸層的圖片
1 從以下網站下載彼得潘的影子。
2 利用 Preview 去背圖片的白色區塊,只留下黑色的影子。
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 的相關說明,可參考以下連結。
view.mask = imageView
mask 中文是遮罩的意思,經由設定 UIView 元件的 mask,我們將讓 view 只顯示 mask 裡非透明的區塊,其它部分被遮起來。因此原本長方形的 view 將變成只顯示 imageView 裡非透明的區塊,也就是彼得潘黑色影子的區塊。
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 的文字部分。