tsParticles Water 调色板tsparticles/palette-water完整指南安装加载、配色解析与自定义实践【免费下载链接】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 粒子引擎的Water水色调色板展开重点讲解位于 palettes/water/default 目录下的 Water - Full 调色板它的配色构成、加载方式、与基础粒子配置的组合用法以及它在引擎底层是如何被解析生效的。读完本文你将掌握如何在原生 JavaScript、CDN 或各类框架组件中一键启用水蓝色系粒子背景并学会在调色板基础上继续覆盖自定义参数。Water 调色板运行效果预览什么是 tsParticles 调色板Palette在 tsParticles 中调色板Palette定义的是“颜色”而不是“完整行为”。它只负责提供一套可复用的色彩方案包括粒子填充色、描边色、画布背景色与混合模式粒子的数量、形状、运动轨迹等仍由你自行配置的particles选项决定。正如本调色板 README 中明确指出的A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.调色板的结构由引擎接口IPalette定义位于 engine/src/Core/Interfaces/IPalette.ts其字段如下字段类型说明namestring调色板名称展示用backgroundstring画布背景色blendModeGlobalCompositeOperationCanvas 混合模式如source-overcolorsSingleOrMultipleIPaletteColors一组或多组颜色配置每组可含fill填充与stroke描边colors.fillIPaletteColorsFill填充色配置enable开关、value单个或多个颜色值、opacity透明度范围colors.strokeIPaletteColorsStroke描边色配置value、opacity、width描边宽度范围Water - Full一套完整的水蓝色系方案本目录对应 npm 包tsparticles/palette-water见 palettes/water/default/package.json调色板展示名为Water - Full。它的完整定义位于 palettes/water/default/src/options.ts源码如下import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Water - Full, background: #001428, blendMode: source-over, colors: { fill: { enable: true, value: [ #FFFFFF, #DDEEFF, #AADDFF, #55AAFF, #0077FF, #0044CC, #002299, #001166, ], }, }, };调色板颜色表该调色板由 8 种从浅到深的蓝色系粒子填充色 1 个深蓝背景色组成色彩数值如下与原文档保持一致色块色值用途#FFFFFF纯白粒子填充色#DDEEFF极浅蓝粒子填充色#AADDFF浅蓝粒子填充色#55AAFF中蓝粒子填充色#0077FF亮蓝粒子填充色#0044CC深蓝粒子填充色#002299更深蓝粒子填充色#001166墨蓝粒子填充色#001428深海军蓝画布背景色Background混合模式Blend modesource-over填充Filltrue填充色启用从深不见底的午夜蓝背景到白色高光这组色阶模拟了水下光线的衰减与折射适合用作深色主题网站的动效背景或水滴/深海风格视觉。快速上手三步清单原文档给出的使用流程可归纳为三步安装tsparticles/engine或直接使用下面的 CDN 打包文件加载一个基础运行时包例如tsparticles/basic并在调用tsParticles.load(...)之前调用调色板加载函数在选项中应用调色板同时提供一个最小的粒子配置。需要特别说明的是本目录的 README 是 tsParticles 各调色板包共用的模板文中出现的loadDefaultPalette、coloredSmokeAmber等字样属于模板占位。以本仓库源码为准该包实际导出的加载函数是loadWaterPalette注册到引擎的调色板键名是water见 palettes/water/default/src/index.ts 与 palettes/water/default/src/browser.ts。安装与加载方式方式一CDN / Vanilla JS / jQuery在页面中依次引入基础包与调色板包4.x 版本script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-water4/tsparticles.palette-water.min.js/scriptCDN 加载后loadWaterPalette会被挂载到全局对象上这一点由 palettes/water/default/src/browser.ts 中的globalObject.loadWaterPalette loadWaterPalette保证因此可以直接调用。方式二npm / pnpm 安装 ES Module 导入npm install tsparticles/engine tsparticles/basic tsparticles/palette-water或使用 pnpm本仓库采用 pnpm workspace 管理引擎通过workspace:*依赖引入pnpm add tsparticles/engine tsparticles/basic tsparticles/palette-water在代码中按需导入import { loadBasic } from tsparticles/basic; import { loadWaterPalette } from tsparticles/palette-water;懒加载变体Lazy如果你希望调色板定义颜色数组在真正使用时才动态加载可以使用tsparticles/palette-water/lazy子路径导出。其实现见 palettes/water/default/src/index.lazy.ts它通过await import(./options.js)延迟加载颜色配置适用于需要控制首屏体积的场景。完整用法示例脚本加载完成后即可这样初始化 tsParticles示例中保留了原文档的完整配置(async engine { await loadBasic(engine); await loadWaterPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: water, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);参数说明loadBasic(engine)加载基础运行时提供圆形circle等基础形状与运动能力loadWaterPalette(engine)必须在engine.load(...)之前调用否则引擎无法按palette: water找到调色板palette: water顶层选项中通过该键引用已注册的调色板键名对应源码中的paletteName waterparticles.number.value: 200粒子总数particles.size.value: { min: 10, max: 15 }粒子半径在 1015 之间随机取值particles.move开启运动速度为2。这里刻意只配置了“数量 形状 大小 运动”颜色完全交给调色板——这正是调色板与 preset预设的分工差异preset 自带完整行为配置而调色板只负责色彩层。底层原理调色板如何被引擎解析理解调色板的加载链路有助于排查为什么颜色没生效之类的问题。1. 注册PluginManager 中的调色板表调色板以名称, IPalette键值对的形式存储在引擎的PluginManager中见 engine/src/Core/Utils/PluginManager.tsaddPalette(name, palette)L163-L165向palettesMap 写入调色板getPalette(name)L247-L249按名称取出调色板。loadWaterPalette的实现正是通过插件管理器完成注册export async function loadWaterPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }2. 应用importPalette 把颜色映射到粒子选项当你的配置中出现palette: water时引擎会在两处触发调色板导入顶层Options类将paletteData.background映射为画布背景色、paletteData.blendMode映射为混合模式见 engine/src/Options/Classes/Options.ts 中的#importPaletteL142-L158粒子级ParticlesOptions类将调色板的colors.fill.value颜色数组映射为粒子的paint.fill.color并把blendMode写入粒子的混合选项同时自动开启blend.enable: true见 engine/src/Options/Classes/Particles/ParticlesOptions.ts 中的#importPaletteL124-L183。从源码实现看当colors是数组多组颜色配置时引擎会把它们展平为多个 paint 变体供粒子随机使用本调色板只提供了一组fill颜色数组因此所有粒子会在#FFFFFF到#001166这 8 个色值之间取色。这解释了为何只需一个palette字段就能让整个粒子群呈现统一的水色系渐变效果。自定义与覆盖重要调色板导入后你依然可以像在标准 tsParticles 安装中一样通过定义同名属性覆盖所有选项。例如在应用palette: water的基础上你还可以const options { particles: { number: { value: 150 }, shape: { type: circle }, size: { value: { min: 5, max: 25 } }, move: { enable: true, speed: 3 }, // 手动覆盖粒子颜色优先于调色板填充色 color: { value: #00FFFF }, }, background: { color: #000000 }, // 覆盖调色板背景色 #001428 palette: water, };几点实践建议调色板提供的是一种色彩基线适合先跑通整体视觉再按需微调若需不同的混合模式如lighter叠色发光效果可在blend选项中覆盖blendMode若希望粒子带描边可在IPalette的colors.stroke中补充value、opacity与width引擎会自动生成带描边的 paint 变体。在框架组件中使用对于 React、Vue、Angular、Svelte、jQuery、Preact、Solid 等使用 tsParticles 官方组件库的场景流程相同在组件初始化前调用loadWaterPalette(engine)即可。组件库的接入细节以对应组件库仓库的文档为准核心仍是先注册调色板再加载容器这一顺序约束。延伸Water 调色板家族water是一个调色板家族除了本文讲解的 defaultWater - Full外palettes/water 目录下还包含deepOcean深海、foamAndBubbles泡沫与气泡、fogCoastal海岸薄雾、inkInWater水中墨迹、lagoon泻湖、rain雨、risingBubbles上升气泡、splash水花等多个子调色板结构与此一致各自通过loadXxxPalette注册独立的调色板键名再配合基础包与粒子选项即可使用。如果你需要进一步了解粒子选项、paint 混合与背景配置可查阅仓库中的 engine/src/Options 目录及 markdown/Options 文档目录。【免费下载链接】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），仅供参考