tsParticles Thunderstorm 调色板实战指南：用紫色闪电粒子营造雷暴氛围背景

tsParticles Thunderstorm 调色板实战指南用紫色闪电粒子营造雷暴氛围背景【免费下载链接】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/tsparticlesThunderstorm雷暴调色板是 tsParticles 官方提供的一组预置配色方案以深紫、淡紫与白色粒子在近乎纯黑的背景上呈现闪电撕裂夜空的视觉氛围。本指南以tsparticles/palette-thunderstorm包为核心讲解其颜色构成、IPalette数据结构、加载方式、与tsparticles/basic等运行时包的组合用法并从引擎源码层面说明palette选项被解析与注入粒子样式的完整链路帮助你直接上手并二次定制。Thunderstorm 调色板是什么Thunderstorm 是 tsParticles 调色板体系palettes目录中的一个成员定位为只定义颜色、不定义完整行为的插件它不包含粒子数量、形状、运动等配置只提供一组色彩身份color identity。它的适用场景是当你已经有一套正确的粒子行为配置时只需通过palette选项引用它即可整体切换为雷暴氛围的配色而不需要手写一大段颜色数组。包名tsparticles/palette-thunderstorm注册函数loadThunderstormPalette(engine)调色板 IDthunderstorm当前版本4.3.3见 palettes/atmospheric/thunderstorm/CHANGELOG.md 与 package.json从源码结构看该调色板完整实现位于 palettes/atmospheric/thunderstorm/src由入口文件、懒加载入口、浏览器全局入口与选项定义四部分组成文件职责index.ts标准 ES 模块入口导出loadThunderstormPaletteindex.lazy.ts懒加载入口通过动态import()延迟加载颜色数据browser.ts浏览器全局入口把加载函数挂到globalThisoptions.tsIPalette颜色数据定义核心颜色构成与 Blend 模式调色板的实际数据定义在 options.ts完整内容如下import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Thunderstorm, background: #05030d, blendMode: screen, colors: { fill: { enable: true, value: [ #110022, #220044, #440066, #8822AA, #AAAAFF, #DDDDFF, #FFFFFF, ], }, }, };Thunderstorm 的 7 个填充色从深到浅构成一条闪电紫渐变链色值视觉倾向#110022近乎黑色的深紫#220044深紫#440066中紫#8822AA亮紫#AAAAFF浅蓝紫#DDDDFF极淡的蓝白#FFFFFF纯白模拟闪电高光背景色为#05030d近乎纯黑的蓝紫混合模式blendMode为screen。screen是 Canvas 全局混合模式之一GlobalCompositeOperation其效果是叠加后整体变亮、暗色不显非常适合光效与粒子叠加场景——这也是雷暴氛围中闪光效果的关键来源。IPalette 数据结构的字段含义IPalette接口定义在 engine/src/Core/Interfaces/IPalette.ts包含四个字段name调色板展示名仅作标识加载时使用的 ID 由addPalette注册的字符串决定background背景颜色会被引擎写入根级background.colorblendModeCanvas 混合模式会被写入blend.modecolors颜色配置可以是单个IPaletteColors对象也可以是多个变体组成的数组SingleOrMultipleIPaletteColors每个变体可包含fill填充与stroke描边两类配置fill{ enable, opacity?, value }value为单个或多个颜色字符串stroke{ value, opacity?, width }用于定义描边颜色与宽度范围。Thunderstorm 只使用了colors.fill启用填充、7 个颜色值因此它只影响粒子的填充颜色不涉及描边。安装与快速上手第一步安装引擎与基础包Thunderstorm 调色板本身不包含粒子渲染能力必须配合tsparticles/engine以及一个基础运行时包使用。官方推荐的基础包是tsparticles/basic其源码位于 bundles/basic/src。可用 npm 或 pnpm 安装npm install tsparticles/engine tsparticles/basic tsparticles/palette-thunderstorm或使用 pnpm本仓库为 pnpm workspace 结构见根目录 pnpm-workspace.yamlpnpm add tsparticles/engine tsparticles/basic tsparticles/palette-thunderstorm第二步CDN / Vanilla JS 方式无需构建工具时直接从 jsDelivr 引入两个脚本基础包负责粒子引擎能力调色板包负责颜色script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-thunderstorm4/tsparticles.palette-coloredSmokeAmber.min.js/script第三步加载调色板并初始化在tsParticles.load(...)之前必须依次调用loadBasic(engine)与loadThunderstormPalette(engine)然后在 options 中通过palette: thunderstorm引用(async engine { await loadBasic(engine); await loadThunderstormPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: thunderstorm, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);注意palette选项可放在根级如上也可以放在particles.palette下二者语义略有差异见下文引擎如何解析 palette。模块化 / 框架方式在 React、Vue、Angular、Svelte 等使用官方组件库的场景中只需要在初始化组件前调用loadThunderstormPalette函数即可组件库仓库中均有对应的注册示例。此调色板包导出结构见 package.json同时支持importESM、requireCJS、浏览器与./lazy子路径ESM 代码如下import { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadThunderstormPalette } from tsparticles/palette-thunderstorm; await loadBasic(tsParticles); await loadThunderstormPalette(tsParticles); await tsParticles.load({ id: tsparticles, options: { palette: thunderstorm, particles: { /* 自定义粒子配置 */ }, }, });若希望进一步减少初始加载体积可改用懒加载入口import { loadThunderstormPalette } from tsparticles/palette-thunderstorm/lazy;懒加载实现见 index.lazy.ts它通过await import(./options.js)延迟加载颜色数据仅在真正用到时才拉取。注册函数与引擎插件机制loadThunderstormPalette的实现非常精简index.tsimport { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName thunderstorm; export async function loadThunderstormPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }它把thunderstorm这个 ID 与optionsIPalette数据注册进引擎的 PluginManager。在 PluginManager.ts 中调色板存储在一个Mapstring, IPalette中并通过addPalette(name, palette)与getPalette(name)读写readonly palettes new Mapstring, IPalette(); addPalette(name: string, palette: IPalette): void { this.palettes.set(name, palette); } getPalette(name: string): IPalette | undefined { return this.palettes.get(name); }此外 PluginManager.register 会在引擎初始化时统一执行所有注册的加载函数并且只能在tsParticles.load(...)之前调用——这正是 READMEquick checklist要求先注册、再加载的原因。引擎如何解析 palette两级注入机制palette选项在引擎中有根级与粒子级两个解析入口理解这一点有助于正确地配置雷暴效果。根级 palette背景 混合模式 粒子样式在 engine/src/Options/Classes/Options.ts 中doLoad检测到data.palette后调用#importPalette#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, }, }); }即根级palette: thunderstorm会依次完成三件事把调色板的background#05030d写入根级背景色开启blend.enable并把blendModescreen写入混合模式把palette转发到particles.palette交给粒子级逻辑继续处理。粒子级 palette把颜色注入 paint在 engine/src/Options/Classes/Particles/ParticlesOptions.ts 的#importPalette中颜色数据被转换成引擎的paint画笔配置colors.fill.value→paint.fill.color.value粒子填充色集合colors.fill.enable→paint.fill.enablecolors.fill.opacity若有→paint.fill.opacitycolors.stroke若有→paint.stroke的color/opacity/widthblendMode→blend.mode且blend.enable: true。其中paint是 Paint.ts 所定义的一个复合画笔结构含color、fill、stroke三个可选子项渲染时决定粒子使用什么颜色与描边。当colors是数组多个变体时paint也会被生成为多个画笔变体SingleOrMultipleIPaint。这也解释了为什么 README 中强调调色板只负责颜色身份粒子数量、形状、大小、运动等行为仍需要你自己在 options 中配置——上面快速上手示例中的particles.number/shape/size/move正是这类行为配置。优先级与注意事项根据引擎实现与 markdown/Options/Particles/Palette.md 的说明有几点需要注意若palette指向一个未注册的 ID例如忘记调用loadThunderstormPalette引擎直接return不应用任何调色板效果且不会报错你显式设置的particles.paint.fill、particles.paint.stroke或blend会覆盖调色板导入的默认值即显式配置优先palette只影响粒子级样式与根级背景/混合模式不会替代preset的加载逻辑。自定义与扩展示例因为IPalette是公开接口你可以仿照 Thunderstorm 写自己的调色板。例如基于 IPalette 定义一个带描边与多变体的版本import { type Engine, type IPalette } from tsparticles/engine; const myStorm: IPalette { name: My Storm, background: #0a0a1a, blendMode: lighten, colors: [ { fill: { enable: true, value: [#4a00e0, #8e2de2, #ffffff] }, }, { fill: { enable: true, value: [#6a11cb, #2575fc] }, stroke: { value: #ffffff, width: 1 }, }, ], }; export async function loadMyStormPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(my-storm, myStorm); }); }注册后即可在配置中使用palette: my-storm。引擎会把数组形式的colors展开为多个paint变体粒子将随机选用其中一个变体着色实现更丰富的层次感。更多关于自定义插件、预设与调色板的扩展路径可参考 markdown/Plugins.md 中的Reuse strategy一节——当行为配置已正确、只想更换色彩身份时调色板是最合适的扩展方式。版本与变更记录该调色板遵循 Conventional Commits 规范维护 CHANGELOG.md。从记录看从4.0.0-alpha.5一路升级到4.3.3绝大多数版本为Version bump only仅随仓库整体发布而更新版本号无功能性变更4.2.0包含两次 bug 修复提交93d7b8b、0e28456内容为修复一些 eslint 配置与循环依赖问题circular deps以及深入 review 后的各种修复最新版本4.3.3发布于 2026-07-23。由于 Thunderstorm 的实质内容只是静态颜色数据其变更节奏与引擎整体保持一致升级时只需同步更新tsparticles/palette-thunderstorm与引擎版本即可。小结Thunderstorm 调色板用 7 个从#110022到#FFFFFF的紫白色阶、#05030d近黑背景与screen混合模式为 tsParticles 场景提供了一套即插即用的雷暴配色。它的核心用法只有三步安装tsparticles/engine与基础包 → 在tsParticles.load之前调用loadThunderstormPalette→ 在 options 中写入palette: thunderstorm并自行补充粒子行为配置。通过阅读 Options.ts 与 ParticlesOptions.ts 中的#importPalette实现你还可以按需定制自己的调色板将同样的机制复用到任何需要统一配色身份的场景中。【免费下载链接】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），仅供参考