tsParticles Links 预设使用指南用粒子连线打造网页动态网络背景【免费下载链接】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 官方 Links 预设tsparticles/preset-links展开讲解如何用一条条粒子之间的连线构建网络/网状动态背景从 CDN、npm 两种安装方式到preset: links的最小可用配置再到particles.links全套参数距离、颜色、透明度、三角填充、分组连线等的源码级解读。读完本文你将能独立在任意网页或主流前端框架中快速接入并深度定制 tsParticles 连线效果。一、Links 预设是什么tsParticles Links 预设Links Preset是 tsParticles 官方提供的一键式配置包用于创建由粒子之间连线构成的网络效果——粒子散布在画布上彼此靠近的粒子之间自动绘制连线形成类似神经网络、星图或点云可视化的动态结构。该预设的核心价值在于开箱即用它把引擎基础运行时、粒子间连线交互、外部交互基础插件以及一份写好的默认配置打包在一起。从源码看这份默认配置定义在 presets/links/src/options.tsexport const options { background: { color: #000000, // 黑色背景 }, particles: { number: { value: 100, // 100 个粒子 }, links: { distance: 150, // 连线最大距离 150px enable: true, // 开启连线 }, move: { enable: true, // 粒子运动 }, paint: { fill: { color: { value: #ffffff, // 粒子填充为白色 }, }, }, size: { value: 1, // 粒子半径 1px }, shape: { type: circle, // 圆形粒子 }, }, };从配置可以看出Links 预设的默认观感是黑色画布 100 个白色小圆点 150px 连线距离粒子持续缓慢移动。你可以在tsParticles.load(...)中覆盖其中任何一项。二、快速接入清单官方 README 给出的 Quick checklist 只有三步安装tsparticles/engine或直接使用下面的 CDN bundle在tsParticles.load(...)之前调用loadLinksPreset(tsParticles)在 options 中设置preset: links。调用顺序是关键预设注册必须发生在实例加载之前否则引擎不知道links这个预设名对应什么配置。这对应 presets/links/src/index.ts 中的实现——loadLinksPreset内部会通过engine.pluginManager.addPreset(presetName, options)把默认配置注册进引擎。三、CDN / Vanilla JS / jQuery 用法最快捷的方式是通过 jsDelivr 引入 CDN bundle无需任何构建工具script srchttps://cdn.jsdelivr.net/npm/tsparticles/preset-links4/tsparticles.preset.links.min.js/script脚本加载完成后loadLinksPreset会被挂载到全局见 presets/links/src/browser.ts 中globalObject.loadLinksPreset loadLinksPreset然后初始化(async () { await loadLinksPreset(tsParticles); await tsParticles.load({ id: tsparticles, options: { preset: links, }, }); })();这段代码同时适用于 Vanilla JS 与 jQuery 场景只要你页面上有tsParticles全局对象就可以按此模式启动连线效果。四、npm 安装与 ESM / CommonJS 用法在模块化项目Vite、Webpack、Node 等中通过 npm 安装预设包npm install tsparticles/preset-links或使用 yarnyarn add tsparticles/preset-links安装后即可在应用中导入并调用import { tsParticles } from tsparticles/engine; import { loadLinksPreset } from tsparticles/preset-links; (async () { await loadLinksPreset(tsParticles); await tsParticles.load({ id: tsparticles, options: { preset: links, }, }); })();若使用 CommonJS只需把import换成require即可。tsparticles/preset-links的 package.json 同时导出了 ESMdist/esm、CommonJSdist/cjs、浏览器dist/browser和 UMDdist/umd多套产物并在exports中声明了./lazy子路径用于按需懒加载。五、自定义选项覆盖预设配置重要提醒和任何标准 tsParticles 安装一样你可以像普通配置那样直接覆盖preset: links之外的所有属性二者可以共存。tsParticles.load({ id: tsparticles, options: { particles: { shape: { type: square, // 注意从 v2 起使用 square 形状需要额外加载 square 形状脚本 }, }, preset: links, }, });如上面的示例把shape.type改为square后默认的圆形粒子会被正方形替换连线效果照常工作。这里的原理是预设名对应的默认配置与你在 options 里写的覆盖项会进行深度合并loadProperty/OptionsColor.create等加载器逐字段合并见下文 Links 类实现。六、links 核心参数详解particles.links是连线效果的核心配置块。其选项类实现在 interactions/particles/links/src/Options/Classes/Links.ts官方参数文档见 markdown/Options/Particles/Links.md。完整参数如下Key类型默认值说明enablebooleanfalse是否激活连线绘制distancenumber100两个粒子之间连线出现的最大像素距离color颜色对象 / 字符串#fff连线颜色opacitynumber1连线不透明度0–1widthnumber1连线宽度像素blinkbooleanfalse当color为random时让连线以不同随机颜色闪烁consentbooleanfalse当color为random时所有连线共享同一个随机颜色frequencynumber1连线出现频率值越小连线越稀疏idstring无分组 ID只有id相同的粒子之间才会连线warpbooleanfalse连线是否环绕画布边缘粒子从一侧出去、另一侧连线依然成立shadowobject见下连线阴影辉光选项trianglesobject见下由三个相邻连线的粒子构成的三角形填充选项6.1 基础连线网络{ links: { enable: true, distance: 150, color: #ffffff, opacity: 0.4, width: 1 } }6.2 随机颜色闪烁连线{ links: { enable: true, distance: 120, color: random, blink: true, opacity: 0.6 } }需要说明的是blink与consent的配合关系二者都要求color为randomconsent: true时所有连线共用同一个随机颜色整体统一blink: true时连线颜色会在不同随机色之间切换闪烁。当二者同时开启时consent优先。底层逻辑见 interactions/particles/links/src/Linker.ts 的#setColor方法getLinkRandomColor(pluginManager, linksOptions.color, linksOptions.blink, linksOptions.consent)会一次性生成颜色并缓存在container.particles.linksColor无id时或linksColorsMap按id分组时中。6.3 连线三角形填充{ links: { enable: true, distance: 150, color: #4f46e5, triangles: { enable: true, color: #4f46e5, opacity: 0.1 } } }开启triangles.enable后三个互相连线的粒子之间的区域会被填充为半透明三角形形成类似网面的立体观感。三角形选项类见 interactions/particles/links/src/Options/Classes/LinksTriangle.ts其绘制逻辑在 interactions/particles/links/src/LinkInstance.ts 的#drawTriangles方法中遍历三个粒子用context.fill()绘制闭合三角形路径。注意三角形填充也会受frequency控制——links.triangles.frequency决定三角形出现的频率。6.4 分组连线仅同组粒子相连{ particles: { groups: { teamA: { links: { enable: true, id: teamA, color: #ff0000 } }, teamB: { links: { enable: true, id: teamB, color: #0000ff } } } } }设置links.id后只有id相同的粒子之间才会连线——同组粒子用同一种颜色不同组之间互不连线。从 Linker.ts 的interact方法可以看到过滤逻辑linkOpt1.id ! linkOpt2.id时直接跳过该粒子对。这也意味着如果设置了id却没有配合 groups 使用孤立的粒子不会与任何粒子连线。6.5 连线阴影辉光links.shadow可以为连线添加发光效果其选项类见 interactions/particles/links/src/Options/Classes/LinksShadow.tsKey类型默认值说明enablebooleanfalse是否启用阴影blurnumber5阴影模糊半径像素color颜色对象 / 字符串#000阴影颜色{ links: { enable: true, shadow: { enable: true, blur: 5, color: #00ffff } } }6.6 warp连线环绕画布warp: true是一个很有意思的进阶选项粒子在画布边缘被卷绕时连线会跟着环绕让离开画布的粒子在另一侧依然与画布内的粒子保持连线。实现上Linker.ts 使用CircleWarp作为查询范围并用getWarpDistance计算考虑画布环绕后的最短距离绘制时 LinkInstance.ts 会根据link.isWarped标记在画布两端各绘制一条连线段从而形成线从一侧穿出、另一侧穿入的连续观感。七、实现原理loadLinksPreset 做了什么从源码结构看loadLinksPreset的本质是组合加载 注册预设。见 presets/links/src/index.tsexport async function loadLinksPreset(engine: Engine): Promisevoid { await engine.pluginManager.register(async e { await Promise.all([ loadBasic(e), (async (): Promisevoid { await loadInteractivityPlugin(e); await loadParticlesLinksInteraction(e); })(), ]); e.pluginManager.addPreset(presetName, options); }); }调用链如下loadBasic(e)加载基础运行时 bundle粒子生成、移动、绘制等最小能力loadInteractivityPlugin(e)加载交互插件基础框架——Linker正是继承自该插件提供的ParticlesInteractorBaseloadParticlesLinksInteraction(e)注册粒子间连线交互Linker与连线绘制插件LinksPlugin见 interactions/particles/links/src/LinksPlugin.tsaddPreset(links, options)把默认配置与预设名绑定供preset: links使用。此外还提供懒加载入口 presets/links/src/index.lazy.ts它通过import(tsparticles/basic/lazy)等动态import按需加载依赖适合希望减少首屏 bundle 体积的场景。八、依赖关系该预设加载并组合了以下包见 presets/links/package.json 的dependencies声明包在本预设中的角色tsparticles/basic预设使用的基础运行时 bundletsparticles/enginetsParticles 引擎与预设注册机制tsparticles/interaction-particles-links启用粒子之间的连线交互Linker、LinksPlugintsparticles/plugin-interactivity提供外部交互管道Interactor 基类依赖关系可用如下流程图概括源自 presets/links/README.md 的 mermaid 图如果你只需要连线交互而不需要整套预设可以直接使用tsparticles/interaction-particles-links包按 interactions/particles/links/README.md 中的方式手动加载loadInteractivityPlugin与loadParticlesLinksInteraction。九、常见坑与排查根据官方 README 与源码逻辑最容易踩的坑有三个在loadLinksPreset(tsParticles)之前调用tsParticles.load(...)预设尚未注册preset: links会无法解析。务必保证加载函数先执行完毕这也是推荐用await的原因。更换粒子形状却不加载对应形状包例如把shape.type改成square却未加载 square 形状脚本。从 v2 起非内置形状都需要额外的形状包支持。粒子太少或links.distance过大时看不到连线连线只发生在相互靠近的粒子之间。若粒子数量很少如 5 个或者distance设得过大画布上可能一条线都不出现。源码中 Linker.ts 以particle.retina.linksDistance为半径做空间查询container.particles.grid.query(range)只有落在该圆内的粒子对才可能生成连线同时连线透明度会随距离衰减opacityLine (1 - distance / optDistance) * optOpacity越远越淡。调试时建议先保持 100 个左右的粒子与 100–150px 的默认距离再逐步调整。另外两点补充提示见 markdown/Options/Particles/Links.md使用links需要加载包含它的 bundle——tsparticles/slim或更高版本tsparticles/basic本身不含 links 能力这也是为什么本预设要显式加载interaction-particles-links。设置id却不配置 groups会导致孤立粒子完全不连线同理blink: true与consent: true同时开启时以consent为准。十、在框架组件库中使用如果使用 React、Vue、Angular、Svelte、jQuery、Preact 等框架的 tsParticles 组件库wrapper接入方式不变调用loadLinksPreset替代loadFull/loadSlim等加载函数然后在组件配置中设置preset: links。上文介绍的全部 options 对所有组件库同样有效你可以把preset与其他配置项一起传给组件的 options 属性。总结tsParticles Links 预设把粒子连线网络这一经典动效封装为一条指令加载预设 → 设置preset: links。在此基础上particles.links的十余个参数覆盖了颜色、距离、透明度、随机闪烁、分组、边缘环绕、三角形填充与辉光阴影等全部定制维度而loadLinksPreset的源码也清楚地展示了 tsParticles 基础 bundle 交互 插件 预设的分层组合架构。若需要更细粒度的控制可进一步阅读仓库中的 interactions/particles/links 源码与 markdown/Options/Particles/Links.md 参数文档或参考 markdown/Options/Interactivity.md 了解交互选项的全貌。【免费下载链接】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），仅供参考