近日,微信又釋出了新功能(更新到微信8.0.6)。最火熱的非"炸屎"功能莫屬了,各種群裡紛紛玩起了炸屎的功能。
效果體驗:
https://example.qiufeng.blue/wechat-feces/3-2-feces.html
Github位址:
https://github.com/hua1995116/node-demo/tree/master/wechat-feces
步驟拆解
任何一個物體都是由更微小的物體構成,是以我們想要實作以上功能,自然也得一步一步地來。我大緻将以上功能拆解成了以下四個步驟。裡面的每一個都不會太難,可以說前端小白也能輕松實作。
1.丢炸彈
這一步,我們可以用二次函數的知識,來寫一個軌迹路徑(類似 y = ),然後通過
tween.js
來做補間動畫。
2.炸彈爆炸
利用
lottie
來實作動畫。
3.粑粑被炸開
利用
css
動畫實作
4.所有人震動
利用
css
動畫實作
總結
以上我們大緻想說的思路,也許你看思路就對其中一些的實作已經輕車熟路,那你可以跳過一部分。有了上面的思路後,那我們就真刀真槍開始實踐啦。
具體實作
1.丢炸彈
我們通過仔細觀察其實可以看到,炸彈的運動軌迹其實就是一個抛物線。我們想要實作這個功能,很容易地就可以聯想到二次函數。
首先我們先來看看二次函數的定義。
一般地,把形如y=ax²+bx+c(a≠0)(a、b、c是常數)的函數叫做二次函數。
從圖像上來表達就是這樣的。
很顯然這和我們想要的軌迹非常的相似。
因為正常的笛卡爾坐标系都是以豎直向上為 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) // 勻速
通過以上定義,我們就可以在
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.修改它運動時候的角度。
本節完整代碼: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
爆炸的特效檔案。
而它的寫法非常簡單,隻需要引入
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 () {
// 寫爆炸動畫
})
本節完整代碼:https://github.com/hua1995116/node-demo/blob/master/wechat-feces/2-2-lottie.html
3.粑粑被炸開
3.1形狀
同理炸彈用 PS 摳圖把 "粑粑" 摳出一個透明的圖層,就想這樣。(稍微有點毛刺沒關系,實際的粑粑也沒這麼大, 是以不太容易看到毛刺,也可以通過微調給他修複)
.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位置
我們可以看到粑粑是從炸裂的地方飛出來的,飛出來主要是7個粑粑,其中中間的最大,其他的随着離中心粑粑越遠而越小,排列的方式是類似于一個圓,但是又不是那麼規律。
是以我們可以先通過最簡單的方式來實作,就是以一個圓形環繞。一個圓是 360 °,我們隻需要給它平均分成6等分就好。我們環繞的一共是6個粑粑,是以,每個之間是60°。
由于我們上面的炸彈是大緻是一個 300 * 300的區域,是以我将中心的坐标定為(150,150),然後随機生成一個 70 ~ 230 的x點,就能算出 y 值,在确定第一個點後,根據每個點之間的角度是 60°,就能計算出其餘的5個點。
由于用中心點為 (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),
}
})
}
然後我們按照這個思路進行繪制,繪制出 6 個粑粑,再向x軸和y軸分别平移150。
randomPosition(6).map(item => ({ x: item.x + 150, y: item.y + 150 })) // 此處你也定義多于6個
貌似有點那味了,但是所有的都一樣大,是以我們需要處理一下,根據距離中心遠近來縮放大小,大緻寫了一個,因為圓的半徑為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); // 要縮放的比例
然而真實場景中,我們擺放位置會更加随機,是以我給每個粑粑的位置增加了一個随機值,并且中心粑粑會更加偏向于左上角,也更加了一定的随機值。
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(),
}
})
}
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;
}
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;
}
最後效果
本節完整代碼:https://github.com/hua1995116/node-demo/blob/master/wechat-feces/3-2-feces.html
3.5總結
由于這一節比較長,總結一下知識
- 先利用
圓軌迹的特性,建立初步位置1 = x² + y²
- 再通過加入随機值,使得整個分布稍微不那麼規則一些
- 給粑粑添加随機角度
- 讓中心粑粑更趨向于爆炸口
- 添加鍊式動畫出現和下落
4.所有人震動
這個功能隻需要用簡單 css 動畫就能完成這裡就不再詳細講啦,有興趣的小夥伴可以實作一下放到評論裡~
結尾
本次純屬于一個對這個效果好奇的探索,不是100%還原動畫。本人也不是專門寫動畫的,上述庫也是第一次使用,寫的可能不那麼專業(有任何問題歡迎評論區指出錯誤)。但是希望能給大家提供一個好玩的思路,在做動畫的時候可以利用
lottie
和
tween
兩個庫,以及将複雜問題簡單化,把不規律的東西變成規律的東西,把複雜的東西變成簡單的,最後再一步步地去深化。同時感謝楠溪對本文的校對。
關于奇舞團
奇舞團是 360 集團最大的大前端團隊,代表集團參與 W3C 和 ECMA 會員(TC39)工作。奇舞團非常重視人才培養,有工程師、講師、翻譯官、業務接口人、團隊 Leader 等多種發展方向供員工選擇,并輔以提供相應的技術力、專業力、通用力、上司力等教育訓練課程。奇舞團以開放和求賢的心态歡迎各種優秀人才關注和加入奇舞團。