使用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文章的链接)

以上是使用Web动画API播放粒子的详细内容。更多信息请关注PHP中文网其他相关文章！