给网页加粒子背景只要10分钟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/tsparticlestsParticles 是一个零第三方依赖的 TypeScript 粒子动画库用几行配置就能在网页上跑出彩屑、烟花、雪花这类动态背景并自带 React、Vue、Angular、Svelte、jQuery 等框架的官方组件。如果你不想自己啃 Canvas 动画循环、碰撞和帧率控制又不满足于静态背景图它就是最省事的那条路。它替你省掉了哪些事自己用 Canvas 写粒子效果至少要处理这几件事每帧的requestAnimationFrame循环、粒子出生与回收、位置越界后的重入逻辑、Retina 屏幕的像素缩放、多实例的生命周期管理。tsParticles 把这些全部封装在引擎内部核心代码在 engine/src/Core/ 的Container.ts、Particle.ts、Engine.ts里你只负责写一份 JSON 风格的配置。另外它按功能拆包不需要的形状、交互、插件就不装包体积由你自己说了算而不是被一个全家桶拖累首屏。装两个包跑通第一个粒子背景不需要建框架项目一个npm install就能开始npm install tsparticles/engine tsparticles/slimslim是最常用的组合包包含基础粒子、连线、常见交互。HTML 里放一个空 div然后初始化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 }, }, }, });注意顺序必须先loadSlim或对应的 bundle再load这是新手最常踩的坑后文还会再提一次。跑起来后是一个深色背景上缓慢漂移的粒子层粒子数量、颜色、速度都可以直接在options里改改完刷新即可看到结果。用 preset 三行换一套现成效果从零调参容易但更常见的做法是直接套官方预设然后只覆盖自己关心的字段。仓库里 presets/ 目录有 20 套matrix数字雨、snow雪、fire火焰、fireworks烟花、confetti彩屑、links连线等每套对应一个 npm 包比如tsparticles/preset-matrix。以 matrix 数字雨为例import { loadMatrixPreset } from tsparticles/preset-matrix; await loadMatrixPreset(tsParticles); await tsParticles.load({ id: tsparticles, options: { preset: matrix }, });想微调时在options里加字段就行preset 里没写的会保持默认写了的会被你的值覆盖。比如把粒子形状从字符换成方块options: { preset: fire, particles: { shape: { type: square } }, }这套预设打底 局部覆盖的模式适用于所有 preset也是官方 demo 页面的实现方式。想看每套预设长什么样直接翻 presets/ 下各目录的images/sample.png。让粒子跟着鼠标动静态背景看完会腻交互才是粒子背景的意义。interactivity一节声明什么事件触发什么模式modes一节再声明模式的具体参数。以悬停排斥 点击推入粒子为例options: { interactivity: { events: { onHover: { enable: true, mode: repulse }, onClick: { enable: true, mode: push }, }, modes: { repulse: { distance: 120, duration: 0.4 }, push: { quantity: 4 }, }, }, };除了repulse/push内置模式还有attract吸引、grab牵引、bubble气泡放大、bounce弹开等全部在 interactions/external/ 下有独立实现和说明文档。每种模式的可用参数距离、时长、影响半径都能在 markdown/Options.md 的 Interactivity 章节查到。框架项目怎么接每个框架的用法都遵循同一个模式装一个tsparticles/框架名组件包在组件的初始化回调里调用loadSlim或 preset 的加载函数把options传给组件属性。以 React 为例Next.js 项目用tsparticles/nextjs而非 react 包import Particles from tsparticles/react; import { loadSlim } from tsparticles/slim; const particlesInit async (engine) { await loadSlim(engine); }; Particles idtsparticles init{particlesInit} options{options} /其他框架同理组件源码都能对照仓库里的 demo/ 目录看比如 demo/react/、demo/vue3/、demo/angular/ 都是可直接pnpm install后跑起来的完整示例。Vue 2/3、Angular、Svelte、Preact、Solid、jQuery、Web Components 的组件包都列在 README 的框架清单 里包名即框架名按名取用即可。四个高频坑先知道能省半天load 顺序反了tsParticles.load()在loadSlim/loadMatrixPreset之前执行会报缺少插件。所有初始化函数必须 await 完再 load。配置里混用旧版字段名particles.js 时代的value_area、fps_limit这类蛇形命名已被density.value_area、fpsLimit等驼峰写法取代照抄老教程会静默失效。字段对照可查 markdown/pjsMigration.md。一上来就堆几千个粒子低端设备上帧率会崩。先看fpsLimit默认 60和粒子数量再往上加pauseOnBlur和pauseOnOutsideViewport两个开关能帮后台标签页省资源。响应式不是必须手写媒体查询配置里的responsive数组按breakpoint分段覆盖 options移动端少放点粒子就够了不用维护两套配置。想深入仓库里的三张地图配置全集markdown/Options.md 是根级选项总表markdown/Options/下每个选项组颜色、连线、轨迹、生命周期都有独立说明页按目录名找。预设目录presets/ 下每套效果都有README.md说明依赖哪些包和images/sample.png效果图抄配置前先看一眼。引擎源码engine/src/Core/ 里Container.ts管实例生命周期、Particle.ts管单个粒子、RenderManager.ts管绘制想理解这个选项为什么没生效时从这三个文件入手。如果要把整个仓库拉下来边跑边读命令如下git clone https://gitcode.com/GitHub_Trending/ts/tsparticles下一步建议打开 demo/vanilla_new/index.html 在浏览器里浏览全部预设的实时效果挑一个最接近你需求的 preset从它的 README 抄出依赖清单按本文第二节的方法装包改参10 分钟内就能得到可上线的背景层。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考