利用 viewDidLoad 客製 App 畫面

在 viewDidLoad 裡寫程式

🌟 使用功能：
・CAGradientLayer 漸層色
．image view 實現多張圖片連續播放的動畫
．CGAffineTransform 圖片縮放位移旋轉
・CAEmitterLayer 下雪動畫

完整程式碼於文末👍🏻

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)

//左上至右下漸層底色(設定框線範圍,漸層方向設定)
let gradientLayer = CAGradientLayer()
gradientLayer.frame = view.bounds
gradientLayer.startPoint = CGPoint(x: 0.3, y: 0)
gradientLayer.endPoint = CGPoint(x: 0.75, y: 1)
gradientLayer.colors = [
UIColor(red: 137/255, green: 3/255, blue: 4/255, alpha: 1).cgColor,
UIColor(red: 179/255, green: 33/255, blue: 52/255, alpha: 1).cgColor,
UIColor(red: 241/255, green: 76/255, blue: 66/255, alpha: 1).cgColor,
UIColor(red: 1, green: 106/255, blue: 97/255, alpha: 1).cgColor,
UIColor(red: 1, green: 106/255, blue: 97/255, alpha: 1).cgColor,
UIColor(red: 224/255, green: 60/255, blue: 49/255, alpha: 1).cgColor,
UIColor(red: 179/255, green: 33/255, blue: 52/255, alpha: 1).cgColor,
UIColor(red: 137/255, green: 3/255, blue: 4/255, alpha: 1).cgColor
]
view.layer.addSublayer(gradientLayer)

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

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

・產生代表動畫圖片的 UIImage 物件animatedImageNamed
・duration 傳入動畫的時間 (以秒為單位)

//產生兩個ImageView(設定與圖相同之大小,使用animatedImageNamed形成動畫圖)
let coupleImageView = UIImageView(frame: CGRect(x: 100, y: 450, width: 186, height: 196))
let animatedImage = UIImage.animatedImageNamed("ffa9937e8ddb43b28fa714bb023d54cfHybnk9IpzjYW9gIW-", duration: 3)
coupleImageView.image = animatedImage
let snowFlakeImageView = UIImageView(frame: CGRect(x: 125, y: 90, width: 151, height: 197))
let snowFlakeAnimatedImage = UIImage.animatedImageNamed("6f8b1017e23f4733f06e35355f50a4edHOzDQ9n2gtfqUw61-", duration: 3)
snowFlakeImageView.image = snowFlakeAnimatedImage

CGAffineTransform 圖片縮放位移旋轉

・scale 縮放(放大、原圖、縮小)
產生縮放的 CGAffineTransform，參數 scaleX & y 分別傳入縮放的比例

//原圖放大:寬高數字為倍數
imageView.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
//原圖縮小
imageView.transform = CGAffineTransform(scaleX: 0.5, y: 0.5)

・鏡像翻轉mirror效果
利用 scale 參數縮放大小時，傳入負數呈現鏡像翻轉效果。
scaleX 傳入 -1 時，圖片將維持原本的寬度，但變成鏡像左右翻轉。

(因截圖時大小沒拉好導致圖片大小不同！三圖大小參數相同，只呈現鏡像翻轉效果！)

mirrorImageView.transform = CGAffineTransform(scaleX: 1, y: -1)

・ translation 位移
參數 translationX & y 分別傳入水平和垂直移動的距離，因此以下程式將讓圖片向右、向下移動(points)

imageView.transform = CGAffineTransform(translationX: 100, y: 300)

・rotationAngle 旋轉
參數 rotationAngle 傳入旋轉的角度。CGFloat.pi / 180 等於一度的弧度。

let oneDegree = CGFloat.pi / 180
imageView.transform = CGAffineTransform(rotationAngle: oneDegree * 45)

CAEmitterLayer 下雪動畫

參照彼得潘的文章就能做出下雪的樣子！

利用 CAEmitterLayer 製作 Xmas 的下雪動畫

完整程式碼：

import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//左上至右下漸層底色(設定框線範圍,漸層方向設定)
let gradientLayer = CAGradientLayer()
gradientLayer.frame = view.bounds
gradientLayer.startPoint = CGPoint(x: 0.3, y: 0)
gradientLayer.endPoint = CGPoint(x: 0.75, y: 1)
gradientLayer.colors = [
UIColor(red: 137/255, green: 3/255, blue: 4/255, alpha: 1).cgColor,
UIColor(red: 179/255, green: 33/255, blue: 52/255, alpha: 1).cgColor,
UIColor(red: 241/255, green: 76/255, blue: 66/255, alpha: 1).cgColor,
UIColor(red: 1, green: 106/255, blue: 97/255, alpha: 1).cgColor,
UIColor(red: 1, green: 106/255, blue: 97/255, alpha: 1).cgColor,
UIColor(red: 224/255, green: 60/255, blue: 49/255, alpha: 1).cgColor,
UIColor(red: 179/255, green: 33/255, blue: 52/255, alpha: 1).cgColor,
UIColor(red: 137/255, green: 3/255, blue: 4/255, alpha: 1).cgColor
]
view.layer.addSublayer(gradientLayer)

//加入gif圖
let coupleImageView = UIImageView(frame: CGRect(x: 100, y: 450, width: 186, height: 196))
let animatedImage = UIImage.animatedImageNamed("ffa9937e8ddb43b28fa714bb023d54cfHybnk9IpzjYW9gIW-", duration: 3)
coupleImageView.image = animatedImage
let snowFlakeImageView = UIImageView(frame: CGRect(x: 125, y: 90, width: 151, height: 197))
let snowFlakeAnimatedImage = UIImage.animatedImageNamed("6f8b1017e23f4733f06e35355f50a4edHOzDQ9n2gtfqUw61-", duration: 3)
snowFlakeImageView.image = snowFlakeAnimatedImage
//CGAffineTransform: scale縮放及鏡像翻轉
coupleImageView.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
snowFlakeImageView.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
//下雪動畫
let snowEmitterCell = CAEmitterCell()
snowEmitterCell.contents = UIImage(named: "614111.svg")?.cgImage
snowEmitterCell.birthRate = 4
snowEmitterCell.lifetime = 20
snowEmitterCell.velocity = 100
snowEmitterCell.scale = 0.02
snowEmitterCell.scaleRange = 0.03
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(coupleImageView)
view.layer.addSublayer(snowEmitterLayer)
view.addSubview(snowFlakeImageView)
}
}