CAEmitterLayer，粒子發射系統
阿新 • • 發佈：2019-02-10
基於CAEmitterLayer做的點贊效果圖：
CAEmitterCell
CAEmitterCell: CAEmitterCell是粒子發射系統裡的粒子，用CAEmitterCell來定義你所需要的粒子的樣式，圖片，顏色，方向，運動，縮放比例和生命週期等等。
- 屬性列表
| 屬性名 | 作用 |
|---|---|
| alphaRange | 一個粒子的顏色alpha能改變的範圍 |
| alphaSpeed | 粒子透明度在生命週期內的改變速度 |
| birthrate | 每秒發射的粒子數量 |
| blueRange | 一個粒子的顏色blue 能改變的範圍 |
| blueSpeed | 粒子blue在生命週期內的改變速度 |
| color | 粒子的顏色 |
| contents | 是個CGImageRef的物件,既粒子要展現的圖片 |
| contentsRect | 應該畫在contents裡的子rectangle |
| emissionLatitude | 發射的z軸方向的角度 |
| emissionLongitude | x-y平面的發射方向 |
| emissionRange | 周圍發射角度 |
| emitterCells | 粒子發射的粒子的陣列 |
| enabled | 粒子是否被渲染 |
| greenrange | 一個粒子的顏色green 能改變的範圍 |
| greenSpeed | 粒子green在生命週期內的改變速度 |
| lifetime | 生命週期 |
| lifetimeRange | 生命週期範圍 lifetime= lifetime(+/-) lifetimeRange |
| magnificationFilter | 增加自己的大小 |
| minificatonFilter | 減小自己的大小 |
| minificationFilterBias | 減小大小的因子 |
| name | 粒子的名字 |
| redRange | 一個粒子的顏色red 能改變的範圍 |
| redSpeed | 粒子red在生命週期內的改變速度 |
| scale | 縮放比例 |
| scaleRange | 縮放比例範圍 |
| scaleSpeed | 縮放比例速度 |
| spin | 子旋轉角度 |
| spinrange | 子旋轉角度範圍 |
| velocity | 速度 |
| velocityRange | 速度範圍 |
| xAcceleration | 粒子x方向的加速度分量 |
| yAcceleration | 粒子y方向的加速度分量 |
| zAcceleration | 粒子z方向的加速度分量 |
- 程式碼示例
<code class="language-swift hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">let explosionCell = CAEmitterCell() explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.name</span> = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"explosion"</span> explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.alphaRange</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.10</span> explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.alphaSpeed</span> = -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span> explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.lifetime</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.7</span> explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.lifetimeRange</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.3</span> explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.birthRate</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.velocity</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">40.00</span> explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.velocityRange</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10.00</span> explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scale</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.03</span> explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scaleRange</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.02</span> explosionCell<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.contents</span> = UIImage(named: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Sparkle"</span>)?<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.CGImage</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>
CAEmitterLayer
CAEmitterLayer ：CAEmitterLayer類提供了一個粒子發射器系統為核心的動畫。這些粒子是由CAEmitterCell組成的例項，它相當於一個管理者，來管理 CAEmitterCell的發射的一些細節，比如發射的位置，發射形狀等等。
- 屬性列表
| 屬性名 | 做用 |
|---|---|
| emitterPosition | 發射位置 |
| emitterSize | 發射源的大小 |
| emitterMode | 發射模式 |
| emitterShape | 發射源的形狀 |
| renderMode | 渲染模式 |
| birthRate | 粒子產生係數，預設1.0 |
| emitterCells | 裝著CAEmitterCell物件的陣列，被用於把粒子投放到layer上 |
| emitterDepth | 決定粒子形狀的深度聯絡 |
| emitterZposition | 發射源的z座標位置 |
| lifetime | 粒子生命週期 |
| scale | 粒子的縮放比例 |
| seed | 用於初始化隨機數產生的種子 |
| spin | 自旋轉速度 |
| velocity | 粒子速度 |
- 程式碼示例
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">explosionLayer = CAEmitterLayer() explosionLayer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.name</span> = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"emitterLayer"</span> explosionLayer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.emitterShape</span> = kCAEmitterLayerCircle<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span> explosionLayer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.emitterMode</span> = kCAEmitterLayerOutline<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span> explosionLayer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.emitterSize</span> = CGSizeMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span> explosionLayer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.emitterCells</span> = [explosionCell] explosionLayer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.renderMode</span> = kCAEmitterLayerOldestFirst<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span> explosionLayer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.masksToBounds</span> = false explosionLayer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.position</span> = CGPointMake(self<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.frame</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.size</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.width</span>/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.0</span>, self<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.frame</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.size</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.height</span>/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.0</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span> explosionLayer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.zPosition</span> = -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span> layer<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.addSublayer</span>(explosionLayer)</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>