大傢好，我是秋風，近日，微信又發佈瞭新功能（更新到微信8.0.6）。最火熱的非"炸屎"功能莫屬瞭，各種群裡紛紛玩起瞭炸屎的功能。

不知道大傢是否經歷過那樣一個時候，小時候過年也會看到鄰傢小孩幹這種惡趣味，沒想到微信給它做成瞭一個線上版本。這個功能發明，連創造產品的本人也進行瞭調侃。但是能做一個功能讓全民玩的開心，也不枉產品的出現的意義瞭。

之前在微信8.0 更新的時候，我也寫過一篇《教你實現微信8.0『炸裂』的禮花表情特效》。之前一篇文章中我是用 canvas 來實現的，上次在文章末有人評論，可以通過 lottie 來實現相似的功能，其實我對這個還是挺感興趣的，但是一直沒有嘗試，這一次我就想通過新的方式 lottie 來實現一下這功能。

效果體驗:

http://example.qiufeng.blue/wechat-feces/3-2-feces.html

Github地址：

http://github.com/hua1995116/node-demo/tree/master/wechat-feces

步驟拆解

任何一個物體都是由更微小的物體構成，因此我們想要實現以上功能，自然也得一步一步地來。我大致將以上功能拆解成瞭以下四個步驟。裡面的每一個都不會太難，可以說前端小白也能輕松實現。

1.丟炸彈

這一步，我們可以用二次函數的知識，來寫一個軌跡路徑（類似 y = $x^2$ ），然後通過tween.js來做補間動畫。

2.炸彈爆炸

利用lottie 來實現動畫。

3.粑粑被炸開

利用 css 動畫實現

4.所有人震動

利用 css 動畫實現

總結

以上我們大致想說的思路，也許你看思路就對其中一些的實現已經輕車熟路，那你可以跳過一部分。有瞭上面的思路後，那我們就真刀真槍開始實踐啦。

具體實現

1.丟炸彈

我們通過仔細觀察其實可以看到，炸彈的運動軌跡其實就是一個拋物線。我們想要實現這個功能，很容易地就可以聯想到二次函數。

首先我們先來看看二次函數的定義。

從圖像上來表達就是這樣的。

40e5146e285829e0683744aac507fb45

很顯然這和我們想要的軌跡非常的相似。

因為正常的笛卡爾坐標系都是以豎直向上為 y 正軸，橫向向右為 x 正軸。而對於 dom 定位而言，左上方為 （0，0）橫向向右為 x 正軸，豎直向下為 y 正軸。隻不過將坐標系沿著 x 軸進行瞭一個翻轉。

因此我們隻要確定一個二次函數，我們就能得到軌跡。由於二次函數的通項有3個未知數，因此，我們隻需要知道3個點就能確定一個二次函數。我們先假定我們的二次函數是這樣的。

我們的3個點分別為 (0,H)，(H,0)，(3H, 3H) 我們通過代入通項可以得出以下公式：

4bfc58b9b652fad1afe3d5f1756c4e48

然後解出

得到：

2a54b1c076a8bfbc7075032ed15070bf

因此，我們隻需要得到這個炸彈最高點距離"屎"的高度，就能畫出整個軌跡。

現在假設我們的炸彈是一個 10px * 10px 的小方塊，設置起始點為（300，300）終點為 （0，100） H=100，此時我們得到的二次函數為：

我們就能得到以下軌跡動畫：

而渲染每一幀動畫，我們則用瞭著名的補間動畫庫Tween.js 補間(動畫)是一個概念，允許你以平滑的方式更改對象的屬性。你隻需告訴它哪些屬性要更改，當補間結束運行時它們應該具有哪些最終值，以及這需要多長時間，補間引擎將負責計算從起始點到結束點的值。