#24 利用 viewDidLoad 客製 App 畫面

參考文章

#91 自訂 controller 類別和利用 viewDidLoad 客製 App 畫面

利用 viewDidLoad 客製 App 畫面

使用功能：
CAGradientLayer 漸層色

利用 CAGradientLayer 製作漸層

設定 CAGradientLayer 的 startPoint & endPoint，即可自由控制漸層的方向。若想調整漸層方向，如下圖所示 CAGradientLayer 座標。

上至下： startPoint 從(0.5, 0.0)，endPoint 到(0.5, 1.0)
左至右：startPoint 從(0, 0.5) endPoint到 (1, 0.5)
左上至右下：startPoint從 (0, 0) endPoint到 (1, 1)

image view 實現多張圖片連續播放的動畫

把要使用的 gif 檔轉成多張圖片後，加入Xcode專案 Assets.xcassets 並設定ImageView 播放動畫。

CAEmitterLayer 下雪動畫

參考以下文章，依照文章步驟就可以把下雪動畫做出來了

利用 CAEmitterLayer 製作 Xmas 的下雪動畫

完整程式碼：

import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
//上至下漸層底色(漸層方向設定)
let gradientLayer = CAGradientLayer()
gradientLayer.frame = view.bounds
gradientLayer.startPoint = CGPoint(x: 0.5, y: 0)
gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)
gradientLayer.colors = [
UIColor(red: 255/255, green: 0/255, blue: 128/255, alpha: 1).cgColor,
UIColor(red: 255/255, green: 97/255, blue: 176/255, alpha: 1).cgColor,
UIColor(red: 254/255, green: 200/255, blue: 216/255, alpha: 1).cgColor,
UIColor(red: 255/255, green: 97/255, blue: 176/255, alpha: 1).cgColor,
UIColor(red: 255/255, green: 0/255, blue: 128/255, alpha: 1).cgColor,
]
view.layer.addSublayer(gradientLayer)
//加入GIF圖
let stitchImageView = UIImageView(frame: CGRect(x: 80, y: 500, width: 230, height: 140))
view.addSubview(stitchImageView)
let animatedImage = UIImage.animatedImageNamed("7e2f7d45f0654b2aff988bf11a633e82r0mRFvMQu4roakFU-", duration: 4)
stitchImageView.image = animatedImage
let cloverImageView = UIImageView(frame: CGRect(x: 150, y: 200, width: 97, height: 57))
view.addSubview(cloverImageView)
let cloverAnimatedImage = UIImage.animatedImageNamed("fc8ec2738e384c9b981d8c325a8c7a0eRzTto6Y5gWRGt3wI-", duration: 0.5)
cloverImageView.image = cloverAnimatedImage
//下雪動畫
let snowEmitterCell = CAEmitterCell()
snowEmitterCell.contents = UIImage(named: "Clover")?.cgImage
snowEmitterCell.birthRate = 4
snowEmitterCell.lifetime = 20
snowEmitterCell.velocity = 100
snowEmitterCell.scale = 0.02
snowEmitterCell.scaleRange = 0.5
snowEmitterCell.spin = 0.5
snowEmitterCell.spinRange = 1
snowEmitterCell.yAcceleration = 30
let snowEmitterLayer = CAEmitterLayer()
snowEmitterLayer.emitterCells = [snowEmitterCell]
//雪花路徑
snowEmitterLayer.emitterPosition = CGPoint(x: view.bounds.width/2, y: -50)
snowEmitterLayer.emitterSize = CGSize(width: view.bounds.width, height: 0)
snowEmitterLayer.emitterShape = .line
view.addSubview(cloverImageView)
view.layer.addSublayer(snowEmitterLayer)
view.addSubview(stitchImageView)
}
}