作業#13 利用mask設計特別形狀的圖片&影片
Published in
9 min readNov 17, 2021
目的:練習利用mask作為遮罩融合一張或多張照片以及播放影片
去背的 image view 當 mask
實作程式碼:
import UIKitlet universe = UIImageView(image: UIImage(named: "universe.jpeg"))
universe.frame = CGRect(x: 0, y: 0, width: 200, height: 300)let kidImage = UIImageView(image: UIImage(named: "kid.png"))
kidImage.frame = universe.frameuniverse.mask = kidImage
顯示 SF Symbols 的 image view 當 mask
實作程式碼:
import UIKitlet earthImage = UIImageView(image: UIImage(named: "earth.jpeg"))
earthImage.frame = CGRect(x: 0, y: 0, width: 200, height: 300)let dropFill = UIImageView(image: UIImage(systemName: "drop.fill"))
dropFill.frame = earthImage.frameearthImage.mask = dropFill
顯示 emoji 的 label 當 mask
實作程式碼:
import UIKitlet starrySkyImage = UIImageView(image: UIImage(named: "starrySky.jpeg"))let starLabel = UILabel(frame: starrySkyImage.frame)
starLabel.text = "⭐️"
starLabel.textAlignment = .center
starLabel.font = UIFont.systemFont(ofSize: 100)starrySkyImage.mask = starLabel
漸層mask
實作程式碼:
import UIKitlet starrySkyImage = UIImageView(image: UIImage(named: "starrySky.jpeg"))let gradientLayer = CAGradientLayer()
gradientLayer.frame = starrySkyImage.bounds
gradientLayer.colors = [CGColor(red: 1, green: 1, blue: 1, alpha: 0),CGColor(red: 1, green: 1, blue: 1, alpha: 1)]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 0, y: 1)starrySkyImage.layer.mask = gradientLayerstarrySkyImage
利用mask 改變圖片的顏色
實作程式碼:
import UIKitlet universe = UIImageView(image: UIImage(named: "universe.jpeg"))
universe.frame = CGRect(x: 0, y: 0, width: 200, height: 300)let kidImage = UIImageView(image: UIImage(named: "kid.png"))
kidImage.frame = universe.frameuniverse.mask = kidImagelet redView = UIView(frame: kidImage.frame)
redView.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 0.3)let kidImage2 = UIImageView(image: UIImage(named: "kid.png"))redView.mask = kidImage2universe.addSubview(redView)
利用mask融合兩張照片
實作程式碼:
import UIKit//第一張圖
let universe = UIImageView(image: UIImage(named: "universe.jpeg"))
universe.frame = CGRect(x: 0, y: 0, width: 200, height: 300)let kidImage = UIImageView(image: UIImage(named: "kid.png"))
kidImage.frame = universe.frameuniverse.mask = kidImage//第二張圖
let earth = UIImageView(image: UIImage(named: "earth.jpeg"))
earth.frame = CGRect(x: 0, y: 0, width: 200, height: 300)
earth.alpha = 0.6let kidImage2 = UIImageView(image: UIImage(named: "kid.png"))
kidImage2.frame = earth.frameearth.mask = kidImage2//底部View
let backgroundView = UIView(frame: earth.frame)
backgroundView.addSubview(universe)
backgroundView.addSubview(earth)
影片的mask
實作程式碼:
override func viewDidLoad() {
super.viewDidLoad()
let kidImage = UIImageView(image: UIImage(named: "kid"))
kidImage.frame.size = CGSize(width: 400, height: 600)
let videoView = UIView(frame: CGRect(origin: CGPoint(x: 0, y: 50), size: kidImage.frame.size))
view.addSubview(videoView)
//網址轉換成URL
let url = URL(string: "https://movietrailers.apple.com/movies/sony_pictures/spider-man-no-way-home/spider-man-no-way-home-trailer-2_h720p.mov") //交給用來播放的AVPlayer
let player = AVPlayer(url: url!)
//AVPlayerLayer是呈現影片的,僅有AVPlayer會只有聲音
let playerLayer = AVPlayerLayer(player: player)
playerLayer.frame = CGRect(origin: .zero, size: kidImage.frame.size)
playerLayer.videoGravity = .resizeAspectFill
videoView.layer.addSublayer(playerLayer)
videoView.mask = kidImage
//AVPlayer播放
player.play()
}
擷取影片網址方法:
複製網址(位置iTunes Movie Trailers — Apple)
貼上網址,對著想要的畫質按右鍵Copy Link Address,即可取得
以上內容參考下方連結:
GitHub連結: