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

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

瀏覽器支持

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

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

桌面端

移動(dòng)端/平板端

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

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

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

<button id="button">點(diǎn)擊我</button>

CSS樣式

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

 particle {
  border-radius: 50%;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  opacity: 0; /*初始透明度為0，避免動(dòng)畫(huà)開(kāi)始前粒子可見(jiàn)*/
}

需要注意的是：

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

由於按鈕和頁(yè)面佈局的樣式設(shè)計(jì)並非本文的重點(diǎn)，因此我將略過(guò)這部分。

JavaScript代碼

以下是我們?cè)贘avaScript中將遵循的六個(gè)步驟：

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

步驟1：點(diǎn)擊事件

// 我們首先檢查瀏覽器是否支持Web Animations API
if (document.body.animate) {
  // 如果支持，我們?cè)诎粹o上添加一個(gè)點(diǎn)擊監(jiān)聽(tīng)器document.querySelector('#button').addEventListener('click', pop);
}

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

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

步驟4：動(dòng)畫(huà)化每個(gè)粒子

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

  // 將動(dòng)畫(huà)存儲(chǔ)在一個(gè)變量中，因?yàn)槲覀兩葬釙?huì)需要它c(diǎn)onst animation = particle.animate([
    {
      // 設(shè)置粒子的初始位置// 我們用粒子的一半大小來(lái)偏移粒子，使其以鼠標(biāo)為中心transform: `translate(${x - (size / 2)}px, ${y - (size / 2)}px)`,
      opacity: 1
    },
    {
      // 我們將最終坐標(biāo)定義為第二個(gè)關(guān)鍵幀transform: `translate(${destinationX}px, ${destinationY}px)`,
      opacity: 0
    }
  ], {
    // 設(shè)置500ms到1500ms之間的隨機(jī)持續(xù)時(shí)間duration: 500 Math.random() * 1000,
    easing: 'cubic-bezier(0, .9, .57, 1)',
    // 使用0ms到200ms之間的隨機(jī)值來(lái)延遲每個(gè)粒子delay: Math.random() * 200
  });
  // ... (後續(xù)步驟)
}

步驟5：動(dòng)畫(huà)完成後移除粒子

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

最終效果

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

如果演示中沒(méi)有看到動(dòng)畫(huà)，請(qǐng)檢查您的瀏覽器是否支持Web Animations API，詳情請(qǐng)參考文章開(kāi)頭的瀏覽器支持表格。

創(chuàng)意無(wú)限

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

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

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