如何實(shí)現(xiàn)Javascript的BOOM動(dòng)畫效果

如何實(shí)現(xiàn)Javascript的BOOM動(dòng)畫效果，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

緣起

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

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

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

實(shí)現(xiàn)

我感覺(jué)效果還是可以的，因?yàn)闆](méi)有使用 canvas  ，所以無(wú)法取到圖片上每個(gè)像素的顏色值。使用了一些比較討(sha)巧(bi)的方法，下面簡(jiǎn)單講講如何實(shí)現(xiàn)的：

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

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

這個(gè)方法里面我主要用到了 getBoundingClientRect 這個(gè)方法，該方法返回元素的大小及其相對(duì)于視口的位置，***滿足我的需要。

嗯，這一步做了什么呢?簡(jiǎn)單的如下所示：

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

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

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

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

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

3、boom 爆炸!

嗯，到了雞凍人心的***一步，要做的就是給每一個(gè) div 小塊設(shè)置運(yùn)動(dòng)軌跡，然后同時(shí)爆開(kāi)。

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

在炸裂的瞬間，讓每個(gè)小塊漸變消失，就可以完成上面 Gif 所示的效果了。

其實(shí)過(guò)程當(dāng)中還有很多細(xì)節(jié)沒(méi)有提及，比較重要的是動(dòng)畫觸發(fā)的時(shí)序控制，因?yàn)樽罱谘凶x jQuery 源碼，就簡(jiǎn)單的利用了 jQuery  的隊(duì)列來(lái)實(shí)現(xiàn)控制時(shí)序。

看完上述內(nèi)容，你們掌握如何實(shí)現(xiàn)Javascript的BOOM動(dòng)畫效果的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！