tsParticles NeonCity 调色板完整指南安装、配色与源码实现解析【免费下载链接】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导读NeonCity霓虹之城是 tsParticles 官方提供的一套赛博朋克风格粒子调色板适合用作网页动效背景。本指南将围绕该调色板的完整使用流程展开覆盖 CDN 与 npm 安装、加载函数调用、调色板应用方式以及自定义覆盖等实操细节并结合本仓库tsparticlesmonorepo中的引擎与调色板源码讲解调色板从注册到生效的底层原理帮助读者真正掌握调色板 ≠ 完整行为配置这一核心用法。NeonCity 调色板是什么NeonCity 调色板定义了一组霓虹系配色目标是在深色背景下呈现类似城市夜景霓虹灯牌的氛围。它本身只提供颜色语义不包含粒子行为——粒子数量、运动方式、形状等仍由你通过标准tsParticles选项自行配置。从 options.ts 的源码可以看到它的全部定义import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Neon City, background: #05000f, blendMode: screen, colors: { fill: { enable: true, value: [ #FF0044, #FF00AA, #FF00FF, #8800FF, #0044FF, #00AAFF, #00FFFF, #00FF88, ], }, }, };该调色板在仓库中的位置为 palettes/tech/neonCity/npm 包名为tsparticles/palette-neon-city见 package.json。配色一览NeonCity 的霓虹色系包含 8 个填充色外加 1 个背景色。以下为完整色值清单对应 README.md 中的 Colors 章节色值色相倾向#FF0044霓虹红#FF00AA品红#FF00FF洋红/紫红#8800FF紫色#0044FF蓝色#00AAFF天蓝#00FFFF青色#00FF88霓虹绿背景色#05000f接近纯黑的深蓝紫模拟夜空底色渲染参数Blend mode: screen、Fill: true其中screen混合模式意味着粒子的颜色会与背景以滤色方式叠加让霓虹光色更亮、更具发光感Fill: true表示粒子使用填充色渲染。这两项属性由源码中的blendMode: screen与colors.fill.enable: true分别对应。示例效果图见 images/sample.png以黑色为底霓虹红、粉、蓝、绿、紫等光点随机分布、大小不一呈现流动闪烁的城市霓虹灯观感。快速上手清单在开始编码前请确认以下三个步骤对应原文档 Quick checklist安装tsparticles/engine或直接使用下面的 CDN 包加载一个基础包例如tsparticles/basic并在tsParticles.load(...)之前调用loadNeonCityPalette在 options 中应用调色板palette: neonCity并补充一份最小粒子配置。关键认知调色板只定义颜色不定义完整行为因此必须搭配一个运行时基础包和粒子选项使用。安装与使用CDN / Vanilla JS / jQuery在 HTML 中依次引入基础包与调色板包script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-neonCity4/tsparticles.palette-coloredSmokeAmber.min.js/script说明调色板包的 UMD 文件名沿用了历史命名tsparticles.palette-coloredSmokeAmber.min.js见 package.dist.json 中的jsdelivr/unpkg字段这是发布产物名称包内功能即 NeonCity 调色板。脚本加载后的初始化(async engine { await loadBasic(engine); await loadNeonCityPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: neonCity, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段示例展示了最小可运行组合200 个圆形粒子、尺寸 10–15、缓慢移动speed 2颜色则交给palette: neonCity自动填充。npm / ESM 使用调色板包的主入口通过 package.json 的exports字段暴露多种模块格式ESM / CJS / UMD / Browser并有独立的./lazy懒加载入口import { loadNeonCityPalette } from tsparticles/palette-neon-city; await loadBasic(engine); await loadNeonCityPalette(engine);如需懒加载按需动态 import减少首屏体积可使用import { loadNeonCityPalette } from tsparticles/palette-neon-city/lazy;调色板的加载机制源码级原理注册阶段把颜色表挂到引擎上loadNeonCityPalette的实现位于 index.tsexport async function loadNeonCityPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }它通过engine.pluginManager.register(...)把neon-city名称与options调色板对象注册进引擎的调色板表palettes: Mapstring, IPalette见 PluginManager.ts。注意注册时的键是neon-city而示例 options 中写的是neonCity——tsParticles 对调色板名称匹配做了规范化处理文档示例沿用 neonCity 写法可正常工作。懒加载入口 index.lazy.ts 则将./options.js改为动态import延迟到调用时才加载颜色数据。生效阶段把调色板映射为标准选项当引擎加载带有palette字段的配置时Options.ts 会调用#importPalette(palette)#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 }, }); }从中可以清晰看到调色板背后的三条映射规则background: #05000f→ 被注入为标准background.colorblendMode: screen→ 被注入为标准blend配置enable: true, mode: screen粒子颜色 → 由particles.palette指向已注册的调色板在 ParticlesOptions.ts 中再次经getPalette(palette)取出并使用。也就是说调色板只是颜色模板最终仍会展开成你熟悉的标准 tsParticles 选项背景色、混合模式、粒子色这也是为什么调色板必须搭配基础包 粒子行为选项。自定义与覆盖重要提示调色板并不限制你后续覆盖任何属性。你可以像标准 tsParticles 安装一样在 options 中显式定义任何字段来覆盖调色板带来的默认值。例如保持霓虹配色但改变粒子行为与密度const options { background: { color: #0a0a1a }, // 覆盖调色板默认背景 particles: { number: { value: 120 }, shape: { type: circle }, size: { value: { min: 4, max: 9 } }, move: { enable: true, speed: 3, outModes: out }, }, palette: neonCity, // 颜色仍来自调色板 };也可以不使用palette字段而是直接把颜色写入particles.color.value此时调色板只作为配色参考。两种方式都受引擎标准选项解析支持。在框架组件中使用若你使用 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 或 Web Components 等 tsParticles 组件库同样只需调用loadNeonCityPalette即可先加载对应框架组件库再在组件初始化阶段调用该函数注册调色板随后在组件配置对象中传入palette: neonCity与粒子选项。具体 API 形态以对应组件库文档为准调用函数的注册时机须早于粒子实例创建。与 Preset预设的区别调色板Palette与预设Preset是两种不同粒度的概念Preset提供一组完整的源配置ISourceOptions包含粒子行为、形状、交互等例如presets/fireworks、presets/confetti等目录下的产物见 presets/Palette只提供颜色相关定义IPalette背景色、混合模式、填充/描边色不包含行为逻辑。NeonCity 属于后者因此原文档特别强调A palette defines colors, not complete behavior使用时必须自行补充粒子选项这也是最容易踩的坑。小结三行代码即可接入加载基础包 →loadNeonCityPalette(engine)→ 配置palette: neonCity调色板仅贡献颜色背景#05000f、screen 混合模式、8 个霓虹填充色所有标准选项均可覆盖调色板不影响你对粒子行为的完全控制从源码看调色板最终会展开为background、blend与particles.palette三部分标准配置理解这条链路有助于排查颜色没生效类问题。相关参考调色板定义与类型接口见 IPalette.ts支持fill/stroke、透明度与宽度范围完整调色板加载链路见 PluginManager.ts 与 Options.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），仅供参考