tsParticles Network Nodes 调色板实战指南用蓝调粒子快速构建科技网络节点背景【免费下载链接】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 生态中的tsparticles/palette-network-nodes调色板展开讲解它是什么、包含哪些颜色、如何在 CDN / Vanilla JS / 框架组件中加载使用并深入引擎源码揭示调色板palette从注册、查找到自动应用到画布与粒子上的完整机制。读完本文你将能独立搭建一个深色科技风、带网络节点质感的粒子背景并理解 palette 与 preset、普通粒子配置之间的边界与协作方式。什么是 Network Nodes 调色板networkNodes是 tsParticles 官方调色板系列palettes目录中面向tech科技主题的一款npm 包名为tsparticles/palette-network-nodes当前仓库中版本为 4.3.3见 palettes/tech/networkNodes/package.json。它的视觉定位是网络节点 / 数据流动纯黑近黑的背景上散布着从深蓝到浅蓝渐变的圆形节点模拟数字空间、数据网络或星空般的抽象科技感。官方 READMEpalettes/tech/networkNodes/README.md明确强调一个核心概念A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.即调色板只定义颜色不定义完整行为。它必须与一个运行时基础包如tsparticles/basic以及一份最小的粒子配置配合使用。这与 preset预设不同preset 会注入一整套完整配置而 palette 只负责配色方案这一层。颜色构成从源码确认的完整色板README 给出了完整的颜色表。我在 palettes/tech/networkNodes/src/options.ts 中找到了这份调色板的源码定义两者完全一致用途色值说明前景粒子 1#003366深海军蓝最暗的节点色前景粒子 2#0055AA中等深蓝前景粒子 3#0088FF亮蓝视觉主色前景粒子 4#44AAFF明亮天蓝前景粒子 5#88CCFF浅蓝前景粒子 6#CCEEFF近白浅蓝高光点缀背景Background#040810近黑的深蓝黑营造夜空/深空氛围同时 README 明确标注了该调色板的两个关键渲染属性混合模式Blend modescreen填充Filltrue对应到源码options.ts就是blendMode: screen与colors.fill.enable: true。screen混合模式会让重叠粒子的颜色叠加提亮形成光点交叠的网络感这正是网络节点效果通透发光的来源。快速上手指南官方 README 给出了三步清单我结合仓库结构逐一展开安装引擎tsparticles/engine或在浏览器中直接使用 CDN bundle加载基础包并注册调色板加载一个运行时包如tsparticles/basic并在tsParticles.load(...)之前调用loadNetworkNodesPalette应用调色板 最小粒子配置在 options 中设置palette: network-nodes并配合基础粒子参数之所以需要tsparticles/basic这样的基础包是因为 Network Nodes 调色板自身只注册颜色。查看 bundles/basic/src/index.lazy.ts 可以看到loadBasic(engine)会加载一系列基础能力其中与本调色板直接相关的有tsparticles/plugin-blend实现screen混合模式、tsparticles/plugin-hex-color等颜色解析插件、tsparticles/plugin-move粒子移动、tsparticles/shape-circle圆形节点形状、以及 opacity / out-modes / paint / size 等更新器——只有这些插件齐备调色板定义的颜色 混合模式才能真正渲染出效果。方式一CDN / Vanilla JS / jQuery在 HTML 中依次引入基础包 bundle 与调色板 bundlescript srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-network-nodes4/tsparticles.palette-network-nodes.min.js/script注意官方 README 中第二个script的src写为tsparticles.palette-coloredSmokeAmber.min.js与tsparticles/palette-network-nodes的包名不一致疑似从其他调色板文档复制时的笔误。本仓库的 npm 包名为tsparticles/palette-network-nodes见 palettes/tech/networkNodes/package.json实际使用时请以该包名对应的 bundle 文件名为准。两个脚本加载完成后window上会挂载tsParticles与loadNetworkNodesPalette两个全局函数——这一点可以从 palettes/tech/networkNodes/src/browser.ts 得到确认它把loadNetworkNodesPalette写入globalThis。随后即可初始化(async engine { await loadBasic(engine); await loadNetworkNodesPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: network-nodes, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段示例的核心要点loadBasic(engine)必须先执行保证 blend、move、circle 形状等插件就绪loadNetworkNodesPalette(engine)负责把调色板注册进引擎的插件管理器详见下文原理部分options 中palette字段的值必须与注册名完全一致。本调色板的注册名为network-nodes连字符形式见 palettes/tech/networkNodes/src/index.ts 中的paletteName常量。官方 README 示例中写的是networkNodes与注册名不一致会导致引擎查不到调色板而静默跳过——实际配置时请使用network-nodes。方式二npm / ES ModuleTypeScript现代构建环境Vite、Webpack、Node 侧渲染等推荐通过 npm 安装后以模块方式加载。引擎侧查找getPalette(name)是直接查 Map见下文原理因此加载函数、配置键都必须精确匹配import { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadNetworkNodesPalette } from tsparticles/palette-network-nodes; await loadBasic(tsParticles); await loadNetworkNodesPalette(tsParticles); await tsParticles.load({ id: tsparticles, options: { palette: network-nodes, background: { color: #040810 }, particles: { number: { value: 180 }, shape: { type: circle }, size: { value: { min: 8, max: 16 } }, move: { enable: true, speed: 1.5 }, }, }, });包还额外导出了/lazy入口tsparticles/palette-network-nodes/lazy对应源码 palettes/tech/networkNodes/src/index.lazy.ts它同样注册network-nodes但通过await import(./options.js)将调色板数据做动态懒加载适合希望把调色板数据拆到独立 chunk、按需加载的场景。package.json的exports字段中.与./lazy两条导出路径分别指向 ESM / CJS / UMD / 浏览器等多种产物。方式三带 tsParticles 组件库的框架React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等都有对应的 tsParticles 组件库本仓库的wrappers目录。在这些框架中步骤完全相同先加载基础包与调色板再在组件初始化选项中设置palette具体可查阅对应组件库文档并调用loadNetworkNodesPalette函数。自定义调色板之上仍可覆盖任意选项README 特别提醒在调色板基础上你仍然可以像标准 tsParticles 安装一样覆盖所有选项。因为调色板只做颜色 背景 混合模式这一层的注入粒子数量、形状、速度、尺寸、动画等全部由你自由控制。例如把number.value提高到 400、或把move.speed调大会得到更密集、更活泼的星云/网络效果而#importPalette注入的背景与 blend 配置也会被你在 options 中显式书写的对应配置覆盖加载顺序上后者生效。这种调色板定基调、配置调细节的组合正是 palette 设计的目的。底层原理调色板是如何被应用渲染的结合引擎源码可以完整还原palette: network-nodes从注册到渲染的调用链。1. 调色板的数据结构IPalette调色板对象的类型定义在 engine/src/Core/Interfaces/IPalette.ts包含四个字段export interface IPalette { /** 背景颜色 */ background: string; /** 画布混合模式 */ blendMode: GlobalCompositeOperation; /** 调色板颜色支持单组或多组 */ colors: SingleOrMultipleIPaletteColors; /** 调色板名称 */ name: string; }其中IPaletteColors可含可选的两类颜色配置fillIPaletteColorsFillenable是否启用填充色、opacity透明度范围、value单色或多色值strokeIPaletteColorsStrokeopacity、value以及width描边宽度范围。networkNodes的options.ts正是填充了这一接口单组fill颜色、enable: true、6 个蓝色色值外加background: #040810与blendMode: screen。2. 注册PluginManager.addPaletteloadNetworkNodesPalette(engine)的实现非常轻量palettes/tech/networkNodes/src/index.tsexport async function loadNetworkNodesPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }它把名字network-nodes与options数据交给引擎的插件管理器后者在 engine/src/Core/Utils/PluginManager.ts 中维护一个readonly palettes new Mapstring, IPalette()addPalette第 163 行负责写入、getPalette第 247 行负责按名取出。3. 应用Options.#importPalette当你在 options 中写入palette时引擎在 engine/src/Options/Classes/Options.ts 的doLoad中检测到data.palette ! undefined随即调用私有方法#importPalette第 142 行#importPalette(palette: string): void { const paletteData this.#pluginManager.getPalette(palette); if (!paletteData) { return; } this.load({ background: { color: paletteData.background }, blend: { enable: true, mode: paletteData.blendMode }, particles: { palette }, }); }可以看到调色板会被拆解注入三处背景色#040810、blend插件配置enable: truescreen模式、以及particles.palette。注意如果getPalette查不到例如注册名不匹配这里会直接return调色板被静默忽略——这就是上面强调network-nodes名称必须精确的原因。4. 上色ParticlesOptions.#importPalette粒子侧还会再次以palette字段触发 engine/src/Options/Classes/Particles/ParticlesOptions.ts 中的#importPalette第 124 行。它会取出paletteData.colors把每个颜色变体转换为引擎内部的IPaint绘制/填充配置包括fill.enable、fill.color.value、可选的opacity等并交给 paint 更新器tsparticles/updater-paint在每帧为粒子选择配色。整个过程与 README 中Fill: true的标注一一对应。这条链路完整解释了 README 快速清单中三条步骤的必然性没有基础包尤其plugin-blend、updater-paint、颜色解析插件调色板的混合模式与颜色无处生效没有先注册调色板palette字段查不到数据名称不一致则整段应用被静默跳过。相关文档与进一步阅读调色板与预设的完整目录说明见本仓库 palettes/README.md仓库内可查看palettes目录下各主题的 README 与源码引擎的调色板类型定义与插件管理器实现见 engine/src/Core/Interfaces/IPalette.ts 与 engine/src/Core/Utils/PluginManager.ts引擎侧 Options 的解析逻辑见 engine/src/Options/Classes/Options.ts 与 engine/src/Options/Classes/Particles/ParticlesOptions.ts基础包tsparticles/basic的插件组成见 bundles/basic/src/index.lazy.ts。【免费下载链接】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），仅供参考