在github上看到了android的爆炸效果，感覺做的不錯，自己也想做著試試，效果沒它的好，算是基本實現了。
效果圖如下，感覺gif錄制的不太清晰。
實現原理
從圖中可以大致看出，爆炸點點都是取的某坐標的顏色值，然后根據一些動畫效果來完成的。
取色值
怎么取的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.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的動畫效果
這個比較簡單，就是上下左右震動下。具體代碼就不貼出來了，可以到demo里看。
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.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
}
}
在后續的創建粒子時，就直接從緩存中取就行了。
