又一期實戰教程來了，本次實戰教你建立一個粒子魔術效果，跟著我做，包你也能學會和理解。
當談到運動和動畫時，可能沒有什麼比粒子更讓我喜歡了，這就是為什麼每次我探索新技術時，我總是以儘可能多的建立粒子來演示。
在本文中，單擊按鈕時，我們將使用Web Animations API建立煙花效果，從而製作更多的粒子魔術。
效果如下
本文演示和完整程式碼已經放在我的部落格小碼頁面
讓我們開始吧！
瀏覽器支援
在我撰寫本文時，除了Safari和Internet Explorer（IE是全民公敵、Safari是新時代的IE）之外，所有主流瀏覽器至少部分支援Web動畫API。Safari支援可以在“實驗性特性”開發人員選單中啟用。
這個瀏覽器支援的資料來自Caniuse。數字表示瀏覽器支援該版本及以上的功能。
HTML設定
該演示不需要太多的HTML，我們將使用一個 <button> 元素，但它可以是另一種型別的標籤元素。如果我們真的想的話，我們甚至可以聽到頁面上的任何點選聲，讓粒子從任何地方彈出。
<button id="button">Click on me</button>
複製程式碼CSS設定
由於每個粒子都有一些共同的CSS屬性，我們可以在頁面的全域性CSS中設定它們。因為您可以在HTML中建立自定義標籤元素，所以我將使用 <particle> 標籤名稱來避免使用語義標籤。但事實是，您可以為 <p>，<i> 或您選擇的任何標記設定動畫。
particle {
border-radius: 50%;
left: 0;
pointer-events: none;
position: fixed;
top: 0;
}
複製程式碼這裡要注意幾件事：
- 粒子不應與頁面佈局相互作用，因此我們設定了一個
fixed位置，top和left分別為0px。 - 我們還將刪除指標事件，以避免HTML粒子在螢幕上時與使用者的任何互動。
因為樣式化按鈕和頁面佈局並不是本文的真正目的，所以我將把它放在一邊。
JavaScript設定
這是我們將在JavaScript中執行的六個步驟：
- 監聽按鈕上的點選事件
- 建立30個
<particle>元素並將其附加到<body> - 為每個粒子設定隨機的寬度，高度和背景
- 使每個粒子淡出時，將其從滑鼠位置動畫化到隨機位置
- 動畫完成後，從DOM中刪除
<particle>
步驟1：點選事件
// 我們首先檢查瀏覽器是否支援Web Animations API
if (document.body.animate) {
// 如果支援，我們在按鈕上新增一個點選監聽器
document.querySelector('#button').addEventListener('click', pop);
}
複製程式碼步驟2：粒子
// 每次點選都會呼叫 pop() 函式
function pop(e) {
// 迴圈一次生成30個粒子
for (let i = 0; i < 30; i++) {
// 我們將滑鼠座標傳遞給 createParticle() 函式
createParticle(e.clientX, e.clientY);
}
}
function createParticle(x, y) {
// 建立自定義粒子元素
const particle = document.createElement('particle');
// 將元素新增道body中
document.body.appendChild(particle);
}
複製程式碼步驟3：粒子寬度，高度和背景
function createParticle (x, y) {
// [...]
// 計算從5px到25px的隨機大小
const size = Math.floor(Math.random() * 20 + 5);
// 將大小應用於每個粒子
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
// 在藍色/紫色調色盤中生成隨機顏色
particle.style.background = `hsl(${Math.random() * 90 + 180}, 70%, 60%)`;
}
複製程式碼步驟4：為每個粒子新增動畫
function createParticle (x, y) {
// [...]
// 在距離滑鼠75畫素的範圍內生成隨機的x和y目標
const destinationX = x + (Math.random() - 0.5) * 2 * 75;
const destinationY = y + (Math.random() - 0.5) * 2 * 75;
// 將動畫儲存在變數中，因為稍後我們將需要它
const animation = particle.animate([
{
// 設定粒子的原點位置
// 我們將粒子偏移一半大小，以使其圍繞滑鼠居中
transform: `translate(${x - (size / 2)}px, ${y - (size / 2)}px)`,
opacity: 1
},
{
// 我們將最終座標定義為第二個關鍵幀
transform: `translate(${destinationX}px, ${destinationY}px)`,
opacity: 0
}
], {
// 將隨機持續時間設定為500到1500ms
duration: 500 + Math.random() * 1000,
easing: 'cubic-bezier(0, .9, .57, 1)',
// 將每個粒子延遲從0ms到200ms的隨機值
delay: Math.random() * 200
});
}
複製程式碼因為我們有一個隨機的延遲，所以等待開始動畫的粒子在螢幕的左上角可見，為了防止這種情況，我們可以在全域性CSS中為每個粒子設定零不透明度。
particle {
/* 和之前的一樣 */
opacity: 0;
}
複製程式碼步驟5：動畫完成後刪除粒子
從DOM中刪除粒子元素很重要，因為我們每次點選都會建立30個新元素，所以瀏覽器的記憶體很快就會被填滿，導致出現問題。我們可以這樣做：
function createParticle (x, y) {
// 和前面的相同
// 動畫結束後，從DOM中刪除元素
animation.onfinish = () => {
particle.remove();
};
}
複製程式碼最終結果
把前面所說的所有的程式碼整合在一起，我們就得到了我們想要的：一個豐富多彩的粒子爆炸效果。
發揮創造力
因為所有這些都是使用CSS，所以修改粒子樣式非常簡單，下面這五個使用各種形狀甚至字元的示例！
該效果請訪問：codepen.io/Mamboleoo/p…
如果對你有所啟發和幫助，可以點個關注、收藏，也可以留言討論，這是對作者的最大鼓勵
作者簡介：Web前端工程師，全棧開發工程師、持續學習者。