tsParticles Thunderstorm 调色板实战：用 7 色紫蓝粒子复刻雷暴夜空粒子背景

tsParticles Thunderstorm 调色板实战用 7 色紫蓝粒子复刻雷暴夜空粒子背景【免费下载链接】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 官方调色板tsparticles/palette-thunderstorm仓库路径 palettes/atmospheric/thunderstorm为对象讲解调色板Palette机制与「雷暴」主题色板在粒子背景中的完整落地流程。读完本文你将掌握thunderstorm 调色板包含哪些颜色与混合模式、它的源码如何注册到引擎、如何通过 CDN 或 npm 在 Vanilla JS / jQuery / 各类前端框架中启用以及如何在其基础上自定义粒子行为。什么是 tsParticles 调色板只定义颜色不定义行为在 tsParticles 中「调色板」Palette与「预设」Preset是两个不同的概念官方在 thunderstorm README 中明确强调A palette defines colors, not complete behavior——调色板只负责提供颜色集合粒子数量、形状、运动等行为仍由你自行配置。这一点在源码中可以得到印证。thunderstorm 的 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, ], }, }, };而IPalette接口定义在 engine/src/Core/Interfaces/IPalette.ts结构如下字段类型说明namestring调色板名称backgroundstring背景色blendModeGlobalCompositeOperationCanvas 混合模式colorsSingleOrMultipleIPaletteColors颜色集合可包含fill填充色与stroke描边色两组配置colors.fill.valueSingleOrMultiplestring填充色取值可为单个颜色或多个颜色的数组colors.fill.enableboolean是否启用填充色colors.fill.opacityRangeValue可选填充色透明度范围colors.stroke可选描边配置含value、opacity、widthThunderstorm 色板组成完整色值与混合模式原文档以表格形式给出了 thunderstorm 调色板的全部颜色这里完整保留粒子填充色7 色渐变从深紫外到纯白#110022—— 近黑的深紫外#220044—— 深紫#440066—— 紫罗兰#8822AA—— 亮紫#AAAAFF—— 淡紫蓝#DDDDFF—— 近白淡蓝#FFFFFF—— 纯白背景色#05030d极暗的蓝黑渲染参数参数值Blend mode混合模式screenFill填充truescreen混合模式意味着粒子颜色与背景采用屏幕叠加浅色粒子会发光深色区域被提亮这正是雷暴云层中电光闪烁氛围的视觉来源。而fill: true表示所有粒子统一使用填充色着色无需额外配置 stroke描边色。源码级解析调色板如何注册并生效1. 注册入口loadThunderstormPalettethunderstorm 的加载函数定义在 palettes/atmospheric/thunderstorm/src/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为键名注册因此配置中写palette: thunderstorm即可引用注册发生在插件管理器pluginManager上addPalette的实现位于 engine/src/Core/Utils/PluginManager.ts本质是把名字与IPalette对象存入palettesMapthis.palettes.set(name, palette)后续通过getPalette(name)按名取值。2. 懒加载变体index.lazy.ts仓库同时提供了懒加载入口 palettes/atmospheric/thunderstorm/src/index.lazy.ts。它从tsparticles/engine/lazy导入引擎类型并在注册回调内部通过动态import(./options.js)按需加载颜色配置适合希望把调色板拆分为独立 chunk、优化首屏体积的打包场景import { type Engine } from tsparticles/engine/lazy; const paletteName thunderstorm; export async function loadThunderstormPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(async e { const { options } await import(./options.js); e.pluginManager.addPalette(paletteName, options); }); }浏览器环境browser.ts则会把loadThunderstormPalette挂到globalThis上供script直接调用。3. 应用阶段引擎如何消费调色板当配置中出现palette字段时引擎在初始化选项阶段会查找并展开调色板engine/src/Options/Classes/Options.ts 中的#importPalette会读取paletteData.background写入背景色、读取blendMode写入混合模式engine/src/Options/Classes/Particles/ParticlesOptions.ts 中的#importPalette则负责把colors.fill.value/colors.stroke展开为粒子的paint着色配置enable字段决定填充是否生效opacity作为可选的透明度范围参与最终渲染。也就是说只要注册了调色板并在 options 里声明palette: thunderstorm背景色、混合模式与粒子配色会自动生效无需手动填写这些颜色。快速上手清单原文档给出了 3 步快速清单这里结合仓库展开安装引擎通过 npm 安装tsparticles/engine^4.x与仓库 palettes/atmospheric/thunderstorm/package.json 中声明的版本体系一致或直接引入 CDN 打包产物加载基础包并注册调色板先加载一个运行时包如tsparticles/basic对应 bundles/basic再调用loadThunderstormPalette(engine)且必须在tsParticles.load(...)之前完成注册在配置中引用在 options 里写入palette: thunderstorm并补充最少量的粒子行为配置数量、形状、尺寸、运动。CDN / Vanilla JS / jQuery 用法如果你不使用打包器直接在 HTML 中通过 CDN 引入即可。原文档的脚本引用方式如下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说明第二个脚本的文件名沿用了包的历史命名coloredSmokeAmber实际引入的是 thunderstorm 调色板的浏览器 bundle使用 npm 方式时包名统一为tsparticles/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);各参数的作用与取值范围配置项含义取值建议particles.number.value粒子总数数值型示例为 200越大越密集particles.shape.type粒子形状circle圆形也可改为square、star等需加载对应 shape 包particles.size.value粒子尺寸支持{ min, max }区间示例10~15也可填单个数值particles.move.enable是否运动true/falseparticles.move.speed移动速度数值型示例为 2单位约像素/帧palette调色板名称必须为thunderstorm与注册键名一致id字段对应容器元素的id确保页面中存在div idtsparticles/div之类的目标容器即可。自定义与覆盖规则原文档特别标注了Important ⚠️调色板只预置颜色你可以像普通 tsParticles 安装一样覆盖任意选项。例如想要更稀疏的粒子把particles.number.value调小想要更慢的漂移感把move.speed调低想要不同形状加载对应 shape 包后改shape.type直接覆盖background、particles.color等字段会以你的显式配置为准。因为调色板展开发生在选项初始化阶段你在 options 中显式书写的值拥有更高优先级。在框架组件库中使用如果你使用 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 或 Web Components 等框架可以使用对应的 tsParticles 组件库并在组件初始化前调用loadThunderstormPalette。仓库 wrappers 目录下提供了各框架的封装实现如 wrappers/react、wrappers/vue3、wrappers/angular它们的组件内部同样接受 options 对象只需把palette: thunderstorm与particles配置传入即可复用本调色板。框架组件的具体安装与用法以各组件库文档为准。小结tsparticles/palette-thunderstorm用 7 个紫蓝系填充色、#05030d深色背景与screen混合模式为雷暴主题粒子效果提供了开箱即用的配色方案。它严格遵循 tsParticles 的调色板只管颜色设计哲学注册调用loadThunderstormPalette(engine)引用声明palette: thunderstorm其余粒子行为完全交给你自由定制。需要深入源码时可从 palettes/atmospheric/thunderstorm/src 的options.ts与index.ts入手再结合引擎侧的IPalette接口与PluginManager.addPalette理解其完整生命周期。【免费下载链接】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），仅供参考