作業#13 利用mask設計特別形狀的圖片＆影片

目的：練習利用mask作為遮罩融合一張或多張照片以及播放影片

去背的 image view 當 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.frame
universe.mask = kidImage

顯示 SF Symbols 的 image view 當 mask

實作程式碼：

import UIKit
let 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.frame
earthImage.mask = dropFill

顯示 emoji 的 label 當 mask

實作程式碼：

import UIKit
let 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 UIKit
let 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 = gradientLayer
starrySkyImage

利用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.frame
universe.mask = kidImage
let 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 = kidImage2
universe.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.frame
universe.mask = kidImage
//第二張圖
let earth = UIImageView(image: UIImage(named: "earth.jpeg"))
earth.frame =   CGRect(x: 0, y: 0, width: 200, height: 300)
earth.alpha = 0.6
let kidImage2 = UIImageView(image: UIImage(named: "kid.png"))
kidImage2.frame = earth.frame
earth.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，即可取得

CatchV : 下載線上網頁影片

以上內容參考下方連結：

利用 mask 設計特別形狀的圖片

利用 mask 設計特別形狀的影片

如何取得 youtube 影片的網址

GitHub連結：

GitHub - PogaHuang/Homework13VideoMask