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

 更新时间:2016年10月12日 11:33:22   作者:summer_liu  
之前在网上看到了一个Android实现的爆炸效果,感觉非常不错,所以自己尝试用iOS来实现下效果,现在将实现的过程、原理以及遇到的问题分享给大家,有需要的朋友们可以参考借鉴,下面来一起看看吧。

照例我们先看看效果图

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

实现原理

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

取色值

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

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

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的动画对象,提供动画效果。

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的动画效果

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

let shakeAnimation = CAKeyframeAnimation(keyPath: "position")
...

代码结构

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


    ExplosionLayer是粒子的父容器,

    ExplosionPointLayer是粒子本身

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

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

碰到的问题

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

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

// 震动效果
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开始震动时,就开始在后台计算。震动动画结束后,等待计算完成。

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图片拉伸的4种方法

    iOS图片拉伸的4种方法

    这篇文章主要为大家详细介绍了iOS图片拉伸的4种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 理解Objective-C的变量以及面相对象的继承特性

    理解Objective-C的变量以及面相对象的继承特性

    这篇文章主要介绍了理解Objective-C的变量以及面相对象的继承特性,文中的所说的点语法即是'对象名.成员变量名'这种对变量的访问,需要的朋友可以参考下
    2016-01-01
  • IOSdrawRect实现雪花飘落效果

    IOSdrawRect实现雪花飘落效果

    这篇文章主要为大家详细介绍了IOSdrawRect实现雪花飘落效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • iOS开发中对文件目录的访问及管理的基本方法小结

    iOS开发中对文件目录的访问及管理的基本方法小结

    这篇文章主要介绍了iOS开发中对文件目录的访问及管理的基本方法小结,代码基于传统的Objective-C,需要的朋友可以参考下
    2015-10-10
  • 谈谈iOS开发之JSON格式数据的生成与解析

    谈谈iOS开发之JSON格式数据的生成与解析

    JSON格式取代了xml给网络传输带来了很大的便利,本篇文章主要介绍了iOS开发:对象直接转化成JSON详解,具有一定的参考价值,有兴趣的可以了解一下。
    2017-01-01
  • iOS底层实例解析Swift闭包及OC闭包

    iOS底层实例解析Swift闭包及OC闭包

    这篇文章主要为大家介绍了iOS底层实例解析Swift闭包及OC闭包,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • 详解iOS应用中播放本地视频以及选取本地音频的组件用法

    详解iOS应用中播放本地视频以及选取本地音频的组件用法

    这里来为大家详解iOS应用中播放本地视频以及选取本地音频的组件用法,分别使用MPMoviePlayerControlle和MPMediaPickerController来实现,两个都是MediaPlayer.framework中的多媒体组件,所以我们放到一起来讲.
    2016-06-06
  • IOS开发之路--C语言预处理

    IOS开发之路--C语言预处理

    由于预处理指令是在编译之前就进行了,因此很多时候它要比在程序运行时进行操作效率高。在C语言中包括三类预处理指令,今天将一一介绍:宏定义、条件编译、文件包含
    2014-08-08
  • iOS实现知乎和途家导航栏渐变的文字动画效果

    iOS实现知乎和途家导航栏渐变的文字动画效果

    这篇文章给大家分享了利用iOS实现知乎和途家导航栏渐变的文字动画效果,有需要的朋友们可以参考借鉴。下面来一起看看。
    2016-09-09
  • iOS微信支付开发案例

    iOS微信支付开发案例

    这篇文章主要为大家详细介绍了iOS微信支付开发案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08

最新评论