在這次的練習當中,想將圖片製造出透明漸層效果,讓圖片與背景色之間有過渡的感覺,才不會讓圖片與背景的交界處顯得突兀,但不知道有沒有辦法直接使圖片呈現漸層半透明,所以嘗試用CAGradientLayer來達成想要的效果。
我建立了一個CAGradientLayer,大小設定為背景圖imageView的同等大小,將此圖層的最上方和最下方設定成與背景色相同的顏色來製造透明漸層的效果。
先在viewController中建立一個CAGradientLayer的物件:
let gradient = CAGradientLayer()
然後在viewDidLoad()中設定這個gradient的大小為imageView的大小:
gradient.frame = imageView.bounds
先用gradient.colors將顏色設定為[白, 藍, 藍, 白],讓圖層呈現上下兩端是白色而中間是藍色,來測試漸層的效果。
再用gradient.locations來設定這4個顏色的起始點。0為圖層最上方,1圖層最底端。所以這樣的設定會讓圖層最上端到前20%之間呈現由白色到藍色的漸層效果,圖層80%到最底端的位置則呈現由藍色到白色的漸層。
gradient.colors = [UIColor.white.cgColor, UIColor.blue.cgColor, UIColor.blue.cgColor, UIColor.white.cgColor]gradient.locations = [0, 0.2, 0.8, 1]
最後將gradient疊加到原本的imageView上:
imageView.layer.addSublayer(gradient)
成功呈現了想要的效果:
現在將gradient.colors改成[背景色, 透明, 透明, 背景色],達成了想要的透明漸層效果:
最後的程式碼呈現: