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

举报
Serendipity·y 发表于 2022/02/16 23:13:50 2022/02/16
【摘要】 “下雨”的动画效果 一、效果展示 二、实现流程 设置背景 func setupUI() { self.imageView = UIImageView.init() ...

“下雨”的动画效果

一、效果展示

在这里插入图片描述

二、实现流程

  • 设置背景
	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!)
    }

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 设置发射源
	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)

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 设置发射粒子
        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]
        

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 点击事件处理
	// 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")
        }
    }

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

“烟花”的动画效果

一、效果展示

在这里插入图片描述

实现
        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)
        

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70

完整示例

文章来源: blog.csdn.net,作者:Serendipity·y,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/Forever_wj/article/details/107886181

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。