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 粒子动画库直接在浏览器 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 idtsparticles/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 idtsparticles 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从预设里挑一个你喜欢的改三个字段背景就是你的了。【免费下载链接】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），仅供参考