CAEmitterLayer(烟花)

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

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


烟花效果.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属性,以达到预期效果

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


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 227,488评论 6 531
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 98,034评论 3 414
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 175,327评论 0 373
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 62,554评论 1 307
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 71,337评论 6 404
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 54,883评论 1 321
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 42,975评论 3 439
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 42,114评论 0 286
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 48,625评论 1 332
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 40,555评论 3 354
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 42,737评论 1 369
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 38,244评论 5 355
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 43,973评论 3 345
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 34,362评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 35,615评论 1 280
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 51,343评论 3 390
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 47,699评论 2 370