个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章iOS实现爆炸的粒子效果示例代码由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

照例我们先看看效果图 。

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

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

实现原理 。

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

取色值 。

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

?
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是个辅助类，用于计算粒子位置，颜色值.

    fallanimation，upanimation是实现了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实现爆炸效果的全部内容了，实现后的效果是不是非常的炫酷？感兴趣的朋友们快快实践起来吧，只有自己操作了才能真正的理解，希望这篇文章对大家的学习或者工作能带来一定的帮助.

最后此篇关于iOS实现爆炸的粒子效果示例代码的文章就讲到这里了,如果你想了解更多关于iOS实现爆炸的粒子效果示例代码的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： 用正则表达式判断字符串是汉字还是拼音的js函数代码
文章推荐： javascript的正则表达式学习资料复习
文章推荐： iis、apache与nginx禁止目录执行asp、php脚本的实现方法
文章推荐： php正则表达式的模式修正符和逆向引用使用介绍
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com