照例我们先看看效果图
怎么样？效果很不错吧，下面来一起看看实现的过程和代码示例。
实现原理
从图中可以大致看出，爆炸点点都是取的某坐标的颜色值，然后根据一些动画效果来完成的。
取色值
怎么取的view的某个点的颜色值呢？google一下，就可以找到很多答案。就不具体说了。创建1*1的位图，然后渲染到屏幕上，然后得到rgba。我这里写的是uiview的extension。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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的动画对象，提供动画效果。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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的动画效果
这个比较简单，就是上下左右震动下。具体代码就不贴出来了。
|
1
2
|
let shakeanimation = cakeyframeanimation(keypath: "position")... |
代码结构
大致思路就是这样。代码结构如下：
explosionlayer是粒子的父容器，
explosionpointlayer是粒子本身
explosionhelper是个辅助类，用于计算粒子位置，颜色值。
fallanimation，upanimation是实现了explosionanimationprotocol的动画，分别提供向下落，向上的效果。
碰到的问题
刚开始我是在边计算颜色值，边绘制粒子，发现会卡一下才会有爆炸效果出来，分析可能是在计算颜色值在主线程，时间较长，所以卡住了。
后来想到放到后台线程中去做，但是在主线程中取色值的时候，后台必须执行完，所以用了信号量来进行同步。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// 震动效果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开始震动时，就开始在后台计算。震动动画结束后，等待计算完成。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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实现爆炸效果的全部内容了，实现后的效果是不是非常的炫酷？感兴趣的朋友们快快实践起来吧，只有自己操作了才能真正的理解，希望这篇文章对大家的学习或者工作能带来一定的帮助。
