【實戰】這個炫酷的播放粒子效果，你也能夠學會！使用Web動畫API製做

時間 2020-04-07

標籤實戰這個播放粒子效果能夠學會使用 web 動畫 api 製做欄目 HTML 简体版

原文原文鏈接

又一期實戰教程來了，本次實戰教你建立一個粒子魔術效果，跟着我作，包你也能學會和理解。javascript

當談到運動和動畫時，可能沒有什麼比粒子更讓我喜歡了，這就是爲何每次我探索新技術時，我老是以儘量多的建立粒子來演示。css

在本文中，單擊按鈕時，咱們將使用Web Animations API建立煙花效果，從而製做更多的粒子魔術。 html

效果以下
前端

本文演示和完整代碼已經放在個人博客小碼頁面java

讓咱們開始吧！web

瀏覽器支持

在我撰寫本文時，除了Safari和Internet Explorer（IE是全民公敵、Safari是新時代的IE）以外，全部主流瀏覽器至少部分支持Web動畫API。Safari支持能夠在「實驗性特性」開發人員菜單中啓用。segmentfault

這個瀏覽器支持的數據來自Caniuse。數字表示瀏覽器支持該版本及以上的功能。瀏覽器

HTML設置

該演示不須要太多的HTML，咱們將使用一個 <button> 元素，但它能夠是另外一種類型的標籤元素。若是咱們真的想的話，咱們甚至能夠聽到頁面上的任何點擊聲，讓粒子從任何地方彈出。前端工程師

<button id="button">Click on me</button>

CSS設置

因爲每一個粒子都有一些共同的CSS屬性，咱們能夠在頁面的全局CSS中設置它們。由於您能夠在HTML中建立自定義標籤元素，因此我將使用 <particle> 標籤名稱來避免使用語義標籤。但事實是，您能夠爲 <p>，<i> 或您選擇的任何標記設置動畫。app

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前端工程師，全棧開發工程師、持續學習者。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。