iOS实现爆炸的粒子效果示例代码

时间:2022-09-19 18:06:06

照例我们先看看效果图

iOS实现爆炸的粒子效果示例代码

怎么样?效果很不错吧,下面来一起看看实现的过程和代码示例。

实现原理

从图中可以大致看出,爆炸点点都是取的某坐标的颜色值,然后根据一些动画效果来完成的。

取色值

怎么取的view的某个点的颜色值呢?google一下,就可以找到很多答案。就不具体说了。创建1*1的位图,然后渲染到屏幕上,然后得到rgba。我这里写的是uiviewextension

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
extension uiview {
 
 public func colorofpoint(point:cgpoint) -> uicolor
 {
  var pixel:[cunsignedchar] = [0,0,0,0]
 
  let colorspace = cgcolorspacecreatedevicergb()
  let bitmapinfo = cgbitmapinfo(rawvalue: cgimagealphainfo.premultipliedlast.rawvalue)
 
  let context = cgbitmapcontextcreate(&pixel, 1, 1, 8, 4, colorspace, bitmapinfo.rawvalue)
 
  cgcontexttranslatectm(context, -point.x, -point.y)
 
  self.layer.renderincontext(context!)
 
  let red: cgfloat = cgfloat(pixel[0]) / 255.0
  let green: cgfloat = cgfloat(pixel[1]) / 255.0
  let blue: cgfloat = cgfloat(pixel[2]) / 255.0
  let alpha: cgfloat = cgfloat(pixel[3]) / 255.0
 
  return uicolor(red:red, green: green, blue:blue, alpha:alpha)
 }
}

粒子的生成

这里我写的比较简单,就是固定每个粒子大小,根据view的宽高算出横向,纵向的粒子数,取该点的色值,设置粒子背景色,然后生成即可。

主要代码如下:

framedict是我预先计算好的坐标表,colordict是颜色表。以"i-j"为key

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class func createexplosionpoints(containerlayer: explosionlayer, targetview: uiview, animationtype: explosionanimationtype) {
 
  let hcount = self.caculatepointhcount(containerlayer.targetsize.width)
  let vcount = self.caculatepointvcount(containerlayer.targetsize.height)
 
  for i in 0..<hcount {
   for j in 0..<vcount {
    let key = string(format: "%d-%d", i, j)
    if let rect = containerlayer.framedict[key], color = containerlayer.colordict[key] {
 
     let layer = createexplosionpointlayer(rect, bgcolor: color, targetviewsize: containerlayer.targetsize)
 
     // animation
     layer.explosionanimation = self.createanimationwithtype(animationtype, position: layer.position, targetviewsize: containerlayer.targetsize)
 
     containerlayer.addsublayer(layer)
 
     layer.beginanimation()
    }
   }
  }
 }

动画效果

每个粒子都有一个caanimation动画,数据由调用者提供,灵活点。

这里定义了一个protocol:explosionanimationprotocol ,可以自定义实现了该protocol的动画对象,提供动画效果。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
protocol explosionanimationprotocol {
 
 // 粒子初始位置
 var oldposition: cgpoint { set get }
 
 // 粒子最终位置
 var newposition: cgpoint { set get }
 
 // 缩放
 var scale: cgfloat { set get }
 
 // 动画时长
 var duration: cftimeinterval { set get }
 
 // 动画重复次数
 var repeatcount: float { set get }
 
 // 生成动画
 func animation() -> caanimation
 
 // 设置动画完之后的属性
 func resetlayerproperty(layer: calayer)
}

要发生爆炸view的动画效果

这个比较简单,就是上下左右震动下。具体代码就不贴出来了。

?
1
2
let shakeanimation = cakeyframeanimation(keypath: "position")
...

代码结构

大致思路就是这样。代码结构如下:

iOS实现爆炸的粒子效果示例代码

    explosionlayer是粒子的父容器,

    explosionpointlayer是粒子本身

    explosionhelper是个辅助类,用于计算粒子位置,颜色值。

    fallanimationupanimation是实现了explosionanimationprotocol的动画,分别提供向下落,向上的效果。

碰到的问题

刚开始我是在边计算颜色值,边绘制粒子,发现会卡一下才会有爆炸效果出来,分析可能是在计算颜色值在主线程,时间较长,所以卡住了。

后来想到放到后台线程中去做,但是在主线程中取色值的时候,后台必须执行完,所以用了信号量来进行同步。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 震动效果
private func shake() {
 
  self.createsemaphore()
 
  // 计算位置,色值
  self.caculate()
 
  let shakeanimation = cakeyframeanimation(keypath: "position")
 
  shakeanimation.values = [nsvalue.init(cgpoint: self.position), nsvalue.init(cgpoint: cgpointmake(self.position.x, self.position.y + 1)), nsvalue.init(cgpoint: cgpointmake(self.position.x + 1, self.position.y - 1)), nsvalue.init(cgpoint: cgpointmake(self.position.x - 1, self.position.y + 1))]
 
  shakeanimation.duration = 0.2
  shakeanimation.repeatcount = 15
  shakeanimation.delegate = self
  shakeanimation.removedoncompletion = true
 
  self.targetview?.layer.addanimation(shakeanimation, forkey: "shake")
 }

当要爆炸的view开始震动时,就开始在后台计算。震动动画结束后,等待计算完成。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
override func animationdidstop(anim: caanimation, finished flag: bool) {
 
  // wait for caculate
  dispatch_semaphore_wait(self.semaphore!, dispatch_time_forever)
 
  print("shake animation stop")
 
  // begin explode
  if let targetview = self.targetview {
   self.parentlayer?.addsublayer(self)
   explosionhelper.createexplosionpoints(self, targetview: targetview, animationtype: self.animationtype)
 
   self.targetview?.hidden = true
  }
 }

在后续的创建粒子时,就直接从缓存中取就行了。

总结

好了,以上就是ios实现爆炸效果的全部内容了,实现后的效果是不是非常的炫酷?感兴趣的朋友们快快实践起来吧,只有自己操作了才能真正的理解,希望这篇文章对大家的学习或者工作能带来一定的帮助。