#22 viewDidLoad：戴珍珠耳環的少女之滿天珍珠

Alvie Sung

Published in

彼得潘的 Swift iOS / Flutter App 開發教室

9 min readAug 27, 2021

成品

💎 CAEmitterCell properties介紹 💎

contents : 可以指定CGImage為內容
color : 設定粒子的顏色
redRange、greenRange、blueRange：調整三原色的0~1偏移值
redSpeed、greenSpeed、blueSpeed ：變色速率
birthRate：每秒創造粒子數量
velocity：粒子移動速度
velocityRange：速度變化的範圍
scale：粒子的大小，最大為1
scaleRange：大小變化的範圍
spin：旋轉速度
spinRange：旋轉變化的範圍
lifetime：生存週期
xAcceleration、yAcceleration、zAcceleration：移動的加速度
emitterPosition：發射中心點位置
emitterSize：發射源大小
emitterShape：發射的形狀

播放動畫

動畫主角介紹

《戴珍珠耳環的少女》（荷蘭語：Het meisje met de parel），十七世紀荷蘭畫家楊·維梅爾的作品。畫作以少女戴著的珍珠耳環作為視角的焦點。

下載gif檔

我先在這個網站下載GIF並轉檔為PNG

GIPHY - Be Animated

GIPHY is your top source for the best & newest GIFs & Animated Stickers online. Find everything from funny GIFs…

giphy.com

將 gif 檔加到 project navigator

把gif檔拉進如下圖的位置

勾選如下圖

建立imageView

在 storyboard 加入播放動畫的 imageView並連結outlet

在viewController輸入程式

guard let url = Bundle.main.url(forResource: "girl", withExtension: "gif") else { return }let cfUrl = url as CFURLCGAnimateImageAtURLWithBlock(cfUrl, nil) { (_, cgImage, _) inself.imageView.image = UIImage(cgImage: cgImage)}

漸層背景

選擇色票

顏色選擇在線上版的《維爾納色彩命名法》尋找，這是達爾文愛用的《維爾納色彩命名法》，因為戴珍珠耳環的少女已經有幾百年的歷史，所以選擇同樣擁有幾百年歷史的色票

Werner's Nomenclature of Colours

Classification of colors Below is the complete text of the preface to the original second edition of Werner's…

www.c82.net

輸入程式

在class ViewController: UIViewController { 內、viewDidLoad()外輸入Function

func setupGradientBackground() {
         let gradientLayer = CAGradientLayer()
         gradientLayer.frame = view.bounds
        gradientLayer.colors = [UIColor(red: 178/255, green:   116/255, blue: 124/255, alpha: 1).cgColor,UIColor(red: 127/255, green: 154/255, blue: 184/255, alpha: 1).cgColor,UIColor(red: 203/255, green: 202/255, blue: 181/255, alpha: 1).cgColor]
        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
        gradientLayer.endPoint = CGPoint(x: 1, y: 1)
        gradientLayer.locations = [0, 0.4, 0.9]
         view.layer.insertSublayer(gradientLayer, at: 0)
    }

將漸層的 layer 加在最底層（這步驟很重要）

view.layer.insertSublayer(gradientLayer, at: 0)

⚠️ 如果改為以下方法的話會讓漸層蓋著全部元件 ⚠️

view.layer.addSublayer(gradientLayer)

最後在viewDidLoad()內呼叫剛剛設定的Function

setupGradientBackground()

珍珠雪花動畫

少女從此有戴不完的珍珠耳環從天而降

下載圖片並放進Assets中

https://www.flaticon.com/free-icon/pearl-necklace_1037060?term=pearl&page=1&position=9&page=1&position=9&related_id=1037060&origin=search

輸入程式

//製作珍珠項鍊let pearlEmitterCell = CAEmitterCell()//設定粒子的內容，contents要求的型別是CGImage，因此生成UIIMAGE後，要再讀取型別CGImagepearlEmitterCell.contents = UIImage(named: "pearl1")?.cgImage//設定每秒射出幾個珍珠pearlEmitterCell.birthRate = 20//珍珠維持的秒數pearlEmitterCell.lifetime = 15//珍珠移動的速度pearlEmitterCell.velocity = 100pearlEmitterCell.velocityRange = 10//設定向下移動的加速度，當 yAcceleration > 0 時會向下移動，yAcceleration ＜ 0 時會向上移動//pearlEmitterCell.yAcceleration = 30//設定向右移動，xAcceleration > 0 會向右移動pearlEmitterCell.xAcceleration = 10//珍珠的大小和縮小放大範圍pearlEmitterCell.scale = 0.1pearlEmitterCell.scaleRange = 0.2//珍珠大小改變的速度，小於 0 會愈來愈小，大於 0 會愈來愈大pearlEmitterCell.scaleSpeed = -0.02// 旋轉珍珠單位是弧度pearlEmitterCell.spin = 0.5pearlEmitterCell.spinRange = 1//珍珠發射角度範圍pearlEmitterCell.emissionRange = CGFloat.pi// 產生 CAEmitterLayer，將它的 emitterCells指定給pearlEmitterCelllet pearlEmitterLayer = CAEmitterLayer()pearlEmitterLayer.emitterCells = [pearlEmitterCell]//發射路徑pearlEmitterLayer.emitterPosition = CGPoint(x: view.bounds.width / 2, y: -50)pearlEmitterLayer.emitterSize = CGSize(width: view.bounds.width, height: 0)pearlEmitterLayer.emitterShape = .line//pearlEmitterLayer加在view的layerview.layer.addSublayer(pearlEmitterLayer)