又來(lái)了！實(shí)現(xiàn)微信 “炸屎”大作戰(zhàn)
大家好，我是秋風(fēng)，近日，微信又發(fā)布了新功能（更新到微信8.0.6）。最火熱的非"炸屎"功能莫屬了，各種群里紛紛玩起了炸屎的功能。
不知道大家是否經(jīng)歷過(guò)那樣一個(gè)時(shí)候，小時(shí)候（我是說(shuō)很小的時(shí)候，在我還在上小學(xué)的時(shí)候）過(guò)年也曾看到過(guò)鄰家小孩嘗試過(guò)這種惡趣味，沒(méi)想到微信給它做成了一個(gè)線上版本。這個(gè)功能發(fā)明，連創(chuàng)造產(chǎn)品的本人也進(jìn)行了調(diào)侃。但是能做一個(gè)功能讓全民玩的開心，也不枉產(chǎn)品的出現(xiàn)的意義了。
之前在微信8.0 更新的時(shí)候，我也寫過(guò)一篇《教你實(shí)現(xiàn)微信8.0『炸裂』的禮花表情特效》。之前一篇文章中我是用 canvas 來(lái)實(shí)現(xiàn)的，上次在文章末有人評(píng)論，可以通過(guò) lottie 來(lái)實(shí)現(xiàn)相似的功能，其實(shí)我對(duì)這個(gè)還是挺感興趣的，但是一直沒(méi)有嘗試，這一次我就想通過(guò)新的方式 lottie 來(lái)實(shí)現(xiàn)一下這功能。
效果體驗(yàn):
https://example.qiufeng.blue/wechat-feces/3-2-feces.html
Github地址：
https://github.com/hua1995116/node-demo/tree/master/wechat-feces
步驟拆解
任何一個(gè)物體都是由更微小的物體構(gòu)成，因此我們想要實(shí)現(xiàn)以上功能，自然也得一步一步地來(lái)。我大致將以上功能拆解成了以下四個(gè)步驟。里面的每一個(gè)都不會(huì)太難，可以說(shuō)前端小白也能輕松實(shí)現(xiàn)。
1.丟炸彈
這一步，我們可以用二次函數(shù)的知識(shí)，來(lái)寫一個(gè)軌跡路徑（類似 y = ），然后通過(guò)tween.js來(lái)做補(bǔ)間動(dòng)畫。
2.炸彈爆炸
利用lottie 來(lái)實(shí)現(xiàn)動(dòng)畫。
3.粑粑被炸開
利用 css 動(dòng)畫實(shí)現(xiàn)
4.所有人震動(dòng)
利用 css 動(dòng)畫實(shí)現(xiàn)
總結(jié)
以上我們大致想說(shuō)的思路，也許你看思路就對(duì)其中一些的實(shí)現(xiàn)已經(jīng)輕車熟路，那你可以跳過(guò)一部分。有了上面的思路后，那我們就真刀真槍開始實(shí)踐啦。
具體實(shí)現(xiàn)
1.丟炸彈
我們通過(guò)仔細(xì)觀察其實(shí)可以看到，炸彈的運(yùn)動(dòng)軌跡其實(shí)就是一個(gè)拋物線。我們想要實(shí)現(xiàn)這個(gè)功能，很容易地就可以聯(lián)想到二次函數(shù)。
首先我們先來(lái)看看二次函數(shù)的定義。
一般地，把形如y=ax2+bx+c（a≠0）（a、b、c是常數(shù)）的函數(shù)叫做二次函數(shù)。
從圖像上來(lái)表達(dá)就是這樣的。
很顯然這和我們想要的軌跡非常的相似。
因?yàn)檎５牡芽栕鴺?biāo)系都是以豎直向上為 y 正軸，橫向向右為 x 正軸。而對(duì)于 dom 定位而言，左上方為 （0，0）橫向向右為 x 正軸，豎直向下為 y 正軸。只不過(guò)將坐標(biāo)系沿著 x 軸進(jìn)行了一個(gè)翻轉(zhuǎn)。
因此我們只要確定一個(gè)二次函數(shù)，我們就能得到軌跡。由于二次函數(shù)的通項(xiàng)有3個(gè)未知數(shù)，因此，我們只需要知道3個(gè)點(diǎn)就能確定一個(gè)二次函數(shù)。我們先假定我們的二次函數(shù)是這樣的。
我們的3個(gè)點(diǎn)分別為 (0,H)，(H,0)，(3H, 3H) 我們通過(guò)代入通項(xiàng)可以得出以下公式：
然后解出
得到：
因此，我們只需要得到這個(gè)炸彈最高點(diǎn)距離"屎"的高度，就能畫出整個(gè)軌跡。
現(xiàn)在假設(shè)我們的炸彈是一個(gè) 10px * 10px 的小方塊，設(shè)置起始點(diǎn)為（300，300）終點(diǎn)為 （0，100） H=100，此時(shí)我們得到的二次函數(shù)為：
我們就能得到以下軌跡動(dòng)畫：
而渲染每一幀動(dòng)畫，我們則用了著名的補(bǔ)間動(dòng)畫庫(kù)Tween.js 補(bǔ)間(動(dòng)畫)是一個(gè)概念，允許你以平滑的方式更改對(duì)象的屬性。你只需告訴它哪些屬性要更改，當(dāng)補(bǔ)間結(jié)束運(yùn)行時(shí)它們應(yīng)該具有哪些最終值，以及這需要多長(zhǎng)時(shí)間，補(bǔ)間引擎將負(fù)責(zé)計(jì)算從起始點(diǎn)到結(jié)束點(diǎn)的值。
var coords = { x: 300 }; // 起始點(diǎn) 為 x = 300
var tween = new TWEEN.Tween(coords)
.to({ x: 0 }, 1000) // 終點(diǎn)為 x = 0, 并且這個(gè)動(dòng)作將在1秒內(nèi)完成
.easing(TWEEN.Easing.Linear.None) // 勻速
通過(guò)以上定義，我們就可以在 onUpdate 中，拿到每次變化的x值，然后通過(guò)上面二次函數(shù)得到 y，然后對(duì)小方塊進(jìn)行更新。
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)');
})
此時(shí)我們完成的效果還是缺了點(diǎn)東西，就像畫畫一樣，我們只給他畫了骨骼，我們需要給它包裝上色，接下來(lái)我們只需要做以下兩件事，然后就能看到效果啦~
1.將方塊換成炸彈然，炸彈的形狀很簡(jiǎn)單，我們可以通過(guò) ps 將它從圖層中摳出來(lái)。
2.修改它運(yùn)動(dòng)時(shí)候的角度。
本節(jié)完整代碼：https://github.com/hua1995116/node-demo/blob/master/wechat-feces/1-2-animation.html
2.炸彈爆炸
然后再談?wù)務(wù)◤棻ǖ男Ч?，上面也說(shuō)了，想換成lottie 來(lái)寫動(dòng)畫，那么lottie 是什么呢？
Lottie是一個(gè)庫(kù)，可以解析使用AE制作的動(dòng)畫（需要用bodymovin導(dǎo)出為json格式），支持web、ios、android和react native。在web側(cè)，lottie-web庫(kù)可以解析導(dǎo)出的動(dòng)畫json文件，并將其以svg或者canvas的方式將動(dòng)畫繪制到我們頁(yè)面中。
然后我去 https://lottiefiles.com/ 找了一個(gè)json爆炸的特效文件。
而它的寫法非常簡(jiǎn)單，只需要引入 lottie，然后調(diào)用 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'), // 要包含該動(dòng)畫的dom元素
renderer: 'svg', // 渲染方式，svg、canvas、html（輕量版僅svg渲染）
loop: true, // 是否循環(huán)播放
autoplay: true, // 是否自動(dòng)播放
path: './bomb.json', // 動(dòng)畫json文件路徑
});
</script>
因此我們只需要在拋物線完成后再立即調(diào)用爆炸特效，而tween.js 也給我提供了事件方法onComplete。我們只需要在onComplete回調(diào)中，讓爆炸動(dòng)畫開始。
tween.onComplete(function () {
// 寫爆炸動(dòng)畫
})
本節(jié)完整代碼：https://github.com/hua1995116/node-demo/blob/master/wechat-feces/2-2-lottie.html
3.粑粑被炸開
3.1形狀
同理炸彈用 PS 摳圖把 "粑粑" 摳出一個(gè)透明的圖層，就想這樣。（稍微有點(diǎn)毛刺沒(méi)關(guān)系，實(shí)際的粑粑也沒(méi)這么大, 所以不太容易看到毛刺，也可以通過(guò)微調(diào)給他修復(fù)）
.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;
}
// 創(chuàng)建一個(gè)粑粑元素
function createfeces(scale = 1) {
const fece = document.createElement('div');
fece.className = 'feces';
// 由于粑粑有大有小，有方向，因此預(yù)留了值。
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位置
我們可以看到粑粑是從炸裂的地方飛出來(lái)的，飛出來(lái)主要是7個(gè)粑粑，其中中間的最大，其他的隨著離中心粑粑越遠(yuǎn)而越小，排列的方式是類似于一個(gè)圓，但是又不是那么規(guī)律。
因此我們可以先通過(guò)最簡(jiǎn)單的方式來(lái)實(shí)現(xiàn)，就是以一個(gè)圓形環(huán)繞。一個(gè)圓是 360 °，我們只需要給它平均分成6等分就好。我們環(huán)繞的一共是6個(gè)粑粑，因此，每個(gè)之間是60°。
由于我們上面的炸彈是大致是一個(gè) 300 * 300的區(qū)域，因此我將中心的坐標(biāo)定為(150,150)，然后隨機(jī)生成一個(gè) 70 ~ 230 的x點(diǎn)，就能算出 y 值，在確定第一個(gè)點(diǎn)后，根據(jù)每個(gè)點(diǎn)之間的角度是 60°，就能計(jì)算出其余的5個(gè)點(diǎn)。
由于用中心點(diǎn)為 (150,150) 為圓心計(jì)算比較麻煩，因此我將中心點(diǎn)移到了(0, 0)進(jìn)行計(jì)算，最后再將所有計(jì)算出來(lái)的點(diǎn)都往 x 軸，y 軸平移 150。
// 計(jì)算要生成的多個(gè)粑粑的位置
// 傳入的參數(shù)num為要生成的粑粑的數(shù)量
function randomPosition(num) {
const radius = 80; // 圓半徑
const randomX = Math.random() * radius // 任取0到半徑中的任意一個(gè)x
const y = Math.round(Math.sqrt(radius * radius - randomX * randomX)); // 確定一個(gè)第一象限在圓上的點(diǎn)
const radian = Math.atan(y / randomX); // 這個(gè)點(diǎn)的弧度值
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),
}
})
}
然后我們按照這個(gè)思路進(jìn)行繪制，繪制出 6 個(gè)粑粑，再向x軸和y軸分別平移150。
randomPosition(6).map(item => ({ x: item.x + 150, y: item.y + 150 })) // 此處你也定義多于6個(gè)
貌似有點(diǎn)那味了，但是所有的都一樣大，因此我們需要處理一下，根據(jù)距離中心遠(yuǎn)近來(lái)縮放大小，大致寫了一個(gè)，因?yàn)閳A的半徑為80，每增加 80，就把粑粑的大小變成原來(lái)的 2/3。
const dis = Math.sqrt((end.x - 150) * (end.x - 150) + (end.y - 150) * (end.y - 150)); // 由于此時(shí)已經(jīng)平移 150 ，因此需要計(jì)算距離中心點(diǎn)的距離
const r = Math.pow(2/3, dis / length); // 要縮放的比例
然而真實(shí)場(chǎng)景中，我們擺放位置會(huì)更加隨機(jī)，因此我給每個(gè)粑粑的位置增加了一個(gè)隨機(jī)值，并且中心粑粑會(huì)更加偏向于左上角，也更加了一定的隨機(jī)值。
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 {
// 增加隨機(jī)值
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(),
}
})
}
3.3角度
最后們只需要點(diǎn)綴一下每個(gè)粑粑的角度就可以啦。
function createfeces(scale) {
const fece = document.createElement('div');
fece.className = 'feces';
const symbol = Math.random() > 0.5 ? 1 : -1; // 生成 -20 ~ 20 之間的隨機(jī)角度
fece.style.transform = `scale(${scale}) rotate(${symbol * 20 * Math.random()}deg)`
fece.style.opacity = '0';
return fece;
}
3.4動(dòng)畫
由于這里和丟炸彈類似，我就不詳細(xì)展開講了。需要提一下的是，由于粑粑是先從炸彈位置出來(lái)，再緩緩下來(lái)，這里我們需要利用兩次 Tween 補(bǔ)間動(dòng)畫。
// 一開始的出現(xiàn)時(shí)候的動(dòng)畫，從爆炸口沖出來(lái)
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(); // 沖出完成，進(jìn)行下落透明動(dòng)畫
})
return tween;
}
// 下落同時(shí)變透明動(dòng)畫
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;
}
最后效果
本節(jié)完整代碼：https://github.com/hua1995116/node-demo/blob/master/wechat-feces/3-2-feces.html
3.5總結(jié)
由于這一節(jié)比較長(zhǎng)，總結(jié)一下知識(shí)
先利用 1 = x2 + y2圓軌跡的特性，建立初步位置再通過(guò)加入隨機(jī)值，使得整個(gè)分布稍微不那么規(guī)則一些 給粑粑添加隨機(jī)角度 讓中心粑粑更趨向于爆炸口 添加鏈?zhǔn)絼?dòng)畫出現(xiàn)和下落
4.所有人震動(dòng)
這個(gè)功能只需要用簡(jiǎn)單 css 動(dòng)畫就能完成這里就不再詳細(xì)講啦，有興趣的小伙伴可以實(shí)現(xiàn)一下放到評(píng)論里~
結(jié)尾
本次純屬于一個(gè)對(duì)這個(gè)效果好奇的探索，不是100%還原動(dòng)畫。本人也不是專門寫動(dòng)畫的，上述庫(kù)也是第一次使用，寫的可能不那么專業(yè)（有任何問(wèn)題歡迎評(píng)論區(qū)指出錯(cuò)誤）。但是希望能給大家提供一個(gè)好玩的思路，在做動(dòng)畫的時(shí)候可以利用 lottie 和 tween 兩個(gè)庫(kù)，以及將復(fù)雜問(wèn)題簡(jiǎn)單化，把不規(guī)律的東西變成規(guī)律的東西，把復(fù)雜的東西變成簡(jiǎn)單的，最后再一步步地去深化。同時(shí)感謝楠溪對(duì)本文的校對(duì)。