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

沒有什么比粒子特效更能展現(xiàn)動畫的魅力了！每次探索新技術(shù)，我都會忍不住用盡可能多的粒子來制作演示。本文將使用Web Animations API，通過點擊按鈕觸發(fā)煙花效果，創(chuàng)造更驚艷的粒子魔法。

瀏覽器支持

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

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

桌面端

移動端/平板端

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

HTML結(jié)構(gòu)

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

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

CSS樣式

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

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

需要注意的是：

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

由于按鈕和頁面布局的樣式設(shè)計并非本文的重點，因此我將略過這部分。

JavaScript代碼

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

1. 監(jiān)聽按鈕的點擊事件
2. 創(chuàng)建30個<particle></particle>元素并將其添加到DOM中
3. 為每個粒子設(shè)置隨機寬度、高度和背景顏色
4. 動畫化每個粒子，使其從鼠標位置移動到隨機位置并逐漸淡出
5. 動畫完成后，從DOM中移除<particle></particle>元素

步驟1：點擊事件

// 我們首先檢查瀏覽器是否支持Web Animations API
if (document.body.animate) {
  // 如果支持，我們在按鈕上添加一個點擊監(jiān)聽器
  document.querySelector('#button').addEventListener('click', pop);
}

步驟2：粒子創(chuàng)建

// pop()函數(shù)在每次點擊時被調(diào)用
function pop(e) {
  // 循環(huán)生成30個粒子
  for (let i = 0; i 
<h4>步驟3：粒子寬度、高度和背景</h4>
<pre class="brush:php;toolbar:false">function createParticle(x, y) {
  // ... (前面代碼)
  // 計算5px到25px之間的隨機大小
  const size = Math.floor(Math.random() * 20   5);
  // 將大小應(yīng)用到每個粒子
  particle.style.width = `${size}px`;
  particle.style.height = `${size}px`;
  // 在藍色/紫色調(diào)色板中生成隨機顏色
  particle.style.background = `hsl(${Math.random() * 90   180}, 70%, 60%)`;
  // ... (后續(xù)步驟)
}

步驟4：動畫化每個粒子

function createParticle(x, y) {
  // ... (前面代碼)
  // 在鼠標位置75px范圍內(nèi)生成隨機x和y目標位置
  const destinationX = x   (Math.random() - 0.5) * 2 * 75;
  const destinationY = y   (Math.random() - 0.5) * 2 * 75;

  // 將動畫存儲在一個變量中，因為我們稍后會需要它
  const animation = particle.animate([
    {
      // 設(shè)置粒子的初始位置
      // 我們用粒子的一半大小來偏移粒子，使其以鼠標為中心
      transform: `translate(${x - (size / 2)}px, ${y - (size / 2)}px)`,
      opacity: 1
    },
    {
      // 我們將最終坐標定義為第二個關(guān)鍵幀
      transform: `translate(${destinationX}px, ${destinationY}px)`,
      opacity: 0
    }
  ], {
    // 設(shè)置500ms到1500ms之間的隨機持續(xù)時間
    duration: 500   Math.random() * 1000,
    easing: 'cubic-bezier(0, .9, .57, 1)',
    // 使用0ms到200ms之間的隨機值來延遲每個粒子
    delay: Math.random() * 200
  });
  // ... (后續(xù)步驟)
}

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

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

最終效果

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

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

創(chuàng)意無限

由于所有這些都使用CSS，因此修改粒子樣式非常簡單。以下是一些使用各種形狀（甚至字符?。┑氖纠?/p>

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

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