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

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

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


Merry Christmas

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

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

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


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

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *