iOS实现“下雨下雪”动画效果和“烟花”动画效果

“下雨”的动画效果

一、效果展示

二、实现流程

• 设置背景

	func setupUI() {
        self.imageView = UIImageView.init()
        self.imageView?.frame = CGRect.init(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.height)
        self.imageView?.image = UIImage.init(named: "rain")
        self.view.addSubview(self.imageView!)
        self.view.sendSubviewToBack(self.imageView!)
    }

• 设置发射源

	self.rainLayer = CAEmitterLayer.init()
    self.imageView?.layer.addSublayer(self.rainLayer!)
        
    // 发射形状:线性
    self.rainLayer!.emitterShape = CAEmitterLayerEmitterShape.line
    // 发射模式
    self.rainLayer!.emitterMode = CAEmitterLayerEmitterMode.surface
    // 发射源大小
    self.rainLayer!.emitterSize = self.view.frame.size
    // 发射源位置 y最好不要设置为0 最好<0
    self.rainLayer!.emitterPosition = CGPoint.init(x: self.view.bounds.size.width * 0.5, y: -10)

• 设置发射粒子

        let snowCell = CAEmitterCell.init()
        // 每秒产生的粒子数量的系数
        snowCell.birthRate = 25.0
        // 粒子内容
        snowCell.contents = UIImage.init(named: "rain_white")?.cgImage
        // 粒子的生命周期
        snowCell.lifetime = 20.0
        // speed粒子速度.图层的速率。用于将父时间缩放为本地时间，例如，如果速率是2，则本地时间的进度是父时间的两倍。默认值为1
        snowCell.speed = 10.0
        // 粒子速度系数, 默认1.0
        snowCell.velocity = 10.0
        // 每个发射物体的初始平均范围,默认等于0
        snowCell.velocityRange = 10.0
        // 粒子在y方向的加速的
        snowCell.yAcceleration = 1000.0
        // 粒子缩放比例: scale
        snowCell.scale = 0.1
        // 粒子缩放比例范围:scaleRange
        snowCell.scaleRange = 0.0
        self.rainLayer?.emitterCells = [snowCell]
        

• 点击事件处理

	// MARK: Events Responder
    @IBAction func responderToRainBig(_ sender: UIButton) {
        if self.rainLayer!.birthRate < 30 {
            self.rainLayer?.setValue(self.rainLayer!.birthRate + 1, forKey: "birthRate")
            self.rainLayer?.setValue(self.rainLayer!.scale + 0.05, forKey: "scale")
        }
    }
    
    @IBAction func respondertToRainStop(_ sender: UIButton) {
        sender.isSelected = !sender.isSelected
        if sender.isSelected {
            self.rainLayer?.setValue(0.0, forKey: "birthRate")
        } else {
            self.rainLayer?.setValue(1.0, forKey: "birthRate")
        }
    }
    
    @IBAction func responderToRainSmall(_ sender: UIButton) {
        if self.rainLayer!.birthRate > 1 {
            self.rainLayer?.setValue(self.rainLayer!.birthRate - 1, forKey: "birthRate")
            self.rainLayer?.setValue(self.rainLayer!.scale - 0.05, forKey: "scale")
        }
    }

“烟花”的动画效果

一、效果展示

实现

        self.view.backgroundColor = UIColor.black
        
        // cell产生在底部,向上移动
        let fireworkdEmitter = CAEmitterLayer.init()
        
        fireworkdEmitter.emitterPosition = CGPoint.init(x: self.view.frame.size.width/2, y: self.view.frame.size.height)
        fireworkdEmitter.emitterMode = CAEmitterLayerEmitterMode.outline
        fireworkdEmitter.emitterShape = CAEmitterLayerEmitterShape.line
        fireworkdEmitter.renderMode = CAEmitterLayerRenderMode.additive
        fireworkdEmitter.seed = (arc4random()%100)+1
        
        // 创建火箭cell
        let rocket = CAEmitterCell.init()
        rocket.birthRate = 1
        rocket.emissionRange = CGFloat(0.25 * Double.pi);
        rocket.velocity = 300
        rocket.velocityRange = 75
        rocket.lifetime = 1.02
        
        rocket.contents = UIImage.init(named: "rain_white")?.cgImage
        rocket.scale = 0.5
        rocket.scaleRange = 0.5
        rocket.color = UIColor.red.cgColor
        rocket.greenRange = 1.0
        rocket.redRange = 1.0
        rocket.blueRange = 1.0
        rocket.spinRange = CGFloat(Double.pi)
        
        // 破裂对象不能被看到,但会产生火花
        // 这里改变颜色,因为火花继承它的值
        let fireCell = CAEmitterCell.init()
        
        fireCell.birthRate      = 1
        fireCell.velocity       = 0
        fireCell.scale          = 1
        fireCell.redSpeed       = -1.5
        fireCell.blueSpeed      = +1.5
        fireCell.greenSpeed     = +1.5
        fireCell.lifetime       = 0.34
        
        
        // and finally, the sparks
        let spark = CAEmitterCell.init()
        // 炸开后产生400个小烟花
        spark.birthRate         = 400
        // 速度
        spark.velocity          = 125
        // 360度
        spark.emissionRange     = CGFloat(2 * Double.pi)
        // 重力
        spark.yAcceleration     = 40
        spark.lifetime          = 3
        
        spark.contents          = UIImage.init(named: "rain_white")?.cgImage
        spark.scaleSpeed        = -0.2
        
        spark.greenSpeed        = -0.1
        spark.redSpeed          = +0.1
        spark.blueSpeed         = -0.1
        spark.alphaSpeed        = -0.25
        
        spark.spin              = CGFloat(2 * Double.pi)
        spark.spinRange         = CGFloat(2 * Double.pi)
        
        fireworkdEmitter.emitterCells        = [rocket]
        rocket.emitterCells                  = [fireCell]
        fireCell.emitterCells                = [spark];
        
        self.view.layer.addSublayer(fireworkdEmitter)
        

完整示例传送门

iOS实现各种粒子的动画效果