http://www.itdecent.cn/p/f616017fbeaf

該篇文章中Demo實(shí)現(xiàn)的思路如下：

1. 在ViewController中放三張圖片，同時(shí)在viewDidLayoutSubviews中創(chuàng)建3個(gè)ExplosionLayer用于震動(dòng)，一開始這3個(gè)layer并沒有添加到ViewController中的view的subLayer層次中

2. 當(dāng)ViewController中這3條語句codeLayer.explode()、chromeLayer.explode()、consoleLayer.explode()執(zhí)行后，則為頁面中的3張圖片添加關(guān)鍵幀動(dòng)畫使得圖片開始上下左右震動(dòng)，震動(dòng)動(dòng)畫完成后，把3個(gè)layer添加到ViewController中的view的subLayer中。

3. 圖片開始震動(dòng)時(shí)，計(jì)算每張圖片包含的粒子數(shù)量（粒子大小為2X2），每個(gè)粒子的顏色（顏色以粒子的origin為準(zhǔn)），由于計(jì)算需要耗費(fèi)大量時(shí)間和資源，所以把計(jì)算過程放在后臺(tái)線程，并且用信號(hào)量加以控制，確保圖片的關(guān)鍵幀動(dòng)畫執(zhí)行完成后，粒子的計(jì)算過程也已經(jīng)結(jié)束，否則等待計(jì)算結(jié)束。

4. 關(guān)鍵幀動(dòng)畫執(zhí)行完成，粒子計(jì)算過程結(jié)束后，把3個(gè)layer添加到subLayer層次中，此時(shí)的layer是空白的，沒有如何顏色或圖片信息，之后調(diào)用ExplosionHelper.createExplosionPoints(self, targetView: targetView, animationType:self.animationType)創(chuàng)建粒子，把粒子添加到3個(gè)layer中，此時(shí)的layer才包含由粒子組成的圖片，之后隱藏原始圖片imageView。

5. 創(chuàng)建粒子過程中會(huì)為每個(gè)粒子添加fallanimation或upanimation

6. 每個(gè)粒子被添加到父layer后，會(huì)自動(dòng)開始fallanimation或upanimation動(dòng)畫

7. fallanimation或upanimation動(dòng)畫主要改變粒子的3個(gè)屬性，position、transform.scale、opacity，即移動(dòng)、縮放、改變透明度。通過改變這幾個(gè)屬性組成一組動(dòng)畫，粒子的位置是隨機(jī)計(jì)算的，所以會(huì)產(chǎn)生每個(gè)粒子移動(dòng)的距離不等類似于爆炸的效果。

8. 粒子作為一個(gè)layer，動(dòng)畫完成后會(huì)回到原先的postion，所以在開始動(dòng)畫后設(shè)置新的position給layer ?explosionAnimation.resetLayerProperty(self)，防止回到原來位置。