福州APP小程序网站开发专业公司 - 福州APP开发福州软件开发福州小程序开发福州网站开发

您是否曾经想过花哨的，闪闪发光的粒子动画分散您的网站访问者的注意力，而同时又将一些数据加载到后台呢？幸运的是，没有必要对诸如Three.js的3D库进行图形编程。相反，您需要的是CSS和JavaScript的一些基本知识以及轻便的动画库（例如anime.js）。最后，我们应该得到以下结果：

Anime.Js的下载和集成

您可以从GitHub官方站点下载anime.js库。从该文件夹下载文件anime.js或anime.min.jslib/。

在我的示例中，HTML部分如下所示：

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Anime.js Particles</title>
  <!--or use anime.min.js-->
  <script src="anime.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="anime-container">
</div>
<script src="script.js"></script>
</body>
</html>

CSS文件styles.css定义页面和单个粒子的背景颜色。位置设置是必需的，以便我们以后可以使用CSS属性left和随意在页面上放置粒子top。

body {
 background-color: hsl(30, 3%, 14%);
}
.anime-container {
  position: relative;
}
 
.anime-container .dot{
  position: absolute;
  /*draw particles as circles:*/
  border-radius: 50%;
  background-color: hsl(60, 100%, 80%);
}

下一节将介绍文件script.js的内容。

这么多人在家工作，我们认为我们会将家庭办公室的粉碎研讨会带到您的办公室。相约网上前端＆UX车间，用实际外卖，互动练习，录音和友好的Q＆A。

查看即将举行的研讨会↬

产生粒子

顾名思义，粒子动画由许多遵循特定模式在空间中移动的小粒子组成。在动画开始之前，同时生成所有粒子。

对于以下说明，anime.js的官方文档将很有用。

在我的示例中，粒子位于阿基米德螺旋线上。的x和y在屏幕（又名上的粒子的位置left和top在CSS）从其位置来计算angle在螺旋：

x=a*angle*cos(angle)
y=a*angle*sin⁡(angle)

角度的数量以及螺旋的长度由参数确定l。使用参数a，您可以控制螺旋的密度。

var container = document.querySelector(".anime-container");
var n = 15;
var a = 20;
var l = 110;
for (var i = 0; i <= l; i += 1) {
  var angle = 0.1 * i;
  //shift the particles to the center of the window 
  //by adding half of the screen width and screen height
  var x = (a*angle) * Math.cos(angle) + window.innerWidth / 2;
  var y = (a*angle) * Math.sin(angle) + window.innerHeight / 2;
  var dot = document.createElement("div");
  dot.classList.add("dot");
  container.appendChild(dot);
  var size = 5;
  dot.style.width = size + "px";
  dot.style.height = size + "px";
  dot.style.left = x + "px";
  dot.style.top = y + "px";
  dot.style.backgroundColor = "hsl(60, 100%, 80%)";
  }
}

这样，我们得到一个螺旋，每个位置只有一个粒子，但是只有在每个位置生成多个粒子时，才能实现真正的拖尾效果。为了使步道显得浓密，各个粒子的位置必须略有不同。动漫库为此提供了实用的帮助器功能：

anime.random(minValue, maxValue);

粒子的大小也随机变化：

for (var i = 0; i <= l; i += 1) {
  var angle = 0.1 * i;
  //shift particles to the center of the window 
  //by adding half of the screen width and screen height
  var x = (a*angle) * Math.cos(angle) + window.innerWidth / 2;
  var y = (a*angle) * Math.sin(angle) + window.innerHeight / 2;
  var n = 15;
  
  //create n particles for each angle
  for (var j = 0; j < n; j++) {
    var dot = document.createElement("div");
    dot.classList.add("dot");
    container.appendChild(dot);
    var size = anime.random(5, 10); 
    dot.style.width = size + "px";
    dot.style.height = size + "px";
    dot.style.left = x + anime.random(-15, 15) + "px";
    dot.style.top = y + anime.random(-15, 15) + "px";
    dot.style.backgroundColor = "hsl(60, 100%, 80%)";
  }
}

在这里，您可以尝试中间结果：

见笔动漫JS颗粒制品由安娜Prenzel。

在动画开始之前，所有粒子都必须是不可见的。因此，我将添加：

dot.style.opacity = "0";

粒子动画

动画的基本设置

我的动画的基本设置如下：

动画要连续重复（循环：true），
缓动是线性的（但您可以尝试使用不同的值），
目标是所有带有“点”类的元素。

anime({
  loop: true,
  easing: "linear",
  targets: document.querySelectorAll(".dot"),
});

在下一步中，我将为目标的各种CSS属性设置动画。CSS动画的基本步骤可以在anime.js文档的属性一章中找到。

不透明动画

这是我们第一个属性动画的样子，其中所有粒子在50ms内缓慢可见：

anime({
  loop: true,
  easing: "linear",
  targets: document.querySelectorAll(".dot"),
  opacity: { value: 1, duration: 50}
});

现在，我将最终揭示导致粒子螺旋运动的技巧！这个想法是使粒子以一定的时间延迟（例如2ms的间隔）可见。首先使螺旋中间的粒子可见，然后使所有其他粒子从内到外可见。anime.js 的交错函数非常适合此功能。我认为，交错是该库的最大优势之一，它可以使您获得出色的效果。

opacity: { value: 1, duration: 50, delay: anime.stagger(2) }

为了产生飞行轨迹的幻觉，粒子一旦出现就必须开始缓慢消失。幸运的是，anime.js 为属性提供了关键帧符号：

opacity: [
    { value: 1, duration: 50, delay: anime.stagger(2) },
    { value: 0, duration: 1200}
  ],

在这里，您可以看到中间结果：

见笔动漫JS颗粒制品2由安娜Prenzel。

大小动画

我的彗星踪迹在前端应该比后端更大。为此，我让粒子在500ms内缩小到2px的直径。选择与不透明度动画相同的时间延迟很重要，这样每个粒子只有在出现后才开始收缩：

width: { value: 2, duration: 500, delay: anime.stagger(2) },
height: { value: 2, duration: 500, delay: anime.stagger(2) },

粒子的个体运动

粒子动画的典型特征是粒子的个别，不可预测的行为。最后，我通过x和y方向的单个移动将这些粒子变为现实：

translateX: {
    value: function() {
      return anime.random(-30, 30);
    },
    duration: 1500,
    delay: anime.stagger(2)
  },

translateY: {
    value: function() {
      return anime.random(-30, 30);
    },
    duration: 1500,
    delay: anime.stagger(2)
  }

同样，重要的是运动的开始应与粒子的出现具有相同的时间延迟。

此外，这是绝对必要的，这种情况下，有functions计算的数值translateX和translateY。在这里，我们将参数用作基于函数的参数，其值分别针对每个目标确定。否则，所有目标都将偏移相同的量（尽管是随机确定的）。

最后的想法

您可以在此处查看最终结果：

见笔动漫JS颗粒由安娜Prenzel。

您可以通过简单地调整所有值来根据自己的喜好修改动画。关于最后的修饰，我有一个小技巧：现在我们熟悉了基于函数的参数，可以稍微改善不透明度动画：

opacity: [
    { value: 1, duration: 50, delay: anime.stagger(2) },
    { value: 0, duration: function(){return anime.random(500,1500);}}
],

现在分别为每个粒子设置粒子消失之前的持续时间。这使我们的动画在视觉上更加精致。

希望您现在和我一样对anime.js为粒子动画提供的可能性感到兴奋！我建议您访问CodePen，在那里您可以看到更多令人印象深刻的示例。

如何在JavaScript中创建粒子追踪动画