tsParticles Water Splash 水花调色板实战指南一行配置打造水色粒子背景【免费下载链接】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 Splash 调色板文档 为核心系统讲解tsparticles/palette-water-splash调色板的色板结构、三步接入流程、CDN 与包管理两种安装方式并结合引擎源码剖析palette选项从注册、查找到注入背景、混合模式与粒子填充色的完整调用链。读完本文你将能够在任意 tsParticles 场景中独立使用并自定义 splash 水花调色板。调色板是什么色板 ≠ 完整行为tsParticles 的调色板palette与预设preset定位不同preset 定义整套可运行配置而 palette 只定义颜色。正如关联文档所强调的A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.也就是说调色板解决粒子该用什么颜色、背景是什么、用什么混合模式这一类视觉问题而粒子的数量、形状、运动、生命周期等行为仍由普通particles选项决定。因此使用 splash 调色板必须同时加载一个运行时基础包如tsparticles/basic并编写最小粒子配置。引擎用IPalette接口约束调色板结构见 engine/src/Core/Interfaces/IPalette.tsexport interface IPalette { background: string; // 背景色 blendMode: GlobalCompositeOperation; // 画布混合模式 colors: SingleOrMultipleIPaletteColors; // 颜色集合可单组或多组 name: string; // 调色板名称 }其中IPaletteColors又分为fill填充色含enable、可选opacity与value和stroke描边色含opacity、value与width两部分见 IPalette.ts。splash 调色板只使用了fill部分。色板数据解剖Water Splash 的 6 1 色splash 调色板的完整定义位于 palettes/water/splash/src/options.tsimport { type IPalette } from tsparticles/engine; export const options: IPalette { name: Water Splash, background: #001828, blendMode: source-over, colors: { fill: { enable: true, value: [ #FFFFFF, #DDEEFF, #AACCEE, #6699CC, #336699, #224466, ], }, }, };将关联文档中的颜色表整理如下类型色值说明填充色#FFFFFF水花高光 / 泡沫白填充色#DDEEFF极浅蓝白填充色#AACCEE浅蓝填充色#6699CC中蓝填充色#336699深蓝填充色#224466最深蓝背景色#001828深海夜幕底色混合模式source-overCanvas 默认混合模式填充启用true粒子使用填充色从配色逻辑看6 个填充色构成一条泡沫白 → 极浅蓝 → 中蓝 → 深蓝的递进序列模拟水花飞溅时高光与水体深浅的层次过渡背景#001828是接近墨蓝的深海色衬托出水花粒子的明亮感。该色板刻意选择source-overCanvas 默认混合模式而非叠加类模式保证粒子之间是普通的覆盖绘制视觉上更接近真实水花而非发光特效。快速清单三步接入关联文档给出了简洁的接入清单完整继承如下安装tsparticles/engine或直接使用下方的 CDN bundle加载一个基础包例如tsparticles/basic并在tsParticles.load(...)之前调用loadSplashPalette注册调色板在 options 中设置palette: splash并补充最小粒子配置。其中第 2 步是关键——调色板必须先注册、后使用。原因见引擎的 PluginManager.tsregister()只允许在首次tsParticles.load()之前调用插件加载器否则会抛出 Register plugins can only be done before calling tsParticles.load()。而addPalette正是把调色板写入PluginManager内部的palettesMap见 PluginManager.ts后续通过getPalette(name)按名查找见 PluginManager.ts。CDN / 原生 JavaScript / jQuery 接入在 HTML 中通过 CDN 引入基础包与调色板包以下 script 标签沿用关联文档写法其中调色板包的 bundle 文件名以 npm 上实际发布为准script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-splash4/tsparticles.palette-coloredSmokeAmber.min.js/script需要说明仓库 palettes/water/splash/package.json 中该包的正式名称为tsparticles/palette-water-splash且提供了loadWaterSplashPalette见 index.ts与懒加载入口loadSplashPalette见 index.lazy.ts两个函数。若使用 npm 安装推荐按下方包管理安装一节的代码导入。CDN 场景下 bundle 已自动完成注册无需手工调用。脚本加载完成后即可初始化tsParticles(async engine { await loadBasic(engine); await loadSplashPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: splash, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这份最小配置对应200 个圆形粒子、半径 1015、以速度 2 缓慢漂移的水花效果粒子颜色不再逐一手写而是由palette: splash自动从色板取色。CDN 的 jQuery 用法与原生 JavaScript 一致只需在$(document).ready中执行同样的初始化逻辑。源码级原理palette 选项的导入链路设置palette: splash后引擎内部发生了三次注入。以 engine/src/Options/Classes/Options.ts 为起点顶层 Options 处理doLoad()检测到data.palette ! undefined后调用#importPalette(this.palette)。该方法通过pluginManager.getPalette(palette)按名取回IPalette再递归load()注入三段配置见 Options.tsbackground.color← 调色板的background#001828即深海背景色blend.enable true且blend.mode← 调色板的blendModesource-overparticles.palette← 调色板名称交由粒子层继续处理。粒子层取色在 engine/src/Options/Classes/Particles/ParticlesOptions.ts 的#importPalette()中引擎读取paletteData.colors将每个颜色组含fill/stroke映射为IPaint填充变体fill.color.value← 色板的 6 个填充色值并保留enable与opacity。这就是粒子能自动从 6 色中取色的底层机制。底层取色能力basic基础包通过 bundles/basic/src/index.ts 的loadBasic()一并注册了blend插件、circle形状、move移动插件、paint/opacity/outModes/size四个 updater 以及十六进制、HSL、RGB 三种颜色插件——其中paintupdater 与blend插件正是让填充色 混合模式真正生效的运行时依赖。这也解释了为何文档要求先加载基础包再调用调色板加载函数。包管理安装与各框架使用在 npm / pnpm 项目中推荐使用懒加载入口以优化首包体积npm install tsparticles/engine tsparticles/basic tsparticles/palette-water-splash # 或 pnpm add tsparticles/engine tsparticles/basic tsparticles/palette-water-splashimport { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadSplashPalette } from tsparticles/palette-water-splash/lazy; async function init(): Promisevoid { await loadBasic(tsParticles); await loadSplashPalette(tsParticles); await tsParticles.load({ id: tsparticles, options: { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2 }, }, palette: splash, }, }); } void init();仓库为调色板包同时暴露了两个入口见 package.json主入口tsparticles/palette-water-splash同步导出loadWaterSplashPalette通过 index.ts 以water-splash为名注册调色板懒加载入口tsparticles/palette-water-splash/lazy导出loadSplashPalette通过 index.lazy.ts 动态import(./options.js)后以splash为名注册配置代码不进入首屏 bundle。两个入口注册的调色板名不同water-splash与splashoptions 中的palette字段需与所调用函数一一对应使用loadSplashPalette时写palette: splash如关联文档示例使用loadWaterSplashPalette时写palette: water-splash。对于 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等框架tsParticles 均有对应的官方组件库见 wrappers 目录。使用方式一致在组件初始化时调用loadSplashPalette或loadWaterSplashPalette完成注册再把palette选项传给组件即可无需额外的框架专有配置。浏览器环境非模块下browser.ts 会将loadWaterSplashPalette挂载到globalThis可直接通过全局对象调用。自定义在调色板之上覆盖任意选项关联文档特别提示Important ⚠️调色板并不锁死配置——你可以像任何标准 tsParticles 安装那样通过显式定义属性来覆盖所有选项。例如在 splash 色板基础上调整粒子密度与运动节奏const options { particles: { number: { value: 120 }, // 覆盖粒子数量 shape: { type: circle }, size: { value: { min: 4, max: 12 } }, // 覆盖粒子尺寸 opacity: { value: 0.8 }, // 追加透明度控制 move: { enable: true, speed: 1.5, // 覆盖运动速度 direction: top, // 让粒子向上漂浮更像水花 outModes: { default: out }, }, }, palette: splash, // 仅颜色来自调色板 background: { color: #001828 }, // 亦可显式指定背景 };注意覆盖的优先级显式书写的particles等选项与调色板注入的配置合并后以你的显式值为准若想更换背景色直接设置background.color即可覆盖色板背景。若需更换混合模式可设置blend.mode需配合tsparticles/plugin-blendloadBasic已包含。延伸Water 系列调色板splash 只是 tsParticles Water 色板系列palettes/water 目录的一员。同目录下还包含deepOcean深海、default默认水色、foamAndBubbles泡沫与气泡、fogCoastal海岸薄雾、inkInWater水中墨迹、lagoon环礁湖、rain雨滴、risingBubbles上升气泡等调色板。它们的包结构完全一致options.ts定义色板 index.ts/index.lazy.ts提供注册函数接入方式与本文所述 splash 完全相同——只需替换色板包与其加载函数名即可在数十种水主题配色间快速切换为网站背景、登录页或活动页提供风格统一的水系粒子视觉。更多仓库内参考全部调色板与预设的目录结构见 palettes 与 presets基础运行时能力见 bundles/basic引擎级调色板机制见 engine/src/Core/Utils/PluginManager.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），仅供参考
