使用Web動畫API播放粒子

利用Web Animations API打造炫酷粒子特效：點擊按鈕綻放煙花！

沒有什麼比粒子特效更能展現動畫的魅力了！每次探索新技術，我都會忍不住用盡可能多的粒子來製作演示。本文將使用Web Animations API，通過點擊按鈕觸發煙花效果，創造更驚豔的粒子魔法。

瀏覽器支持

截至本文撰寫之時，除了Safari和Internet Explorer外，所有主流瀏覽器都至少部分支持Web Animations API。 Safari的支持可以在“實驗性功能”開發者菜單中啟用。

瀏覽器支持數據來自Caniuse，其中包含更多詳細信息。數字表示瀏覽器從該版本及更高版本開始支持該功能。

桌面端

移動端/平板端

如果您想復現Twitter愛心動畫，還可以參考Ana Tudor的這篇精彩文章，它也是按鈕爆炸粒子效果的絕佳示例。

HTML結構

此演示不需要太多HTML代碼。我們將使用一個<button></button>元素，但也可以是其他類型的標籤元素。如果需要，我們甚至可以監聽頁面上的任何點擊事件，讓粒子從任意位置彈出。

<button id="button">點擊我</button>

CSS樣式

由於每個粒子都有一些共同的CSS屬性，我們可以在頁面的全局CSS中設置它們。您可以像在HTML中創建自定義標籤元素一樣，我將使用<particle></particle>標籤名來避免使用語義標籤。但事實上，您可以動畫化<div>、<code><span></span>或任何您選擇的標籤。

 particle {
  border-radius: 50%;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  opacity: 0; /*初始透明度為0，避免動畫開始前粒子可見*/
}

需要注意的是：

• 粒子不應該與頁面的佈局交互，因此我們將position設置為fixed ， top和left都設置為0px。
• 我們還移除pointer-events ，以避免在粒子顯示在屏幕上時與HTML粒子發生任何用戶交互。

由於按鈕和頁面佈局的樣式設計並非本文的重點，因此我將略過這部分。

JavaScript代碼

以下是我們在JavaScript中將遵循的六個步驟：

1. 監聽按鈕的點擊事件
2. 創建30個<particle></particle>元素並將其添加到DOM中
3. 為每個粒子設置隨機寬度、高度和背景顏色
4. 動畫化每個粒子，使其從鼠標位置移動到隨機位置並逐漸淡出
5. 動畫完成後，從DOM中移除<particle></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 <h4 id="步驟-粒子寬度-高度和背景">步驟3：粒子寬度、高度和背景</h4><pre class="brush:php;toolbar:false">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) {
  // ... (前面代碼)
  // 在鼠標位置75px範圍內生成隨機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
    }
  ], {
    // 設置500ms到1500ms之間的隨機持續時間duration: 500 Math.random() * 1000,
    easing: 'cubic-bezier(0, .9, .57, 1)',
    // 使用0ms到200ms之間的隨機值來延遲每個粒子delay: Math.random() * 200
  });
  // ... (後續步驟)
}

步驟5：動畫完成後移除粒子

function createParticle(x, y) {
  // ... (前面代碼)
  // 當動畫完成後，從DOM中移除元素animation.onfinish = () => {
    particle.remove();
  };
}

最終效果

將所有代碼整合在一起，就能得到我們想要的效果：色彩斑斕的粒子爆炸效果。

如果演示中沒有看到動畫，請檢查您的瀏覽器是否支持Web Animations API，詳情請參考文章開頭的瀏覽器支持表格。

創意無限

由於所有這些都使用CSS，因此修改粒子樣式非常簡單。以下是一些使用各種形狀（甚至字符！）的示例。

或者，我們甚至可以像Zach Saucier在這篇文章中所做的那樣，讓按鈕本身爆炸。

(後續補充其他形狀和字符的示例代碼以及Zach Saucier文章的鏈接)