从3D插图到动画背景和基于滚动的故事，如果你想在网络上脱颖而出，互动内容是首选的解决方案。虽然它当然需要更多的时间和经验来实现，但其结果可能是真正令人惊叹的。
有鉴于此，在这篇文章中，我想向你展示一个捷径，只需花一点点功夫就能在你的网站上实现一个互动背景。这个捷径就是tsParticles--一个可以帮助你创建交互式粒子背景的库。在它的帮助下，你将能够在短时间内创造出令人惊叹的视觉效果!
什么是tsParticles
tsParticles是particles.js 的精神继承者，它是一个具有类似功能的旧库。它的改进包括使用TypeScript，与领先的框架进行第一方集成，以及一些新的功能。除此之外，该库还向后兼容partes.js--所有配置选项都是一样的。
该库使用HTML Canvas来创建背景，这些背景远比漂浮在屏幕上的点更高级--一些例子包括底层图像的粒子遮罩，使其具有漂亮的揭示效果，或在矢量形状中组织粒子的多边形遮罩。你还可以为粒子使用自定义图形，应用自定义动画，管理由不同用户行为触发的效果，以及其他更多的东西
总的来说，尽管只使用了一个配置对象，但该库的通用性和可配置性令人难以置信。此外，TypeScript类型和专门的集成不仅适用于React、Vue和Angular，也适用于Svelte和Solid等框架，这使得开发体验非常好。
创建交互式背景
为了展示如何使用tsParticles，我们将探索一些独特的、互动的背景。这应该能让你很好地了解到什么是可能的，并让你了解一些配置选项。
设置
在这个演示中，我们将使用React和官方的tsParticles React组件。下面的命令设置了一个React Vite模板，安装了必要的依赖，并运行了开发服务器，这样你就可以在几秒钟内准备好。
npm init vite@latest backgrounds --template react-ts
cd backgrounds
npm install react-tsparticles
npm run dev
要开始使用tsParticles，导入并渲染src/app.tsx 文件内的Particles 组件。
import Particles, { ISourceOptions } from "react-tsparticles";
const App = () => {
const options: ISourceOptions = {
// ...
};
return <Particles options={options} />;
};
export default App;
该组件接受几个道具--其中最重要的是options ，因为它负责配置tsParticles的视觉效果的几乎所有方面。其他的props配置画布或包装元素，提供对tsParticles实例的访问以进行额外的控制，以及更多。
配置选项
专注于这些选项，让我们用它们来创建我们的第一个互动背景。
// ...
const options: ISourceOptions = {
background: {
color: "#0d47a1",
},
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
value_area: 800,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
random: true,
value: 5,
},
},
};
// ...
上面的配置以相互连接的点的形式创建了一个最容易识别的基于粒子的背景。
看笔
tsParticles 浮动粒子by Arek Nawo(@areknawo)
onCodePen
.
配置tsParticles是相对简单的，由于TypeScript的类型，你不需要记忆或阅读文档来了解所有的选项。
下面是一些关于选项的细节，让你开始。
background，配置粒子背后的一切。你可以使用各种格式的纯色（HEX、RGB、HSL等）、图像、不同的不透明度，以及更多。interactivity控制当用户点击或悬停在背景上时发生的事情。events定义如何处理选定的事件modes配置用于事件处理的动作particles将控制粒子和相关视觉效果如何显示的所有属性分组。从这里，你可以配置一切，从粒子的颜色和运动行为，到它们之间的连接线。
tsParticles提供了大量的选项，所有这些你都可以通过TypeScript驱动的自动完成或官方文档来探索。
创建一个彩纸效果
现在我们对tsParticles的工作方式有了基本的了解，让我们创造一些更有趣的东西。我们将实现一个彩纸效果，类似于你可以在苹果iMessages中发送的东西。
我们将使用一个粒子发射器来实现纸屑从一个点上爆炸的印象，而不是仅仅漂浮在周围的粒子。让我们使用以下配置创建一个。
// ...
const options: ISourceOptions = {
fullScreen: true,
fpsLimit: 60,
detectRetina: true,
emitters: {
startCount: 0,
position: { x: 50, y: 50 },
size: {
width: 0,
height: 0,
},
rate: {
delay: 0,
quantity: 10,
},
life: {
duration: 0,
count: 1,
},
},
};
// ...
使用上述emitters 部分的参数，我们在全屏画布的正中央创建一个不可见的发射器。life 对象规定，在无限长的时间内只有一个发射器。另外，根据rate 对象的值，发射器将无延迟地发射十个粒子。
有了这样的设置，剩下要做的就是指定发射的粒子的外观和行为。为此，在particles 部分设置以下选项。
// ...
const options: ISourceOptions = {
// ...
emitters: {
// ...
},
particles: {
number: {
value: 0,
},
color: {
value: ["#FF5A86", "#953AFE", "#FFC326", "#46C0FF"],
},
shape: {
type: ["square", "circle"],
},
opacity: {
value: 1,
animation: {
enable: true,
minimumValue: 0,
speed: 0.5,
startValue: "max",
destroy: "min",
},
},
size: {
value: 5,
},
links: {
enable: false,
},
life: {
duration: {
sync: true,
value: 3,
},
count: 1,
},
move: {
angle: {
value: 45,
offset: 0,
},
drift: {
min: -0,
max: 0,
},
enable: true,
gravity: {
enable: true,
acceleration: 20,
},
speed: 90,
decay: 1 - 0.9,
direction: -90,
random: true,
straight: false,
outModes: {
default: "none",
bottom: "destroy",
},
},
rotate: {
value: {
min: 0,
max: 360,
},
direction: "random",
animation: {
enable: true,
speed: 60,
},
},
tilt: {
direction: "random",
enable: true,
value: {
min: 0,
max: 360,
},
animation: {
enable: true,
speed: 60,
},
},
roll: {
darken: {
enable: true,
value: 25,
},
enable: true,
speed: {
min: 15,
max: 25,
},
},
wobble: {
distance: 20,
enable: true,
speed: {
min: -15,
max: 15,
},
},
},
};
// ...
一般来说，上述配置使粒子模仿纸屑。它们有不同的颜色、形状，并且可以移动、旋转、倾斜，等等。这里最重要的选项是。
number.value，它控制浮动粒子的数量（应该是0）。move.gravity，它可以启用一个将颗粒拉下来的力。
下面是最终的结果。
看笔
tsParticles Colorful Confetti作者：Arek Nawo(@areknawo)
onCodePen
.
预置
正如你所看到的，tsParticles的配置可以变得相当复杂。为了解决这个问题，有一个预设功能，以便你可以分享和重复使用它们。
你也可以使用任何官方或社区的预设，并在它们上面应用你的自定义选项，以更快地达到你想要的效果。
为了向你展示如何使用预设，我们将使用海葵预设，它从画布的中心产生触手状颗粒。
首先，从npm安装预设包。
npm install tsparticles-preset-sea-anemone
为了加载预设，你需要访问tsParticles实例。为此，使用init 道具来设置初始化tsParticles时要使用的回调函数。该回调函数将接收上述实例作为参数。
import Particles, { ISourceOptions, Main } from "react-tsparticles";
import { loadSeaAnemonePreset } from "tsparticles-preset-sea-anemone";
const App = () => {
const options: ISourceOptions = {
preset: "seaAnemone",
};
const initialize = (instance: Main) => {
loadSeaAnemonePreset(instance);
};
return <Particles options={options} init={initialize} />;
};
export default App;
在选项中，确保通过它的名字来指定preset ，并包括任何你想定制的其他属性。默认情况下，预设应该给出以下效果。
看笔
tsParticles Sea Anemone预设by Arek Nawo(@areknawo)
onCodePen
.
正如我们之前提到的，tsParticles也允许你定义你自己的预置。要做到这一点，只需定义你的预设选项并创建一个接受你的tsParticles实例作为参数的加载函数。在这个函数中，使用实例的addPreset 方法来注册预设，传递你的自定义名称和定义的选项。
// ...
const options: ISourceOptions = {
// preset options
};
const loadCustomPreset = (main: Main) => {
main.addPreset("customPreset", options);
};
使用这样的预设与使用第三方的预设是完全一样的。
// ...
const App = () => {
const options: ISourceOptions = {
preset: "customPreset",
};
const initialize = (instance: Main) => {
loadCustomPreset(instance);
};
return <Particles options={options} init={initialize} />;
};
其他定制
在上述所有的基础上，tsParticles允许通过插件和高级配置选项进行更高级的定制。
插件与预设非常相似--它是一个接受tsParticles实例的函数，并使用可用的方法之一对其进行修改。除了用addPreset 来定义预设，你还可以用addShape 来添加自定义粒子形状，或者用addInteractor 来允许自定义交互。
为了给你一个例子，说明创建你自己的插件是多么容易，让我们创建一个为tsParticles添加一个六边形的形状。
const loadHexagonShape = (main: Main) => {
main.addShape("hexagon", (context, particle, radius) => {
const angle = (2 * Math.PI) / 6;
context.beginPath();
for (let i = 0; i < 6; i++) {
context.lineTo(
radius * Math.cos(angle * i),
radius * Math.sin(angle * i)
);
}
context.closePath();
context.stroke();
});
};
这个形状是使用HTML Canvas上下文和提供的粒子配置绘制的，类似于我们的彩纸演示中的样子。
看笔
tsParticles 彩色六边形纸屑by Arek Nawo(@areknawo)
onCodePen
.
除了插件之外，还有许多高级配置选项可以帮助你实现所需的效果。在纸屑演示中使用的emitters 属性是其中之一，还有更多！值得注意的例子包括 属性。值得注意的例子包括用于指定粒子应该覆盖什么矢量形状的polygon 属性，以及用于创建发射器反面的absorbers 属性--一个吸收附近粒子的黑洞状实体。
在你的配置中添加以下内容，以便在一个特定的位置创建一个吸收器，当它吸收更多的粒子时，它的尺寸会越来越大（达到一定的限度）。
// ...
const options: ISourceOptions = {
// ...
absorbers: {
color: "#ffffff",
position: { x: 70, y: 50 },
size: {
value: 50,
limit: 150
}
}
// ...
};
// ...
下面是我们把它应用于我们的纸屑演示时发生的情况。
看笔
tsParticles 彩色的六角形纸屑by Arek Nawo(@areknawo)
onCodePen
.
总的来说，这个库当然有很多定制的可能性。正因为如此，在试图实现一个特定的效果时，人们很容易迷失方向。在这种情况下，我建议查看该库作者的CodePen集合，其中包含各种配置，可以使用并从中获得灵感。下面是我最喜欢的几个。
看笔
tsParticles 多边形遮罩与多条路径by Matteo Bruni(@matteobruni)
onCodePen
.
看笔
tsParticles 多边形遮罩by Matteo Bruni(@matteobruni)
onCodePen
.
看笔
tsParticles外部Perlin噪声发生器by Matteo Bruni(@matteobruni)
onCodePen
.
结论
所以，正如你所看到的，tsParticles库的可能性几乎是无限的。可以说，你可以定制这个库的几乎所有方面。然而，最好的一点是，它是渐进的--你可以按你的要求定制很少或很多，而库将一直支持你。
有了像tsParticles这样的库，给你自己的网站带来互动的视觉效果从未如此简单。现在轮到你好好利用它，创造一些特别的东西了!
