CAEmitterLayer(烟花)

上篇介绍了CAEmitterLayer的属性和CAEmitterCell的属性,还有CAEmitterLayer的基本用法。

这里将使用CAEmitterLayer来实现放烟花效果,附带尾焰效果。先看效果图


CAEmitterLayer(烟花)_第1张图片
烟花效果.gif

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、之前只介绍了CAEmitterLayeremitterCells属性,但是CAEmitterCell也是有emitterCells属性的。这里是实现效果图动画的关键
  • 2、如果有个CAEmitterCell类型的cell设置cell.emitterCells=[cell1],cell1也是CAEmitterCell类型的,这里cell1是基于cell的,只有在cell出现之后,cell1才会开始出现。cellbirthRate会影响到cell1的出现的粒子数。比如cell.birthRate = 0.2,则cell1出现的粒子数是cell1.birthRate的0.2倍。
  • 3、CAEmitterCellbirthRate属性表示的一秒时间出现的粒子数。这里要注意的是birthRate=1的时候,这个时候粒子出现的时间点在1-1.02之间。(为什么会有这个延迟,估计是CAEmitterLayer的随机性和浮动性吧。)
  • 4、在设置CAEmitterCell的emitterCells属性的时候,要注意CAEmitterCell的lifeTime属性,以达到预期效果

注意的事项是自己理解的。如果有更好的说法,欢迎留言。


你可能感兴趣的:(CAEmitterLayer(烟花))