利用 viewDidLoad 客製 App 畫面

讓初始畫面出現想要的顏色、圖案和動畫

viewDidLoad的功能特色：

・viewDidLoad()由系統自己呼叫
・可以在viewDidLoad下設置view的屬性，例如初始背景顏色、邊框等
・viewDidLoad() 只會在viewContrller首次加載的時候執行(被呼叫一次)， 如果是每次進入viewContrller時都執行的操作，就要使用viewWillAppear()

viewDidLoad & viewWillAppear比較

・viewDidLoad：初始化＆設置頁面的初始狀態
以社群App的朋友列表頁面為例，可以在viewDidLoad()中設置初始view的樣式、初始資料，如從伺服器或本地獲取資料、cell外觀等。讓頁面載入完成後系統自動幫忙呼叫這些初始值。
・viewWillAppear ：每次進入頁面時都執行的操作
如果進入朋友列表頁面前可能有新的資料更新 （像新增朋友、列表狀態和排序更新），或是希望在每次顯示頁面時執行動畫特效時，就可以在viewWillAppear()中執行刷新資料的操作

實際以viewDidLoad設定初始畫面

開啟app後，讓系統自動讀入背景顏色、

override func viewDidLoad() {
        super.viewDidLoad()
        //背景顏色
        view.backgroundColor = UIColor(red: 244/255, green: 208/255, blue: 110/205, alpha: 1)
        
        //橫幅
        let bannerView = SharpView(frame: CGRect(x: 0, y: 20, width: 415, height: 150))
        bannerView.backgroundColor = UIColor(white: 1, alpha: 0.3)
        view.addSubview(bannerView)

        func startRaining(){
        //背景下香蕉雨
        let bananaEmitterCell = CAEmitterCell()
        bananaEmitterCell.contents = UIImage(named: "banana.png")?.cgImage
        bananaEmitterCell.birthRate = 2
        bananaEmitterCell.lifetime = 20
        bananaEmitterCell.velocity = 100
        bananaEmitterCell.scale = 0.1
        bananaEmitterCell.scaleRange = 0.3
        bananaEmitterCell.scaleSpeed = -0.05
        bananaEmitterCell.yAcceleration = 30
        
        
        let bananaEmitterLayer = CAEmitterLayer()
        bananaEmitterLayer.emitterCells = [bananaEmitterCell]
        bananaEmitterLayer.emitterPosition = CGPoint(x: view.bounds.width/2, y: -50)
        bananaEmitterLayer.emitterSize = CGSize(width: view.bounds.width, height: 0)
        bananaEmitterLayer.emitterShape = .line
        view.layer.addSublayer(bananaEmitterLayer)
        }
        
        
        // 設定香蕉gif
        let bananaImageView = UIImageView(frame: CGRect(x: 345, y: 54, width: 30, height: 30))
              view.addSubview(bananaImageView)
              let animatedImage = UIImage.animatedImageNamed("2e296252fda9478e872bbd809327076as66BkQL5UDSEm65N-", duration: 10)
               bananaImageView.image = animatedIma
}

製作香蕉雨動畫

建立一個function來實現下香蕉雨的動畫，function中使用CAEmitterCell和 CAEmitterLayer。CAEmitterCell可以定義單一香蕉的粒子(particles)效果，CAEmitterLayer來管理粒子的發射。

Emitter Shape | Apple Developer Documentation

1. CAEmitterCell : 定義單一香蕉的粒子效果

• contents: 設定粒子的顯示內容為 "banana.png" 圖片。
• birthRate: 每秒產生的粒子數量為 2。
• lifetime: 每個粒子的生命週期為 20 秒。
• velocity: 設定粒子的初始速度為 100。
• scale: 設定粒子的初始縮放為 0.1。
• scaleRange: 設定縮放的範圍為 0.3，使得每個粒子的縮放在初始值上再隨機增減 0.3。
• scaleSpeed: 設定縮放的變化速度為 -0.05。
• yAcceleration: 設定在 Y 軸方向上的加速度為 30。

2. CAEmitterLayer: 管理粒子的發射

• emitterCells: 將先前定義的 bananaEmitterCell 設定為發射器的粒子。
• emitterPosition: 設定粒子系統的發射位置為畫面的正中央頂部。
• emitterSize: 設定粒子系統的發射大小為整個畫面的寬度，高度為 0。
• emitterShape: 設定粒子系統的形狀為線性，使得粒子從一條線上發射

3. 最後將 bananaEmitterLayer 加入到畫面的 layer 中，使效顯示在畫面上。

• view.layer.addSublayer(bananaEmitterLayer):

func startRaining(){
        //背景下香蕉雨
        let bananaEmitterCell = CAEmitterCell()
        bananaEmitterCell.contents = UIImage(named: "banana.png")?.cgImage
        bananaEmitterCell.birthRate = 2
        bananaEmitterCell.lifetime = 20
        bananaEmitterCell.velocity = 100
        bananaEmitterCell.scale = 0.1
        bananaEmitterCell.scaleRange = 0.3
        bananaEmitterCell.scaleSpeed = -0.05
        bananaEmitterCell.yAcceleration = 30
        
        
        let bananaEmitterLayer = CAEmitterLayer()
        bananaEmitterLayer.emitterCells = [bananaEmitterCell]
        bananaEmitterLayer.emitterPosition = CGPoint(x: view.bounds.width/2, y: -50)
        bananaEmitterLayer.emitterSize = CGSize(width: view.bounds.width, height: 0)
        bananaEmitterLayer.emitterShape = .line
        view.layer.addSublayer(bananaEmitterLayer)
        }

製作香蕉GIF

可參考之前寫的這篇文章

利用 UIImageView 實現多張圖片連續播放的動畫

成品

參考文章

利用 CAEmitterLayer 製作 Xmas 的下雪動畫