使用ARKit+CAEmitterLayer粒子发射器放个烟花

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

前言

马上就要过年了，在这里提前祝大家新年快乐。还记得小时候放鞭炮、放烟花的快乐时光吗，在大城市里面不让放烟花，就算在农村，有的地方也不让放了swifter。现在我们就使用ARKit+CAEmitterLayer粒子发射器给大家放个烟花吧。

下面我们就来实现这个效果：

1、创建AR项目

1.1、 打开XCode，新建项目，选择Augmented Reality App

1.2、设置项目名称，bundlswift怎么读e id，选择渲染引擎SceneKit，语言使用Swift

创建完成之后，你会发现系统自动创建了一个飞机的场景

class ViewController: UIViewController, ARSCNViewDelegate {
  @IBOutlet var sceneView: ARSCNView!
  override func viewDidLoad() {
    super.viewDidLoad()
    // Set the view's delegate
    sceneView.delegate = self
   
    // Show statistics such as fps and timing information
    sceneView.showsStatistics = true
   
    // Create a new scene
    let scene = SCNScene(named: "art.scnassets/ship.scn")!
   
    // Set the scene to the view
    sceneView.scene = scene
  }
 
    // 其他代码省略...
}

1.3、将飞机的场景删除，然后创建一个平面几何形状SCNPlane

override func viewDidLoad() {
    super.viewDidLoad()
    // Set the view's delegate
    sceneView.delegate = self
    // 创建一个平面几何形状SCNPlane 宽为0.5米，高为1米
    let plane = SCNPlane(width: 0.5, height: 1)
    // 基于几何图形创建节点，节点的创建不仅仅可以基于平面，长方体、圆球、圆锥、圆环、金字塔形 等等都可以创建
    let node = SCNNode(geometry: plane)
    node.position = SCNVector3Make(0, 0.1, -1)
    // 添加节点
    sceneView.scene.rootNode.addChildNode(node)
}

这样一个平面场景就创建好了，下面看看效果：

2、CAEmitterLayer粒子发射器实现烟花

实现烟花效果，我们需要使用CAEmitterLswifterayer结合CAEmitterCell。烟花需要三个cell，一个提供发射的，一个用于爆炸的，一个用于爆炸后飞溅的火花

下面是代码：

extension ViewController {
  // 烟花View
  private func createFireWorksView() -> UIView {
    let fireworksBgView = UIView()
        fireworksBgView.isOpaque = false
    fireworksBgView.frame = CGRect(x: 0, y: 0, width: 500, height: 1000)
    let viewSize = fireworksBgView.bounds.size
   
    // 设置CAEmitterLayer
    let fireworksEmitter = CAEmitterLayer()
    fireworksEmitter.preservesDepth = true
    // 1、设置发射的位置
    fireworksEmitter.emitterPosition = CGPoint(x: viewSize.width/2, y: viewSize.height)
    // 发射源的size 决定了发射源的大小
    fireworksEmitter.emitterSize = CGSize(width: viewSize.width/2, height: 0)
    // 发射模式
    fireworksEmitter.emitterMode = .outline
    // 发射形状
    fireworksEmitter.emitterShape = .line
    // 渲染模式
    fireworksEmitter.renderMode = .additive
    // 用于初始化随机函数的种子
    fireworksEmitter.seed = arc4random()%100 + 1
    // 每秒产生的粒子数量的系数
    fireworksEmitter.birthRate = 1
    // 2、发射
    let rocket = CAEmitterCell()
    // 粒子参数的速度乘数因子
    rocket.birthRate = 1
    // 发射角度
    rocket.emissionRange = 0
    // 速度
    rocket.velocity = 500
    // 速度范围
    rocket.velocityRange = 100
    // y方向的加速度分量
    rocket.yAcceleration = 70
    rocket.lifetime = 1.02
    // 粒子要展示的图片
    rocket.contents = UIImage(named: "01")?.cgImage
    // 缩放比例
    rocket.scale = 1
    // 粒子颜色
    rocket.color = UIColor.red.cgColor
    rocket.greenRange = 1
    rocket.redRange = 1
    rocket.blueRange = 1
    // 粒子旋转角度范围
    rocket.spinRange = 0
    // 3、爆炸
    let burst = CAEmitterCell()
    // 粒子参数的速度乘数因子
    burst.birthRate = 1.0
    // 速度
    burst.velocity = 10
    burst.scale = 1
    burst.redSpeed = -1.5
    burst.blueSpeed = 1.5
    burst.greenSpeed = 1.0
    burst.lifetime = 0.1
    // 4、爆炸后飞溅的火花
    let spark = CAEmitterCell()
    spark.birthRate = 400
    spark.velocity = 300
    spark.emissionRange = 2 * CGFloat.pi
    spark.yAcceleration = 200
    // 生命周期范围
    spark.lifetime = 1.5
    // 粒子内容
    spark.contents = UIImage(named: "01")?.cgImage
    spark.scaleSpeed = -0.4
    spark.greenSpeed = -0.1
    spark.redSpeed = 0.4
    spark.blueSpeed = -0.1
    spark.alphaSpeed = -0.25
    spark.spin = 2 * CGFloat.pi
    spark.spinRange = 2 * CGFloat.pi
    // 粒子添加到CAEmitterLayer上
    fireworksEmitter.emitterCells = [rocket]
    rocket.emitterCells = [burst]
    burst.emitterCells = [spark]
    fireworksBgView.layer.addSublayer(fireworksEmitter)
    return fireworksBgView
  }
}

3、创建SCNMaterial渲染器，将烟花View添加到里面

以下代码都是在 1.3 步里application面

3.1、创建渲染器

// 创建渲染器
let material = SCNMaterial()
// 将`烟花View`设置给contents，这个 contents 属性可以设置很多东西，UILabel，UIImage，甚至 AVPlayer 都可以
material.diffuse.contents = createFireWorksView()

3.2、用渲染器对几何图形进swift系统行渲染

// 用渲染器对几何图形进行渲染
node.geometry?.materials = [material]

到此整个功能就结束了，demo地址

参考：
CAEmitterLayer粒子发射器的神奇效果