上篇介绍了CAEmitterLayer的属性和CAEmitterCell的属性,还有CAEmitterLayer的基本用法。
这里将使用CAEmitterLayer来实现放烟花效果,附带尾焰效果。先看效果图

GitHub工程项目地址在CAAnimation_CAEmitterLayer
工程里面的FireworksViewController
里
先上代码,需要注意的问题会在代码后面说明:
//MARK: - 第二种烟花效果
extension FireworksViewController{
/**
* 注意事项:
* 1、CAEmitterCell也是可以设置emitterCells属性,表示的是粒子的粒子束
* 2、设置CAEmitterCell的emitterCells属性时,emitterCells的是在cell出现之后再出现的
* 3、设置birthRate=1的时候,cell出现的时间点并不是在一秒时间刚好到的节点,而是稍有延迟,在1.0-1.02之间(目前理解是这样)
* 4、要想设置粒子的粒子束,首先要掌握好时间节点
*/
//初始化一个粒子layer
private func setUpFireworksEmitterLayer(){
let bottomLayer = CAEmitterLayer()
//设置发射源样式
bottomLayer.emitterMode = kCAEmitterLayerPoint
//设置发射模式
bottomLayer.emitterShape = kCAEmitterLayerLine
//设置发射源位置
bottomLayer.emitterPosition = CGPoint(x: 0, y: view.bounds.height-20)
let lineCell = CAEmitterCell()
//设置个数
lineCell.birthRate = 1
//设置contents
lineCell.contents = #imageLiteral(resourceName: "Heart_red_02").cgImage
//设置scale
lineCell.scale = 0.5
//设置发射速度
lineCell.velocity = 350
//设置速度浮动值
lineCell.velocityRange = 200
//设置发射角度
lineCell.emissionLongitude = CGFloat.pi/2
//设置时长
lineCell.lifetime = 1.02
//设置尾巴cell
let tailCell = CAEmitterCell()
//设置个数
tailCell.birthRate = 200
//设置contents
tailCell.contents = #imageLiteral(resourceName: "Heart_red_02").cgImage
//设置scale
tailCell.scale = 0.05
//设置发射速度
tailCell.velocity = 100
//设置y轴分支加速度
tailCell.yAcceleration = 50
//设置发射角度
tailCell.emissionLatitude = -CGFloat.pi/2
//设置发射角度浮动值
tailCell.emissionRange = CGFloat.pi/4
//设置时长
tailCell.lifetime = 1
//初始化向上的cell
let riseCell = CAEmitterCell()
//设置contents
riseCell.contents = #imageLiteral(resourceName: "Heart_blue").cgImage
//设置每秒生成的个数
riseCell.birthRate = 3
//设置发射速度
riseCell.velocity = 400
//设置发射速度浮动值
riseCell.velocityRange = 200
//设置发射角度
riseCell.emissionLongitude = -CGFloat.pi/2
//设置时长
riseCell.lifetime = 1.02
//初始化一个放大的cell(过渡的cell)
let bigCell = CAEmitterCell()
//设置个数
bigCell.birthRate = 1
//设置时长
bigCell.lifetime = 0.2
//初始化一个扩散的cell
let fireCell = CAEmitterCell()
//设置contents
fireCell.contents = #imageLiteral(resourceName: "Heart_red").cgImage
//设置每秒的粒子个数
fireCell.birthRate = 1000
//设置scale
fireCell.scale = 0.05
//设置扩散速度
fireCell.velocity = 50
//设置发射角度
fireCell.emissionRange = CGFloat.pi * 2
//设置自旋角度
fireCell.spin = CGFloat.pi * 2
//设置自旋角度浮动值
fireCell.spinRange = CGFloat.pi * 2
//设置时长
fireCell.lifetime = 2
//初始化一个扩散的cell
let fireCell2 = CAEmitterCell()
//设置contents
fireCell2.contents = #imageLiteral(resourceName: "Heart_blue").cgImage
//设置每秒的粒子个数
fireCell2.birthRate = 1000
//设置scale
fireCell2.scale = 0.05
//设置扩散速度
fireCell2.velocity = 50
//设置发射角度
fireCell2.emissionRange = CGFloat.pi * 2
//设置自旋角度
fireCell2.spin = CGFloat.pi * 2
//设置自旋角度浮动值
fireCell2.spinRange = CGFloat.pi * 2
//设置时长
fireCell2.lifetime = 2
bottomLayer.emitterCells = [lineCell]
//设置lineCell的cells
lineCell.emitterCells = [tailCell,riseCell]
//设置riseCell的cells
riseCell.emitterCells = [bigCell,tailCell]
//设置bigCell的cells
bigCell.emitterCells = [fireCell,fireCell2]
view.layer.addSublayer(bottomLayer)
}
注意事项:
- 1、之前只介绍了
CAEmitterLayer
的emitterCells
属性,但是CAEmitterCell
也是有emitterCells
属性的。这里是实现效果图动画的关键 - 2、如果有个
CAEmitterCell
类型的cell
设置cell.emitterCells=[cell1]
,cell1
也是CAEmitterCell
类型的,这里cell1
是基于cell
的,只有在cell
出现之后,cell1
才会开始出现。cell
的birthRate
会影响到cell1
的出现的粒子数。比如cell.birthRate = 0.2
,则cell1
出现的粒子数是cell1.birthRate
的0.2倍。 - 3、
CAEmitterCell
的birthRate
属性表示的一秒时间出现的粒子数。这里要注意的是birthRate=1的时候,这个时候粒子出现的时间点在1-1.02之间。(为什么会有这个延迟,估计是CAEmitterLayer
的随机性和浮动性吧。) - 4、在设置CAEmitterCell的emitterCells属性的时候,要注意CAEmitterCell的lifeTime属性,以达到预期效果
注意的事项是自己理解的。如果有更好的说法,欢迎留言。
网友评论