iOS爆炸效果

在github上看到了android的爆炸效果，感觉做的不错，自己也想做着试试，效果没它的好，算是基本实现了。

效果图如下，感觉gif录制的不太清晰。

explosion.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..

动画效果

每个粒子都有一个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")
...

代码结构

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

[email protected]

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

在后续的创建粒子时，就直接从缓存中取就行了。

demo地址：https://github.com/silan-liu/ExplosionView.git