爆炸效果

http://www.jianshu.com/p/f616017fbeaf

该篇文章中Demo实现的思路如下：

1. 在ViewController中放三张图片，同时在viewDidLayoutSubviews中创建3个ExplosionLayer用于震动，一开始这3个layer并没有添加到ViewController中的view的subLayer层次中

2. 当ViewController中这3条语句codeLayer.explode()、chromeLayer.explode()、consoleLayer.explode()执行后，则为页面中的3张图片添加关键帧动画使得图片开始上下左右震动，震动动画完成后，把3个layer添加到ViewController中的view的subLayer中。

3. 图片开始震动时，计算每张图片包含的粒子数量（粒子大小为2X2），每个粒子的颜色（颜色以粒子的origin为准），由于计算需要耗费大量时间和资源，所以把计算过程放在后台线程，并且用信号量加以控制，确保图片的关键帧动画执行完成后，粒子的计算过程也已经结束，否则等待计算结束。

4. 关键帧动画执行完成，粒子计算过程结束后，把3个layer添加到subLayer层次中，此时的layer是空白的，没有如何颜色或图片信息，之后调用ExplosionHelper.createExplosionPoints(self, targetView: targetView, animationType:self.animationType)创建粒子，把粒子添加到3个layer中，此时的layer才包含由粒子组成的图片，之后隐藏原始图片imageView。

5. 创建粒子过程中会为每个粒子添加fallanimation或upanimation

6. 每个粒子被添加到父layer后，会自动开始fallanimation或upanimation动画

7. fallanimation或upanimation动画主要改变粒子的3个属性，position、transform.scale、opacity，即移动、缩放、改变透明度。通过改变这几个属性组成一组动画，粒子的位置是随机计算的，所以会产生每个粒子移动的距离不等类似于爆炸的效果。

8. 粒子作为一个layer，动画完成后会回到原先的postion，所以在开始动画后设置新的position给layer  explosionAnimation.resetLayerProperty(self)，防止回到原来位置。