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)
这样就差不多完成了,效果图如下: