大傢好，我是秋風，近日，微信又發佈瞭新功能（更新到微信8.0.6）。最火熱的非"炸屎"功能莫屬瞭，各種群裡紛紛玩起瞭炸屎的功能。
不知道大傢是否經歷過那樣一個時候，小時候過年也會看到鄰傢小孩幹這種惡趣味，沒想到微信給它做成瞭一個線上版本。這個功能發明，連創造產品的本人也進行瞭調侃。但是能做一個功能讓全民玩的開心，也不枉產品的出現的意義瞭。
之前在微信8.0 更新的時候，我也寫過一篇《教你實現微信8.0『炸裂』的禮花表情特效》。之前一篇文章中我是用 canvas 來實現的，上次在文章末有人評論，可以通過 lottie 來實現相似的功能，其實我對這個還是挺感興趣的，但是一直沒有嘗試，這一次我就想通過新的方式 lottie 來實現一下這功能。
效果體驗:
https://example.qiufeng.blue/wechat-feces/3-2-feces.html
Github地址：
https://github.com/hua1995116/node-demo/tree/master/wechat-feces
步驟拆解
任何一個物體都是由更微小的物體構成，因此我們想要實現以上功能，自然也得一步一步地來。我大致將以上功能拆解成瞭以下四個步驟。裡面的每一個都不會太難，可以說前端小白也能輕松實現。
1.丟炸彈
這一步，我們可以用二次函數的知識，來寫一個軌跡路徑（類似 y = $x^2$ ），然後通過tween.js來做補間動畫。
2.炸彈爆炸
利用lottie 來實現動畫。
3.粑粑被炸開
利用 css 動畫實現
4.所有人震動
利用 css 動畫實現
總結
以上我們大致想說的思路，也許你看思路就對其中一些的實現已經輕車熟路，那你可以跳過一部分。有瞭上面的思路後，那我們就真刀真槍開始實踐啦。
具體實現
1.丟炸彈
我們通過仔細觀察其實可以看到，炸彈的運動軌跡其實就是一個拋物線。我們想要實現這個功能，很容易地就可以聯想到二次函數。
首先我們先來看看二次函數的定義。
從圖像上來表達就是這樣的。
很顯然這和我們想要的軌跡非常的相似。
因為正常的笛卡爾坐標系都是以豎直向上為 y 正軸，橫向向右為 x 正軸。而對於 dom 定位而言，左上方為 （0，0）橫向向右為 x 正軸，豎直向下為 y 正軸。隻不過將坐標系沿著 x 軸進行瞭一個翻轉。
因此我們隻要確定一個二次函數，我們就能得到軌跡。由於二次函數的通項有3個未知數，因此，我們隻需要知道3個點就能確定一個二次函數。我們先假定我們的二次函數是這樣的。
我們的3個點分別為 (0,H)，(H,0)，(3H, 3H) 我們通過代入通項可以得出以下公式：
然後解出
得到：
因此，我們隻需要得到這個炸彈最高點距離"屎"的高度，就能畫出整個軌跡。
現在假設我們的炸彈是一個 10px * 10px 的小方塊，設置起始點為（300，300）終點為 （0，100） H=100，此時我們得到的二次函數為：
我們就能得到以下軌跡動畫：
而渲染每一幀動畫，我們則用瞭著名的補間動畫庫Tween.js 補間(動畫)是一個概念，允許你以平滑的方式更改對象的屬性。你隻需告訴它哪些屬性要更改，當補間結束運行時它們應該具有哪些最終值，以及這需要多長時間，補間引擎將負責計算從起始點到結束點的值。
var coords = { x: 300 }; // 起始點 為 x = 300
var tween = new TWEEN.Tween(coords)
.to({ x: 0 }, 1000) // 終點為 x = 0, 並且這個動作將在1秒內完成
.easing(TWEEN.Easing.Linear.None) // 勻速
