by 
聖誕節的氣氛籠罩著整個城市，這次想做個下雪的動畫。
查資料的過程發現，原來最近常見的直播應用中，很多愛心噴射的動畫也有用類似的方法實現。
Merry Christmas
除了知道直播應用中有用到類似的效果，在 Wechat 又或者 Line 上也會被套上一些動畫，讓使用者感受到節日的氣氛。
要實現這個動畫不需要使用其他的第三方 library 而是直接通過 Core Image 就可以了。
除了背景圖以外，完整的 code 很短，我這裡直接貼上來在另外介紹。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
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