Merry Christmas

聖誕節的氣氛籠罩著整個城市，這次想做個下雪的動畫。

查資料的過程發現，原來最近常見的直播應用中，很多愛心噴射的動畫也有用類似的方法實現。

除了知道直播應用中有用到類似的效果，在 Wechat 又或者 Line 上也會被套上一些動畫，讓使用者感受到節日的氣氛。

要實現這個動畫不需要使用其他的第三方 library 而是直接通過 Core Image 就可以了。

除了背景圖以外，完整的 code 很短，我這裡直接貼上來在另外介紹。

import UIKit

class HomeViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        title = "Merry Christmas"
        
        setupView()
    }
    
    private func setupView() {
        // init EmitterCell with image
        let emitterCell = CAEmitterCell()
        emitterCell.contents = UIImage(named: "snow.png")?.cgImage
        
        emitterCell.birthRate = 180
        
        emitterCell.lifetime = 5.5
        emitterCell.lifetimeRange = 1.0
        
        emitterCell.yAcceleration = 30.0
        emitterCell.xAcceleration = 10.0
        
        emitterCell.velocity = 30.0
        emitterCell.velocityRange = 200.0
        
        emitterCell.emissionLongitude = .pi * -0.5
        emitterCell.emissionRange = .pi * 0.5
        
        emitterCell.scale = 0.8
        emitterCell.scaleRange = 0.8
        emitterCell.scaleSpeed = -0.15

        emitterCell.alphaRange = 0.75
        emitterCell.alphaSpeed = -0.15
        
        // init emitter
        let rect = CGRect(x: 0.0, y: 0.0, width: view.bounds.width, height: 40.0)
        let emitter = CAEmitterLayer()
        emitter.emitterCells = [emitterCell]
        emitter.frame = rect
        
        // appear way
        emitter.emitterShape = kCAEmitterLayerLine
        emitter.emitterPosition = CGPoint(x: rect.width/2, y: rect.height/2)
        emitter.emitterSize = rect.size
        view.layer.addSublayer(emitter)
        
    }


}

import UIKit

class HomeViewController: UIViewController {

override func viewDidLoad() {

super.viewDidLoad()

title = "Merry Christmas"

setupView()

}

private func setupView() {

// init EmitterCell with image

let emitterCell = CAEmitterCell()

emitterCell.contents = UIImage(named: "snow.png")?.cgImage

emitterCell.birthRate = 180

emitterCell.lifetime = 5.5

emitterCell.lifetimeRange = 1.0

emitterCell.yAcceleration = 30.0

emitterCell.xAcceleration = 10.0

emitterCell.velocity = 30.0

emitterCell.velocityRange = 200.0

emitterCell.emissionLongitude = .pi * -0.5

emitterCell.emissionRange = .pi * 0.5

emitterCell.scale = 0.8

emitterCell.scaleRange = 0.8

emitterCell.scaleSpeed = -0.15

emitterCell.alphaRange = 0.75

emitterCell.alphaSpeed = -0.15

// init emitter

let rect = CGRect(x: 0.0, y: 0.0, width: view.bounds.width, height: 40.0)

let emitter = CAEmitterLayer()

emitter.emitterCells = [emitterCell]

emitter.frame = rect

// appear way

emitter.emitterShape = kCAEmitterLayerLine

emitter.emitterPosition = CGPoint(x: rect.width/2, y: rect.height/2)

emitter.emitterSize = rect.size

view.layer.addSublayer(emitter)

}

CAEmitterCell

用來建立我們想要呈現的微粒，比如雪的圖片，幾個常用的屬性：

基礎

一個畫面上會有多少多少個粒子，就是 CAEmitterCell 的 birthRate * CAEmitterLayer 的 birthRate

birthRate – 粒子的創建速率
lifetime – 每個粒子的存活時間
lifetimeRange – 粒子存活時間容許的容差範圍

角度

emissionLatitude – Z 軸方向的發射角度
emissionLongitude – XY 平面的發射角度
emissionRange – 發射角度的容差範圍

速度

velocity – 粒子的速度
velocityRange – 粒子速度的容差

加速度

xAcceleration – x 軸加速度
yAcceleration – y 軸加速度
zAcceleration – z 軸加速度

縮放

scale – 縮放大小
scaleRange – 縮放容差
scaleSpeed – 縮放速度

旋轉

spin – 旋轉度數
spinRange – 旋轉容差

顏色

在設置了顏色的變化範圍以後，每個生出來的粒子顏色都是隨機的。

color
redRange
greenRage
blueRange

顏色變化的速度

alphaSpeed – 每秒鐘的變化，比如寫 – 0.1 就是每秒透明度減少 0.1 這樣就會有慢慢消失的效果
alphaRange
redSpeed
greenSpeed
blueSpeed

CAEmitterLayer

建立好 CAEmitterCell 之後，需要通過 CAEmitterLayer 顯示內容。

我們可以通過設定 layer 的範圍、形狀、出現的位置等設定來達到有趣的效果。

比如這次的例子是在一個長方形的範圍內，在高度一半的地方排成一條線產出粒子。

常用參數

emitterPosition – 發射位置
birthRate – 粒子產生的係數（一個畫面上會有多少多少個粒子，就是 CAEmitterCell 的 birthRate * CAEmitterLayer 的 birthRate）
emitterSize – 發射器的尺寸
emitterCells – 粒子數組

renderMode – 渲染模式

kCAEmitterLayerUnordered
kCAEmitterLayerOldestFirst
kCAEmitterLayerOldestLast
kCAEmitterLayerBackToFront
kCAEmitterLayerAdditive

emitterMode – 發射模式

kCAEmitterLayerPoints
kCAEmitterLayerOutline
kCAEmitterLayerSurface
kCAEmitterLayerVolume

emitterShape – 發射形狀

kCAEmitterLayerPoint

kCAEmitterLayerLine

kCAEmitterLayerRectangle

kCAEmitterLayerCuboid
kCAEmitterLayerCircle
kCAEmitterLayerSphere

Reference

官方文件 – CAEitterLayer
官方文件 – CAEmitterCell
本文在 Github 上的 Source Code

Merry Christmas – 下雪效果 ( CAEmitterLayer + CAEmitterCell)

Merry Christmas

CAEmitterCell

基礎

角度

速度

加速度

縮放

旋轉