iOS Developer

关于粒子动画

2017-05-16  本文已影响119人  村长大人tardis_cxx

iOS animation 粒子动画


在直播流行的当下,秀场界面也是绚丽多彩,如点击心形就可以发出❤️图标,十分绚丽,❤️越多,从某个层面来说,秀场人气旺盛!
如此,那么这个❤️的动画是什么呢?
答案就是粒子动画,用粒子动画可以让界面更加酷炫,比如秀场当中有土豪送飞机、豪车,就可以全屏❤️或者🌹,当然粒子动画不止如此,还有天气预报的界面,下雨下雪什么的都可以用粒子动画来实现。
以下是我研究的实现demo,思路如下:

  • 创建粒子发射器
  • 定义一个粒子数组
  • 设置每一个粒子,并添加到粒子数组中
  • 把粒子数组设置给粒子发射器
  • 把粒子发射器添加到view的layer

创建粒子发射器,设置其发射位置

let emitterLayer = CAEmitterLayer()
emitterLayer.emitterPosition = animaBtn.center

粒子发射器可以存放多个粒子,所以需要定义存放多个粒子的数组

var cells = [CAEmitterCell]()

设置每一个粒子,每一个粒子的样式是不同的,一般情况下,是不用画出来的,那样不是太好,那么就用图片,使用图片方便简单,当然这应该有规律的一组图片:

for i in 1..<5 {
    // 创建粒子
    let cell = CAEmitterCell()
    // 发射速率
    cell.birthRate = 6
    // 发射方向(弧度)
    cell.emissionLongitude = CGFloat(-Double.pi / 1.7)
    cell.emissionRange = CGFloat(Double.pi / 6)
    // 速率
    cell.velocity = 75
    cell.velocityRange = 50
    // 存在时间
    cell.lifetime = 20
    cell.lifetimeRange = 5
    // 缩放比例
    cell.scale = 0.6
    cell.scaleRange = 0.3
    cell.scaleSpeed = 0.05
    // 展示内容(这里是直接用图片)
    cell.contents = UIImage(named: "love\(i)")?.cgImage
      
    // 添加到数组      
    cells.append(cell)
}

当然关于粒子的设置的东西还有不少,但以上也差不多够了,其数值可以微调,最后把粒子数组设置给发射器,并添加到父layer上就ok了:

emitterLayer.emitterCells = cells
view.layer.addSublayer(emitterLayer)

这样就差不多完成了,效果图如下:

效果图.png
上一篇 下一篇

猜你喜欢

热点阅读