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

照例我们先看看效果图

怎么样？效果很不错吧，下面来一起看看实现的过程和代码示例。
实现原理
从图中可以大致看出，爆炸点点都是取的某坐标的颜色值，然后根据一些动画效果来完成的。
取色值
怎么取的view的某个点的颜色值呢？google一下，就可以找到很多答案。就不具体说了。创建1*1的位图，然后渲染到屏幕上，然后得到RGBA。我这里写的是UIView的extension。

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.0let green: CGFloat = CGFloat（pixel[1]） / 255.0let blue: CGFloat = CGFloat（pixel[2]） / 255.0let alpha: CGFloat = CGFloat（pixel[3]） / 255.0return 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是个辅助类，用于计算粒子位置，颜色值。
    FallAnimation，UpAnimation是实现了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.2shakeAnimation.repeatCount = 15shakeAnimation.delegate = selfshakeAnimation.removedOnCompletion = trueself.targetView?.layer.addAnimation（shakeAnimation, forKey: "shake"） }

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

override func animationDidStop（anim: CAAnimation, finished flag: Bool） {// wait for caculatedispatch_semaphore_wait（self.semaphore！, DISPATCH_TIME_FOREVER）print（"shake animation stop"）// begin explodeif let targetView = self.targetView { self.parentLayer?.addSublayer（self） ExplosionHelper.createExplosionPoints（self, targetView: targetView, animationType: self.animationType） self.targetView?.hidden = true} }

在后续的创建粒子时，就直接从缓存中取就行了。
总结
好了，以上就是iOS实现爆炸效果的全部内容了，实现后的效果是不是非常的炫酷？感兴趣的朋友们快快实践起来吧，只有自己操作了才能真正的理解，希望这篇文章对大家的学习或者工作能带来一定的帮助。