企业官网建设流程全解析

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，其字段如下：

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 个深蓝背景色组成，色彩数值如下（与原文档保持一致）：

• 混合模式（Blend mode）：source-over
• 填充（Fill）：true（填充色启用）

从深不见底的午夜蓝背景到白色高光，这组色阶模拟了水下光线的衰减与折射，适合用作深色主题网站的动效背景或"水滴/深海"风格视觉。

快速上手：三步清单

原文档给出的使用流程可归纳为三步：

1. 安装@tsparticles/engine（或直接使用下面的 CDN 打包文件）；
2. 加载一个基础运行时包（例如@tsparticles/basic），并在调用tsParticles.load(...)之前调用调色板加载函数；
3. 在选项中应用调色板，同时提供一个最小的粒子配置。

需要特别说明的是：本目录的 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 src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@4/tsparticles.basic.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-water@4/tsparticles.palette-water.min.js"></script>

CDN 加载后，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 = "water"）；
• particles.number.value: 200：粒子总数；
• particles.size.value: { min: 10, max: 15 }：粒子半径在 10～15 之间随机取值；
• particles.move：开启运动，速度为2。

这里刻意只配置了“数量 + 形状 + 大小 + 运动”，颜色完全交给调色板——这正是调色板与 preset（预设）的分工差异：preset 自带完整行为配置，而调色板只负责色彩层。

底层原理：调色板如何被引擎解析

理解调色板的加载链路，有助于排查"为什么颜色没生效"之类的问题。

1. 注册：PluginManager 中的调色板表

调色板以<名称, IPalette>键值对的形式存储在引擎的PluginManager中（见 engine/src/Core/Utils/PluginManager.ts）：

• addPalette(name, palette)（L163-L165）：向palettesMap 写入调色板；
• getPalette(name)（L247-L249）：按名称取出调色板。

loadWaterPalette的实现正是通过插件管理器完成注册：

export async function loadWaterPalette(engine: Engine): Promise<void> { 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 中的#importPalette，L142-L158）；
• 粒子级ParticlesOptions类：将调色板的colors.fill.value颜色数组映射为粒子的paint.fill.color，并把blendMode写入粒子的混合选项，同时自动开启blend.enable: true（见 engine/src/Options/Classes/Particles/ParticlesOptions.ts 中的#importPalette，L124-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是一个调色板家族，除了本文讲解的 default（Water - 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