tsParticles 实战教程：三步为网站搭建动态粒子动画背景-二趣网

tsParticles 实战教程：三步为网站搭建动态粒子动画背景

【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles

tsParticles 是一个零依赖的 TypeScript 粒子动画库，直接在浏览器 Canvas 上渲染雪花、烟花、彩纸屑、星空等效果。它把功能拆成引擎、预设、插件等独立包，你可以只装需要的部分。React、Vue、Angular、Svelte、jQuery 等主流框架都有官方组件，几行配置就能让静态网页背景"动"起来。

网页背景不动，访客三秒就划走

你大概遇到过这样的需求：给官网首页、活动落地页或登录页加一个会动的背景。用 CSS 动画做出来往往生硬，用视频背景又太占流量。理想状态是——几十行配置代码，得到一个可缩放、可交互、按帧渲染的动画背景。

tsParticles 就是为这件事准备的。它的核心@tsparticles/engine不依赖任何第三方库，输出的就是普通 JavaScript 文件，源码是 TypeScript 只是为了开发体验。你不需要懂粒子系统的物理原理，写一份 JSON 风格的配置，引擎负责渲染、动画和交互的全部脏活。

它替你解决了什么

传统上想做一个粒子背景，你要自己处理：Canvas 绘制、每帧更新、粒子生命周期、鼠标事件、窗口缩放。tsParticles 把这些收进一个容器（源码在 engine/src/Core/），你只面对两件事：

装什么：@tsparticles/slim（常用功能默认包）、@tsparticles/basic、@tsparticles/all（全量），或者只装单个插件包
配什么：粒子数量、颜色、形状、运动、连线、交互模式

这种拆分的好处很实际：你做一个登录页背景，装 slim 就够了，不用为烟花、音效这些用不到的功能付出体积代价。

三步做出第一个粒子背景

第一步，建一个页面，里面放一个占位元素：

<div id="tsparticles"></div>

第二步，安装引擎和 slim 包：

npm install @tsparticles/engine @tsparticles/slim

第三步，在脚本里先加载功能包，再启动实例。顺序不能反，这是新手最常见的报错原因：

import { tsParticles } from "@tsparticles/engine"; import { loadSlim } from "@tsparticles/slim"; await loadSlim(tsParticles); await tsParticles.load({ id: "tsparticles", options: { background: { color: "#0d1117" }, particles: { number: { value: 60 }, move: { enable: true }, }, }, });

打开页面，深蓝色背景上 60 个粒子缓缓飘动——从 0 到 1 就是这几行。后面的事情都只是在options里加字段。

用预设直接拿到成品效果

自己调配置有门槛，仓库里 presets/ 目录放了 20 多个开箱即用的成品配方：雪花、烟花、彩纸炮、气泡、矩阵数字雨等，每个预设自带完整配置和运行依赖。

以雪花为例，安装对应预设包后，加载代码比手写配置还短：

import { tsParticles } from "@tsparticles/engine"; import { loadSnowPreset } from "@tsparticles/preset-snow"; await loadSnowPreset(tsParticles); await tsParticles.load({ id: "tsparticles", preset: "snow", });

推荐的工作方式是：先用预设跑起来，再把配置对象拷出来，只改你关心的字段。仓库里 demo/vanilla_new/index.html 就是一个预设切换器，可以逐一点开看每个配方长什么样。

让粒子对鼠标有反应

预设解决"好看"，交互模式解决"好玩"。在配置的interactivity段里声明事件和模式，粒子就会对悬停、点击做出响应：

options: { interactivity: { events: { onHover: { enable: true, mode: "repulse" }, onClick: { enable: true, mode: "push" }, }, modes: { repulse: { distance: 100, duration: 0.4 }, push: { quantity: 4 }, }, }, },

内置的模式远不止这两个：attract（吸引）、bubble（气泡放大）、grab（抓取连线）、repulse（排斥）等，每种模式都有独立的行为参数。完整的选项清单和每个字段的说明在 markdown/Options.md 里，那是官方配置速查表，改配置前查一遍能少走很多弯路。

接入框架和工程化注意点

如果你用的是组件框架，不需要手写 canvas 挂载逻辑，官方封装都在 wrappers/ 目录下。以 React 为例，安装@tsparticles/react后，粒子背景就是一个普通组件：

import Particles from "@tsparticles/react"; import { registerParticles } from "./particlesInit"; function App() { return ( <Particles id="tsparticles" particlesInit={registerParticles} options={options} /> ); }

particlesInit传入的是一个注册函数，在 demo/react/src/particlesInit.js 里可以看到它负责加载 slim 包和所需插件。Vue 2/3、Angular、Svelte、jQuery 的写法同理，各框架目录下的 README 都有可直接复制的示例工程。

落地时容易踩三个坑，都是官方文档里点名过的：

插件没先加载：配置里用了依赖某插件的字段，但没先load对应插件包，运行时静默失败
一上来就堆粒子：数量拉满再看帧率，正确顺序是先小规模跑通，再逐步加量观察 FPS
新旧命名混用：早期版本用snake_case（如retina_detect），新版统一为camelCase（如detectRetina），混用会被忽略

移动端建议把粒子数量压到 30-50 并设置fpsLimit，仓库里还有responsive插件可以按屏幕断点加载不同配置。

资源入口

markdown/Options.md：全部配置选项的官方说明
engine/src/Core/：引擎核心源码（容器、粒子、渲染管理）
presets/：20 多个开箱即用的效果配方
demo/：React、Vue、Svelte、Angular 等各框架示例工程
wrappers/：各框架官方组件包的源码与说明

想亲手过一遍完整流程，克隆下来看 demo 目录即可：

git clone https://gitcode.com/GitHub_Trending/ts/tsparticles cd tsparticles

从预设里挑一个你喜欢的，改三个字段，背景就是你的了。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析