【实战】这个炫酷的播放粒子效果，你也能够学会！使用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前端工程师，全栈开发工程师、持续学习者。