10分鐘用JS實現微信 "炸屎"大作戰

藍色的秋風發表於2021-06-11
JS

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

8gr3b-uxuyu

不知道大家是否經歷過那樣一個時候，小時候（我是說很小的時候，在我還在上小學的時候）過年也嘗試過這種惡趣味，沒想到微信給它做成了一個線上版本。這個功能發明，連創造產品的本人也進行了調侃。但是能做一個功能讓全民玩的開心，也不枉產品的出現的意義了。

image-20210531112349301

之前在微信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.丟炸彈

image-20210531230319313

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

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

一般地，把形如y=ax²+bx+c（a≠0）（a、b、c是常數）的函式叫做二次函式。

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

image-20210531230619104

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

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

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

image-20210531233814669

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

image-20210531234322414

然後解出

1622476435264-1

得到：

1622477842575

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

image-20210531235633501

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

1622477784304

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

2021-06-01-00.27.29

而渲染每一幀動畫，我們則用了著名的補間動畫庫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)	// 勻速

通過以上定義，我們就可以在 onUpdate 中，拿到每次變化的x值，然後通過上面二次函式得到 y，然後對小方塊進行更新。

tween.onUpdate(function() {
    var x = coords.x;
    var y = 1/120 * x * x - 11/6 * x + 100;
		box.style.setProperty('transform', 'translate(' + x + 'px, ' + y + 'px)');
})

此時我們完成的效果還是缺了點東西，就像畫畫一樣，我們只給他畫了骨骼，我們需要給它包裝上色，接下來我們只需要做以下兩件事，然後就能看到效果啦~

1.將方塊換成炸彈然，炸彈的形狀很簡單，我們可以通過 ps 將它從圖層中摳出來。

2.修改它運動時候的角度。

2021-06-01-23.19.17

本節完整程式碼：https://github.com/hua1995116/node-demo/blob/master/wechat-feces/1-2-animation.html

2.炸彈爆炸

然後再談談炸彈爆炸的效果，上面也說了，想換成lottie 來寫動畫，那麼lottie 是什麼呢？

Lottie是一個庫，可以解析使用AE製作的動畫（需要用bodymovin匯出為json格式），支援web、ios、android和react native。在web側，lottie-web庫可以解析匯出的動畫json檔案，並將其以svg或者canvas的方式將動畫繪製到我們頁面中。

然後我去 https://lottiefiles.com/ 找了一個json爆炸的特效檔案。

2021-06-01-23.29.33

而它的寫法非常簡單，只需要引入 lottie ，然後呼叫 bodymovin.loadAnimation 方法。

<script src="https://cdn.bootcdn.net/ajax/libs/lottie-web/5.7.8/lottie.min.js"></script>
</head>
<body>
<div class="bodymovin"></div>
<script>
    const animation = window.bodymovin.loadAnimation({
        container: document.querySelector('.bodymovin'), // 要包含該動畫的dom元素
        renderer: 'svg', // 渲染方式，svg、canvas、html（輕量版僅svg渲染）
        loop: true, // 是否迴圈播放
        autoplay: true, // 是否自動播放
        path: './bomb.json', // 動畫json檔案路徑
    });
</script>

因此我們只需要在拋物線完成後再立即呼叫爆炸特效，而tween.js 也給我提供了事件方法onComplete。我們只需要在onComplete回撥中，讓爆炸動畫開始。

tween.onComplete(function () {
  // 寫爆炸動畫
})

2021-06-02-01.53.54

image-20210602013807913

本節完整程式碼： https://github.com/hua1995116/node-demo/blob/master/wechat-feces/2-2-lottie.html

3.粑粑被炸開

3.1形狀

同理炸彈用 PS 摳圖把 "粑粑" 摳出一個透明的圖層，就想這樣。（稍微有點毛刺沒關係，實際的粑粑也沒這麼大, 所以不太容易看到毛刺，也可以通過微調給他修復）

feces

.feces {
  position: absolute;
  background-image: url(./feces.png);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 80px;
  height: 80px;
  transform-origin: center;
}

// 建立一個粑粑元素
function createfeces(scale = 1) {
  const fece = document.createElement('div');
  fece.className = 'feces';
  // 由於粑粑有大有小，有方向，因此預留了值。
  const symbol = Math.random() > 0.5 ? 1 : -1;
  fece.style.transform = `scale(${scale * 1.1}) rotate(${symbol * 20 * Math.random()}deg)`
  return fece;
}

3.2位置

image-20210602221656176

我們可以看到粑粑是從炸裂的地方飛出來的，飛出來主要是7個粑粑，其中中間的最大，其他的隨著離中心粑粑越遠而越小，排列的方式是類似於一個圓，但是又不是那麼規律。

因此我們可以先通過最簡單的方式來實現，就是以一個圓形環繞。一個圓是 360 °，我們只需要給它平均分成6等分就好。我們環繞的一共是6個粑粑，因此，每個之間是60°。

由於我們上面的炸彈是大致是一個 300 * 300的區域，因此我將中心的座標定為(150,150)，然後隨機生成一個 70 ~ 230 的x點，就能算出 y 值，在確定第一個點後，根據每個點之間的角度是 60°，就能計算出其餘的5個點。

image-20210603002233233

由於用中心點為 (150,150) 為圓心計算比較麻煩，因此我將中心點移到了(0, 0)進行計算，最後再將所有計算出來的點都往 x 軸，y 軸平移 150。

// 計算要生成的多個粑粑的位置
// 傳入的引數num為要生成的粑粑的數量
function randomPosition(num) {
  const radius = 80; // 圓半徑
  const randomX = Math.random() * radius // 任取0到半徑中的任意一個x
  const y = Math.round(Math.sqrt(radius * radius - randomX * randomX)); // 確定一個第一象限在圓上的點
  const radian = Math.atan(y / randomX); // 這個點的弧度值

  const step = Math.PI * 2 / num; // 每坨屎間距的弧度值

  return new Array(num).fill(0).map((item, index) => {
    const r = (index * step + radian)
    // 將弧度為0 - 2 * PI
    const tr = r > Math.PI * 2 ? r - Math.PI * 2 : r < 0 ? r + Math.PI * 2 : r;
    return {
      x: radius * Math.sin(tr),
      y: radius * Math.cos(tr),
    }
  })
            
}

image-20210603002426209

然後我們按照這個思路進行繪製，繪製出 6 個粑粑，再向x軸和y軸分別平移150。

randomPosition(6).map(item => ({ x: item.x + 150, y: item.y + 150 })) // 此處你也定義多於6個

image-20210603002701496

貌似有點那味了，但是所有的都一樣大，因此我們需要處理一下，根據距離中心遠近來縮放大小，大致寫了一個，因為圓的半徑為80，每增加 80，就把粑粑的大小變成原來的 2/3。

const dis = Math.sqrt((end.x - 150) * (end.x - 150) + (end.y - 150) * (end.y - 150)); // 由於此時已經平移 150 ，因此需要計算距離中心點的距離
const r = Math.pow(2/3, dis / length); // 要縮放的比例

image-20210603002847549

然而真實場景中，我們擺放位置會更加隨機，因此我給每個粑粑的位置增加了一個隨機值，並且中心粑粑會更加偏向於左上角，也更加了一定的隨機值。

function randomPosition(num) {
...
return new Array(num).fill(0).map((item, index) => {
  const r = (index * step + radian)
  const tr = r > Math.PI * 2 ? r - Math.PI * 2 : r < 0 ? r + Math.PI * 2 : r;
  return {
    // 增加隨機值
    x: length * Math.sin(tr) + (Math.random() > 0.5 ? 1 : -1) * 10 * Math.random(),
    y: length * Math.cos(tr) + (Math.random() > 0.5 ? 1 : -1) * 10 * Math.random(),
  }
})
}

image-20210603003823351

3.3角度

最後們只需要點綴一下每個粑粑的角度就可以啦。

function createfeces(scale) {
  const fece = document.createElement('div');
  fece.className = 'feces';
  const symbol = Math.random() > 0.5 ? 1 : -1; // 生成 -20 ~ 20 之間的隨機角度
  fece.style.transform = `scale(${scale}) rotate(${symbol * 20 * Math.random()}deg)`
  fece.style.opacity = '0';
  return fece;
}

image-20210603004011365

3.4動畫

由於這裡和丟炸彈類似，我就不詳細展開講了。需要提一下的是，由於粑粑是先從炸彈位置出來，再緩緩下來，這裡我們需要利用兩次 Tween 補間動畫。

// 一開始的出現時候的動畫，從爆炸口衝出來
function initFece(end) {
	...
  const start = { x: 0, y: 100, z: 0 }; // 爆炸口
  const tween = new TWEEN.Tween(start)
  .to({ ...end, z: 1 }, 100)
  .easing(TWEEN.Easing.Linear.None)
  .onUpdate(function () {
    fece.style.setProperty('top', `${start.y}px`);
    fece.style.setProperty('left', `${start.x}px`);
    fece.style.setProperty('opacity', `${start.z}`);
  })
  .onComplete(function () {
    initDown(start, fece).start(); // 衝出完成，進行下落透明動畫
  })
  return tween;
}
// 下落同時變透明動畫
function initDown(start, fece) {
  const s = {
    y: start.y,
    o: 1,
  };
  const e = { y: start.y + 80, o: 0 };
  const tween = new TWEEN.Tween(s)
  .to(e, 2000 + 500 * Math.random())
  .easing(TWEEN.Easing.Quadratic.In)
  .onUpdate(function () {
    fece.style.setProperty('top', `${s.y}px`);
    fece.style.setProperty('opacity', `${s.o}`);
  })
  .onComplete(function () {
  })
  return tween;
}

最後效果

2021-06-03-01.18.57

本節完整程式碼：https://github.com/hua1995116/node-demo/blob/master/wechat-feces/3-2-feces.html

3.5總結

由於這一節比較長，總結一下知識

  • 先利用 1 = x² + y² 圓軌跡的特性，建立初步位置
  • 再通過加入隨機值，使得整個分佈稍微不那麼規則一些
  • 給粑粑新增隨機角度
  • 讓中心粑粑更趨向於爆炸口
  • 新增鏈式動畫出現和下落

4.所有人震動

這個功能只需要用簡單 css 動畫就能完成這裡就不再詳細講啦，有興趣的小夥伴可以實現一下放到評論裡~

結尾

本次純屬於一個對這個效果好奇的探索，不是100%還原動畫。本人也不是專門寫動畫的，上述庫也是第一次使用，寫的可能不那麼專業（有任何問題歡迎評論區指出錯誤）。但是希望能給大家提供一個好玩的思路，在做動畫的時候可以利用 lottie 和 tween 兩個庫，以及將複雜問題簡單化，把不規律的東西變成規律的東西，把複雜的東西變成簡單的，最後再一步步地去深化。同時感謝楠溪對本文的校對。

結語

** ❤️關注+點贊+收藏+評論+轉發❤️ **，原創不易，鼓勵筆者創作更好的文章

關注公眾號秋風的筆記，一個專注於前端面試、工程化、開源的前端公眾號

相關文章