iOS Task#22 | Customized the App — viewDidLoad : CAGradientLayer & CAEmitter & AVPlayerLooper

在我們每次打開 App 時，都會出現每個 App 已經預設好要給我們看到的所有一開始的內容，不論是原本設計好的版面，或是網路上 loading 下來的資訊 (e.g. Facebook, Instagram 這些 Social Media)。這個畫面一開始載入所呈現的所有內容，都是寫在 function viewDidLoad 中。

這次想呈現幾個技巧：

• CAGradientLayer 製作漸層
• CAGradientLayer 製作漸層背景
• CAEmitter 製作下雪動畫
• AVPlayerLooper 無限循環播放音樂

CAGradientLayer 製作漸層

製作漸層效果

let gradientView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
let gradientLayer = CAGradientLayer()
gradientLayer.frame = gradientView.bounds
gradientLayer.colors = [UIColor.orange.cgColor,UIColor.red.cgColor, UIColor.blue.cgColor]
gradientLayer.startPoint = CGPoint(x: 0.5, y: 0)
gradientLayer.endPoint = CGPoint(x: 0.8, y: 1)
gradientLayer.locations = [0, 0.2, 0.7]
gradientView.layer.addSublayer(gradientLayer)
gradientView

Controller 加上漸層背景

將漸層背景的函式加到 viewDidLoad 上面

func setupGradientBackground() {
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = view.bounds
    gradientLayer.colors = [
        CGColor(red: 29/255, green: 45/255, blue: 80/255, alpha: 1),
        CGColor(red: 19/255, green: 59/255, blue: 92/255, alpha: 1),
        CGColor(red: 30/255, green: 95/255, blue: 116/255, alpha: 1)
]
    gradientLayer.startPoint = CGPoint(x: 0.5, y: 0)
    gradientLayer.endPoint = CGPoint(x: 0.8, y: 1)
    gradientLayer.locations = [0, 0.4, 1]
    
    view.layer.insertSublayer(gradientLayer, at: 0)
}

CAEmitter 製作下雪動畫

Free Icons and Stickers - Millions of resources to download

Step 1. 選好雪花下載

選了兩種試試看

Step 2. 把雪花圖片加到Assets.xcassets

Step 3. 加入程式碼，調整一下參數

AVPlayerLooper 無限循環播放音樂

iOS Task#17 | iOS SDK — AVPlayer

Step 1. 找好音樂之後，擷取m4a的音檔網址。

Step 2. UIKit 無限循環播放語法

import AVFoundation
class ViewController: UIViewController{
  var looper: AVPlayerLooper?
func bgm() {
if let url = URL(string:"https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview115/v4/fb/7d/42/fb7d42ff-a64f-f175-5f8a-6810f3ad6608/mzaf_6675411956521030220.plus.aac.p.m4a"){
//生成AVQueuePlayer物件
let player = AVQueuePlayer()

//用AVPlayerItem生成要播放的音檔
let item = AVPlayerItem(url: url)
//生成後，傳入player & item，用ACPlayerLooper重複播放item
looper = AVPlayerLooper(player: player, templateItem: item)
player.play()
}
  override func viewDidLoad() {
    super.viewDidLoad()
  bgm()
}

參考：

CAGradientLayer 漸層

利用 CAGradientLayer 製作漸層

CAEmitterLayer 動畫

利用 CAEmitterLayer 製作 Xmas 的下雪動畫

AVPlayerLooper 無限循環音樂播放

利用 AVPlayerLooper 重覆播放音樂和影片

完整程式碼：