建站
咨詢
售后
建站咨詢
新聞中心
實(shí)踐出真知，有的時(shí)候看到一些有趣的現(xiàn)象就想著用自己所學(xué)的知識(shí)復(fù)現(xiàn)一下。
成都網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、成都網(wǎng)站建設(shè)公司、微信開發(fā)、微信小程序開發(fā)、集團(tuán)成都定制網(wǎng)站等服務(wù)項(xiàng)目。核心團(tuán)隊(duì)均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗(yàn)，服務(wù)眾多知名企業(yè)客戶；涵蓋的客戶類型包括：成都PVC花箱等眾多領(lǐng)域，積累了大量豐富的經(jīng)驗(yàn)，同時(shí)也獲得了客戶的一致贊賞！
緣起
前幾天在 github 上看到同事的一個(gè)這樣的小項(xiàng)目，在 IOS 上實(shí)現(xiàn)了這樣一個(gè)小動(dòng)畫效果，看上去蠻炫的，效果圖：
我就尋思著，在瀏覽器環(huán)境下，用 Javascript 怎么實(shí)現(xiàn)呢?
在濃烈的好奇心驅(qū)使下，最終利用 Javascript 和 CSS3 完成了模仿上面的效果，通過調(diào)用方法，可以將頁面上的圖片一鍵爆炸，我給它起了個(gè) boomJS 的名字，貼張效果圖：
實(shí)現(xiàn)
我感覺效果還是可以的，因?yàn)闆]有使用 canvas ，所以無法取到圖片上每個(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 一下裂開，所以第二步要做的就是模擬出一小塊一小塊小圖，這里每一個(gè)小塊就是一個(gè)新的 div ，然后利用圖片的定位 background-position 將其定位到合適的位置，嘿，看看效果：
可以看到，這里分割成了很多個(gè)小塊，每個(gè)小塊其實(shí)是一個(gè) div 然后，這些小塊被添加到我們上一步中設(shè)置的容器當(dāng)中，然后利用原圖設(shè)置 div 的背景圖，所有 div 利用的都是原圖一張背景圖，接著圖片定位就可以完成這樣一個(gè)效果，說起來很簡(jiǎn)單，但是中間經(jīng)歷了很多計(jì)算，如何分割圖片，圖片的 width 與 height 比(是橫圖還是豎圖)，每個(gè)小塊 div 的定位及小 div 背景圖的定位，具體的可以到這里看看:boomJS。
***為了好看，設(shè)置了圓角，但是這樣爆炸的話，感覺不夠真實(shí)，圖片一塊一塊的清晰可辨。所以利用縮放 scale ，隨機(jī)讓每個(gè)小塊放大或者縮小，再看看縮放后的效果：
嗯，模糊了很多，效果近一步增強(qiáng)，這樣爆開來比較真實(shí)。
3、boom 爆炸!
嗯，到了雞凍人心的***一步，要做的就是給每一個(gè) div 小塊設(shè)置運(yùn)動(dòng)軌跡，然后同時(shí)爆開。
過程比較繁瑣，需要先算出圖片的中心點(diǎn)，然后每個(gè) div 塊點(diǎn)以中心為基準(zhǔn)點(diǎn)向外做直線運(yùn)動(dòng)，不得不說，做這個(gè)我還特意惡補(bǔ)了一下高中的幾何知識(shí)(囧)。為了效果更加真實(shí)，每個(gè) div 塊運(yùn)動(dòng)的直線距離添加一個(gè)正負(fù)值恰當(dāng)?shù)碾S機(jī)數(shù)，那么就可以達(dá)到有的塊炸的比較遠(yuǎn)，有的塊炸的比較近。利用未縮放的小塊圖片做一下大概的示意圖：
***在炸裂的瞬間，讓每個(gè)小塊漸變消失，就可以完成上面 Gif 所示的效果了。
總結(jié)一下，其實(shí)過程當(dāng)中還有很多細(xì)節(jié)沒有提及，比較重要的是動(dòng)畫觸發(fā)的時(shí)序控制，因?yàn)樽罱谘凶x jQuery 源碼，就簡(jiǎn)單的利用了 jQuery 的隊(duì)列來實(shí)現(xiàn)控制時(shí)序。
提到了就安利一下，我在 github 上關(guān)于 jQuery 源碼的全文注解，感興趣的可以圍觀一下。jQuery v1.10.2 源碼注解。
然后本文沒有貼代碼，這個(gè)動(dòng)畫效果完整的代碼在我的 github 上，有興趣也可以圍觀一下：boomJSmJS
本文較短，如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。
當(dāng)前題目：BOOM：一款有趣的Javascript動(dòng)畫效果
當(dāng)前網(wǎng)址：http://fisionsoft.com.cn/article/dhishoc.html
