沐鳴:_炫酷的播放粒子效果,你也可以學會!使用Web動畫API製作

當談到運動和動畫時,可能沒有什麼比粒子更讓我喜歡了,這就是為什麼每次我探索新技術時,我總是以盡可能多的創建粒子來演示。

在本文中,單擊按鈕時,我們將使用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,所以修改粒子樣式非常簡單,下面這五個使用各種形狀甚至字符的示例!

該效果請訪問:https://codepen.io/Mamboleoo/

作者簡介:Web前端工程師,全棧開發工程師、持續學習者。

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/8523