基于CAEmitterLayer做的点赞效果图:
![效果图](https://img-blog.csdn.net/20160426232735405)
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>