用 JavaScript 实现酷炫的粒子追踪动画
用 JavaScript 实现酷炫的粒子追踪动画
疯狂的技术宅 前端先锋
你是否曾经想过用花哨的、闪闪发光的粒子动画分吸引你网站用户的注意力，而同时又在后台加载一些数据呢？幸运的是，没有必要用诸如 Three.js 之类的 3D 库进行非常深入的图形编程。相反，你需要的是 CSS 和 JavaScript 的一些基本知识以及轻便的动画库（例如 anime.js）。最后我们应该得到以下结果：
螺旋形粒子轨迹动画
Anime.Js 的下载和集成
你可以从官方 GitHub 下载 anime.js 库。从lib/文件夹下载文件anime.js 或 anime.min.js。
在我的例子中，HTML 部分如下所示：
1<!DOCTYPE html> 2<html lang="en" > 3<head> 4 <meta charset="UTF-8"> 5 <title>Anime.js Particles</title> 6 <!--or use anime.min.js--> 7 <script src="anime.js"></script> 8 <link rel="stylesheet" href="style.css"> 9</head> 10<body> 11<div class="anime-container"> 12</div> 13<script src="script.js"></script> 14</body> 15</html>
CSS 文件 styles.css 用来定义页面和每个粒子的背景色。位置是必需要设置的，稍后我们可以用 CSS 属性 left 和 top 在页面上自由放置粒子。
1body {
2 background-color: hsl(30, 3%, 14%);
3}
4.anime-container {
5 position: relative;
6}
7
8.anime-container .dot{
9 position: absolute;
10 /*draw particles as circles:*/
11 border-radius: 50%;
12 background-color: hsl(60, 100%, 80%);
13}
生成粒子
顾名思义，粒子动画由许多遵循特定模式在空间中移动的小粒子组成。在动画开始之前，同时生成所有粒子。
对于以下解释，anime.js的官方文档 对你非常有用。
在我的例子中，粒子位于阿基米德螺旋上。屏幕上粒子的 x 和 y 位置（在 CSS 中又称为 left 和 top）是根据其在螺旋上的位置 angle 来计算的：
1x=a*angle*cos(angle) 2y=a*angle*sin(angle)
角度以及螺旋的长度由参数 l 确定。通过参数 a，你可以控制螺旋线的密度。
1var container = document.querySelector(".anime-container");
2var n = 15;
3var a = 20;
4var l = 110;
5for (var i = 0; i <= l; i += 1) {
6 var angle = 0.1 * i;
7 //shift the particles to the center of the window
8 //by adding half of the screen width and screen height
9 var x = (a*angle) * Math.cos(angle) + window.innerWidth / 2;
10 var y = (a*angle) * Math.sin(angle) + window.innerHeight / 2;
11 var dot = document.createElement("div");
12 dot.classList.add("dot");
13 container.appendChild(dot);
14 var size = 5;
15 dot.style.width = size + "px";
16 dot.style.height = size + "px";
17 dot.style.left = x + "px";
18 dot.style.top = y + "px";
19 dot.style.backgroundColor = "hsl(60, 100%, 80%)";
20 }
21}
螺旋的第一个版本
这样，我们得到一个螺旋，每个位置只有一个粒子，但是只有在每个位置生成一个以上的粒子时，才能实现真正的拖尾效果。为了使轨迹显得浓密，各个粒子的位置必须略有不同。动画库为此提供了实用的辅助函数：
1anime.random(minValue, maxValue);
粒子的大小也随机变化：
1for (var i = 0; i <= l; i += 1) {
2 var angle = 0.1 * i;
3 //shift particles to the center of the window
4 //by adding half of the screen width and screen height
5 var x = (a*angle) * Math.cos(angle) + window.innerWidth / 2;
6 var y = (a*angle) * Math.sin(angle) + window.innerHeight / 2;
7 var n = 15;
8
9 //create n particles for each angle
10 for (var j = 0; j < n; j++) {
11 var dot = document.createElement("div");
12 dot.classList.add("dot");
13 container.appendChild(dot);
14 var size = anime.random(5, 10);
15 dot.style.width = size + "px";
16 dot.style.height = size + "px";
17 dot.style.left = x + anime.random(-15, 15) + "px";
18 dot.style.top = y + anime.random(-15, 15) + "px";
19 dot.style.backgroundColor = "hsl(60, 100%, 80%)";
20 }
21}
具有随机放置的粒子的螺旋
你可以在 CodePen 尝试中间结果：
请参阅 CodePen 上的 js 粒子动画 wip：https://codepen.io/smashingmag/pen/JjdqBve。
在动画开始之前，所有粒子都必须是不可见的。所以我将添加：
1dot.style.opacity = "0";
粒子动画
动画的基本设置
我的动画的基本设置如下：
- 动画要连续重复（loop:true），
- 移动是线性的（但是你可以尝试不同的值），
- 目标是所有带有 "dot" 类的元素。
1anime({
2 loop: true,
3 easing: "linear",
4 targets: document.querySelectorAll(".dot"),
5});
在下一步中，我将为目标的各种 CSS 属性设置动画。CSS 动画的基本步骤可以在 anime.js 文档中属性相关的章节中找到。
动画效果
这是我们第一个属性动画的样子，其中所有粒子在 50 毫秒内逐渐可见：
1anime({
2 loop: true,
3 easing: "linear",
4 targets: document.querySelectorAll(".dot"),
5 opacity: { value: 1, duration: 50}
6});
现在，我将揭示导致粒子螺旋运动的技巧！想法是使粒子以一定的时间延迟（例如，以 2 ms 的间隔）可见。首先使螺旋中间的粒子可见，然后从内到外的使所有其他粒子可见。anime.js 的 stagger 函数非常适合此功能。我认为，交错是该库的最大优势之一，它使你可以实现出色的效果。
1opacity: { value: 1, duration: 50, delay: anime.stagger(2) }
为了产生飞行轨迹的错觉，粒子一旦出现就必须开始缓慢消失。幸运的是 anime.js 提供了属性的关键帧符号：
1opacity: [
2 { value: 1, duration: 50, delay: anime.stagger(2) },
3 { value: 0, duration: 1200}
4 ],
你可以在 CodePen 看到中间结果：
请参阅 CodePen 上的 js 粒子动画 wip 2：https://codepen.io/smashingmag/pen/ZEGNjjv。
动画大小
彗星踪迹出现时应该比消失前更大。为此，我让粒子在 500ms 内缩小到 2px 的直径。选择与不透明度动画相同的时间延迟很重要，这样每个粒子只有在出现后才开始收缩：
1width: { value: 2, duration: 500, delay: anime.stagger(2) },
2height: { value: 2, duration: 500, delay: anime.stagger(2) },
个体运动
粒子动画的典型特征是粒子的独立性、不可预测的行为。最后，我通过沿 x 和 y 方向的运动将粒子带入动画：
1translateX: {
2 value: function() {
3 return anime.random(-30, 30);
4 },
5 duration: 1500,
6 delay: anime.stagger(2)
7 },
8
9translateY: {
10 value: function() {
11 return anime.random(-30, 30);
12 },
13 duration: 1500,
14 delay: anime.stagger(2)
15 }
同样，重要的是运动开始的时间应该与粒子的出现有相同的时间延迟。
另外在这种情况下，绝对有必要用 functions 来计算 translateX 和 translateY 的值。在这里，我们将参数用作基于函数的参数，其值是针对每个目标单所独确定的。否则所有目标移动相同的量都会是相同的（尽管是随机确定的）。
最后的想法
你可以在 CodePen 查看最终结果：
请参阅查看 CodePen 上的 js 动画粒子：https://codepen.io/smashingmag/pen/yLNWqRP。
你可以通过简单地调整这些值来根据自己的喜好修改动画。关于最后的修饰有一个小技巧：现在我们熟悉了基于函数的参数，可以稍微改善动画的透明度：
1opacity: [
2 { value: 1, duration: 50, delay: anime.stagger(2) },
3 { value: 0, duration: function(){return anime.random(500,1500);}}
4],
现在分别为每个粒子设置粒子消失之前的持续时间。这能够使动画在视觉上更加精致。
我建议你访问 CodePen，在这里你可以看到更多令人印象深刻的例子。
原文链接
https://www.smashingmagazine.com/2020/04/particle-trail-animation-javascript/
- 分享一个酷炫的粒子动画实现
- android 手摸手教你用 Canvas 实现简单粒子动画
- javascript转换静态图片，增加粒子动画效果
- JavaScript DOM中 改变样式属性，实现动画效果
- JavaScript DOM中 改变样式属性，实现动画效果 2
- particles.js 一个非常酷炫的粒子动画库
- 纯CSS实现酷炫渐变色、旋转动画特效
- JavaScript实现动画插件
- 通过javascript操作CSS3属性实现动画
- web前端之JavaScript DOM编程艺术之用JavaScript实现基础动画效果
- 用JavaScript实现动画效果的方法
- CSS+JavaScript实现简单的蜂窝动画（一）
- 《JavaScript DOM编程艺术》第十章 用javascript实现动画效果
- JavaScript DOM中 改变样式属性，实现动画效果 2
- JavaScript动画：offset和匀速动画详解(含轮播图的实现)
- javascript实现汉诺塔动画效果
- 基于javascript实现漂亮的页面过渡动画效果附源码下载
- 今天google 首页的javascript 动画实现。好吧，我来晚了。。。
- javascript动画小时钟实现
- JS DOM 编程艺术(第2版)读书笔记 第10章 用JavaScript实现动画效果