iOS實(shí)現(xiàn)爆炸的粒子效果示例代碼

更新時(shí)間：2016年10月12日 11:33:22 作者：summer_liu

之前在網(wǎng)上看到了一個(gè)Android實(shí)現(xiàn)的爆炸效果，感覺非常不錯(cuò)，所以自己嘗試用iOS來實(shí)現(xiàn)下效果，現(xiàn)在將實(shí)現(xiàn)的過程、原理以及遇到的問題分享給大家，有需要的朋友們可以參考借鑒，下面來一起看看吧。

照例我們先看看效果圖

怎么樣？效果很不錯(cuò)吧，下面來一起看看實(shí)現(xiàn)的過程和代碼示例。

實(shí)現(xiàn)原理

從圖中可以大致看出，爆炸點(diǎn)點(diǎn)都是取的某坐標(biāo)的顏色值，然后根據(jù)一些動(dòng)畫效果來完成的。

取色值

怎么取的view的某個(gè)點(diǎn)的顏色值呢？google一下，就可以找到很多答案。就不具體說了。創(chuàng)建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.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)
 }
}

粒子的生成

這里我寫的比較簡(jiǎn)單，就是固定每個(gè)粒子大小，根據(jù)View的寬高算出橫向，縱向的粒子數(shù)，取該點(diǎn)的色值，設(shè)置粒子背景色，然后生成即可。

主要代碼如下：

frameDict是我預(yù)先計(jì)算好的坐標(biāo)表，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()
    }
   }
  }
 }

動(dòng)畫效果

每個(gè)粒子都有一個(gè)CAAnimation動(dòng)畫，數(shù)據(jù)由調(diào)用者提供，靈活點(diǎn)。

這里定義了一個(gè)protocol：ExplosionAnimationProtocol ，可以自定義實(shí)現(xiàn)了該protocol的動(dòng)畫對(duì)象，提供動(dòng)畫效果。

protocol ExplosionAnimationProtocol {

 // 粒子初始位置
 var oldPosition: CGPoint { set get }

 // 粒子最終位置
 var newPosition: CGPoint { set get }

 // 縮放
 var scale: CGFloat { set get }

 // 動(dòng)畫時(shí)長(zhǎng)
 var duration: CFTimeInterval { set get }

 // 動(dòng)畫重復(fù)次數(shù)
 var repeatCount: Float { set get }

 // 生成動(dòng)畫
 func animation() -> CAAnimation

 // 設(shè)置動(dòng)畫完之后的屬性
 func resetLayerProperty(layer: CALayer)
}

要發(fā)生爆炸view的動(dòng)畫效果

這個(gè)比較簡(jiǎn)單，就是上下左右震動(dòng)下。具體代碼就不貼出來了。

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

代碼結(jié)構(gòu)

大致思路就是這樣。代碼結(jié)構(gòu)如下：

ExplosionLayer是粒子的父容器，

ExplosionPointLayer是粒子本身

ExplosionHelper是個(gè)輔助類，用于計(jì)算粒子位置，顏色值。

FallAnimation，UpAnimation是實(shí)現(xiàn)了ExplosionAnimationProtocol的動(dòng)畫，分別提供向下落，向上的效果。

碰到的問題

剛開始我是在邊計(jì)算顏色值，邊繪制粒子，發(fā)現(xiàn)會(huì)卡一下才會(huì)有爆炸效果出來，分析可能是在計(jì)算顏色值在主線程，時(shí)間較長(zhǎng)，所以卡住了。

后來想到放到后臺(tái)線程中去做，但是在主線程中取色值的時(shí)候，后臺(tái)必須執(zhí)行完，所以用了信號(hào)量來進(jìn)行同步。

// 震動(dòng)效果
private func shake() {

  self.createSemaphore()

  // 計(jì)算位置，色值
  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")
 }

當(dāng)要爆炸的view開始震動(dòng)時(shí)，就開始在后臺(tái)計(jì)算。震動(dòng)動(dòng)畫結(jié)束后，等待計(jì)算完成。

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
  }
 }

在后續(xù)的創(chuàng)建粒子時(shí)，就直接從緩存中取就行了。

總結(jié)

好了，以上就是iOS實(shí)現(xiàn)爆炸效果的全部?jī)?nèi)容了，實(shí)現(xiàn)后的效果是不是非常的炫酷？感興趣的朋友們快快實(shí)踐起來吧，只有自己操作了才能真正的理解，希望這篇文章對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助。

您可能感興趣的文章: