不過覺得這個(gè)爆炸效果還是偏軟了一點(diǎn)，沒有爆炸那種碎片飛濺的感覺，一直念念不忘想要自己做一個(gè)3D效果的爆炸動效。這兩天在搞一些小動畫，就順便也把3D爆炸做了出來，動畫效果：

實(shí)現(xiàn)

原理很簡單，就是用很多小圖片拼湊成大圖片，然后讓小圖片按照一定規(guī)律運(yùn)動形成爆炸效果。這里的爆炸效果用的是 CSS3 的 3D 變換來做的，通過 js 動態(tài)改變變換參數(shù)形成動畫。實(shí)現(xiàn)步驟簡單說說：

1、圖片拼湊

這一步相對簡單，用的是很多 div 標(biāo)簽的背景圖拼湊的，設(shè)置好每個(gè) div 標(biāo)簽的 position 和 background-position 就可以了。這里要注意的一點(diǎn)就是添加 div 標(biāo)簽是記得要用 innerHTML 一次性全部添加進(jìn)去。雖然這里沒有直接顯示圖片，但是這里還是 new 了一個(gè) image，并將圖片拼湊放在 load 事件中執(zhí)行。效果和代碼分別如下(實(shí)際效果沒格子線的)：

var img = new Image();
img.src = 'img/zoro.jpg'; //160*160，or you need to change wrapper's size
img.onload = function () {
 var x = y = 0,
 div = styleCtn = '',
 imgWidth = this.width,
 imgHeight = this.height,
 pwidth = pheight = 10,
 nx = Math.floor(imgWidth / pwidth), //x方向粒子個(gè)數(shù)
 ny = Math.floor(imgHeight / pheight), //y方向粒子個(gè)數(shù)
 wrap = document.getElementById('zd-wrap');
 
 for (var i = 0, num = nx * ny; i < num; i++) {
 x = (i % nx) * pwidth;
 y = Math.floor(i / ny) * 10;
 styleCtn = 'left: ' + x + 'px; top: ' + y + 'px; background-position: ' + (-x) + 'px ' + (-y) + 'px;';
 div = div + 'this.src + '); ' + styleCtn + '">';
 }
 wrap.innerHTML = div; //添加圖片
};

2、爆炸效果

這一步相對難了許多，因?yàn)槎际侨S的運(yùn)動，分為平移和翻轉(zhuǎn)兩種運(yùn)動會簡單一點(diǎn)。

a）平移運(yùn)動：在立體空間中的爆炸應(yīng)該是這樣的：

回到平面空間應(yīng)該是這樣的：

從上圖可以總結(jié)出小塊的運(yùn)動方向，根據(jù)小塊所處的位置運(yùn)動方向是不同的，左上角向左上角飛去，右下角向右下角飛去這樣。這里應(yīng)該有一部分小塊向屏幕飛來，還有一部分遠(yuǎn)離屏幕以突出撲面而來的感覺。編程中表現(xiàn)各軸運(yùn)動的是 translate3d，這里注意屏幕和圖片的坐標(biāo)關(guān)系，屏幕的 Y 軸就是現(xiàn)實(shí)中的垂直方向、向下為正，Z軸就是面向用戶方向。運(yùn)動總結(jié)起來就是：

左上角：vx < 0, vy < 0, vz隨機(jī)

左下角：vx < 0, vy > 0, vz隨機(jī)

右上角：vx > 0, vy < 0, vz隨機(jī)

右下角：vx > 0, vy > 0, vz隨機(jī)

這里 Y 方向沒有嚴(yán)格對半分，有一種整體向上的感覺。加速度的話模仿需要模仿重力： vxa = 0, vya = 0.5 (模仿重力)，vza可以適當(dāng)加點(diǎn)，能加強(qiáng)撲面而來的感覺。

b）翻轉(zhuǎn)運(yùn)動

翻轉(zhuǎn)效果，就是 X 軸的旋轉(zhuǎn)，為了效果更加逼真需要引入 Y 軸的旋轉(zhuǎn)，可以忽略 z 軸的旋轉(zhuǎn)。因?yàn)榱Ｗ有K的尺寸很小，所以這里不需要嚴(yán)格控制旋轉(zhuǎn)參數(shù)，一方面簡化模型，另一方面減輕瀏覽器負(fù)荷。當(dāng)然也不必引入旋轉(zhuǎn)變量了，直接用 x、y 的坐標(biāo)代入也可以得到不錯(cuò)的翻轉(zhuǎn)效果: rotateX(xdeg) rotateY(ydeg)，我這里引用了 Zachstronaut 的算法：

rotateX: Math.cos(0.1 *ys) + 'rad
rotateY: Math.sin(0.1 * xs) + 'rad

最后設(shè)置終止條件，可以根據(jù) 粒子小塊的x、y 坐標(biāo)判斷是否應(yīng)該讓其退出動畫循環(huán)。

這樣就實(shí)現(xiàn)了動畫，當(dāng)然還必須要開啟父對象的透視屬性，大概設(shè)置透視距離 300px 左右就可以了。

后話

我使用的圖片尺寸為160*160，粒子尺寸為10*10，在iOS中表現(xiàn)優(yōu)秀，移動chrome中表現(xiàn)的也還不錯(cuò)。雖然已經(jīng)調(diào)用了 GPU 加速渲染，但已經(jīng)到了很多國產(chǎn)移動瀏覽器的上限了，所以不建議再增加粒子數(shù)量。性能提升也做了，但是沒找到好的突破點(diǎn)，如果你有更好的點(diǎn)子，請聯(lián)系我！

耗時(shí)測試：

可以看到瓶頸在 Painting 上，再細(xì)分的話主要是圖層重組，接著看一下動畫過程：

可以看到在最開始的時(shí)候出現(xiàn)了密密麻麻的綠框，也就是這里發(fā)生了大量的 paint flashing（重繪）。再看我們一開始拼湊背景圖的方法，用的是絕對定位+ left + top，這里會導(dǎo)致大量的重繪。雖然你可以在最開始用一個(gè) translate3d(0, 0, 0)來限定渲染層讓綠框消失，但并不會有多大的效果，因?yàn)橹饕臅r(shí)的是圖層合成，并不是繪制。分層是必須的，我也嘗試過使用 translate 去代替 left + top，但是效果并不理想，暫時(shí)沒有想到更好的辦法改善渲染性能……

DOM操作方面倒是可以再改善，現(xiàn)在動效的代碼是：

 this.nodes[i].style[this.transformProperty] = 'translate3d(' + this.xs[i] + 'px, ' + this.ys[i] + 'px, ' + this.zs[i] + 'px) rotateX(' + Math.cos(0.1 * this.ys[i]) + 'rad) rotateY(' + Math.sin(0.1 * this.xs[i]) + 'rad)';

循環(huán)中每次都會操作dom，而且在設(shè)置style上還是用屬性查找的方式，那這里應(yīng)該是可以改善的。一是重寫style，避免查找屬性。二就是重寫父對象div里面的innerHTML，就像開頭設(shè)置背景圖一樣，一次更新所有粒子塊。

不過我在步進(jìn)調(diào)試的時(shí)候發(fā)現(xiàn)，除了第一次執(zhí)行時(shí)會一個(gè)一個(gè)地設(shè)置粒子塊的屬性，后面的動畫循環(huán)中都已經(jīng)被瀏覽器優(yōu)化成整體重寫了，每次更新都是全體更新的，所以上面的方法貌似也不能提升太多。真的沒想到其他優(yōu)化的辦法了，如果你有點(diǎn)子，請聯(lián)系我！

如何使用

源碼已經(jīng)放到GitHub（bomb.js）上面去了，有興趣的同學(xué)可以fork來看看，求星星！

我已經(jīng)將 js+HTML+CSS 都封裝好了，設(shè)置好容器之后直接引用bomb.js就可以了，如下：

就寫到這了，碼字不易，隨手點(diǎn)贊哈~~~

參考資料：

1) 【BOOM】一款有趣的Javascript動畫效果

2) 前端性能優(yōu)化（CSS動畫篇）

3) http://www.zachstronaut.com/

（圖片出處：小周）

原創(chuàng)文章，轉(zhuǎn)載請注明出處！http://www.cnblogs.com/qieguo/p/5491192.html

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com