實踐出真知，有的時候看到一些有趣的現(xiàn)象就想著用自己所學(xué)的知識復(fù)現(xiàn)一下。

?

? ?boomJS 緣起

前幾天在 github 上看到同事的一個這樣的小項目，在 IOS 上實現(xiàn)了這樣一個小動畫效果，看上去蠻炫的，效果圖：

我就尋思著，在瀏覽器環(huán)境下，用 Javascript 怎么實現(xiàn)呢？

在濃烈的好奇心驅(qū)使下，最終利用 Javascript 和 CSS3 完成了模仿上面的效果，通過調(diào)用方法，可以將頁面上的圖片一鍵爆炸，我給它起了個 boomJS 的名字，貼兩張效果圖：

? ? ??

Demo戳我。

?

???boomJS 實現(xiàn)

我感覺效果還是可以的，因為沒有使用 canvas ，所以無法取到圖片上每個像素的顏色值。使用了一些比較討（sha）巧（bi）的方法，下面簡單講講如何實現(xiàn)的：

1、構(gòu)造新圖容器，隱藏原圖

原本的圖是 <img> 標(biāo)簽的圖，一張整圖，最終的效果當(dāng)然不是在原圖上 boom ，看上去連貫的動畫本質(zhì)上只是一個障眼法，利用 Javascript 做了一些巧妙的變換，所以第一步所做的就是取到原圖的高寬及相對瀏覽器視窗的定位，再創(chuàng)建一個新的容器附著在原圖之上，然后隱藏原圖。

這個方法里面我主要用到了 getBoundingClientRect 這個方法，該方法返回元素的大小及其相對于視口的位置，完美滿足我的需要。

嗯，這一步做了什么呢？簡單的如下所示：

?

2、生成一張張是碎裂小圖

最后效果是圖片 boom 一下裂開，所以第二步要做的就是模擬出一小塊一小塊小圖，這里每一個小塊就是一個新的 div ，然后利用圖片的定位 background-position 將其定位到合適的位置，嘿，看看效果：

可以看到，這里分割成了很多個小塊，每個小塊其實是一個 div 然后，這些小塊被添加到我們上一步中設(shè)置的容器當(dāng)中，然后利用原圖設(shè)置 div 的背景圖，所有 div 利用的都是原圖一張背景圖，接著圖片定位就可以完成這樣一個效果，說起來很簡單，但是中間經(jīng)歷了很多計算，如何分割圖片，圖片的 width 與 height 比（是橫圖還是豎圖），每個小塊 div 的定位及小 div 背景圖的定位，具體的可以到這里看看:boomJS。

最后為了好看，設(shè)置了圓角，但是這樣爆炸的話，感覺不夠真實，圖片一塊一塊的清晰可辨。所以利用縮放 scale ，隨機(jī)讓每個小塊放大或者縮小，再看看縮放后的效果：

?

嗯，模糊了很多，效果近一步增強(qiáng)，這樣爆開來比較真實。

?

3、boom 爆炸！

嗯，到了雞凍人心的最后一步，要做的就是給每一個 div 小塊設(shè)置運動軌跡，然后同時爆開。

比較繁瑣，需要先算出圖片的中心點，然后每個 div 塊點以中心為基準(zhǔn)點向外做直線運動，不得不說，做這個我還特意惡補(bǔ)了一下高中的幾何知識（囧）。為了效果更加真實，每個 div 塊運動的直線距離添加一個正負(fù)值恰當(dāng)?shù)碾S機(jī)數(shù)，那么就可以達(dá)到有的塊炸的比較遠(yuǎn)，有的塊炸的比較近。利用未縮放的小塊圖片做一下大概的示意圖：

?

最后在炸裂的瞬間，讓每個小塊漸變消失，就可以完成上面 gif 所示的效果了。

?

總結(jié)一下，其實過程當(dāng)中還有很多細(xì)節(jié)沒有提及，比較重要的是動畫觸發(fā)的時序控制，因為最近在研讀 jQuery 源碼，就簡單的利用了 jQuery 的隊列來實現(xiàn)控制時序。

提到了就安利一下，我在 github 上關(guān)于 jQuery 源碼的全文注解，感興趣的可以圍觀一下。jQuery v1.10.2 源碼注解。

然后本文沒有貼代碼，這個動畫效果完整的代碼在我的 github 上，有興趣也可以圍觀一下：boomJS?。

本文較短，如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。

如果本文對你有幫助，請點下推薦，寫文章不容易。

?

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的【BOOM】一款有趣的Javascript动画效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。