tsParticles Jellyfish Glow 调色板完全指南安装、配置与源码原理【免费下载链接】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/tsparticlesJellyfish Glow水母辉光是 tsParticles 官方tsparticles/palette-jellyfish-glow调色板包提供的一套梦幻配色方案以深邃蓝黑为背景、搭配蓝紫到粉白的渐变发光粒子非常适合作为网站动态背景、登录页氛围点缀或炫酷特效演示。本文将基于该调色板包的官方文档与当前仓库源码带你完成从安装、加载、配置到定制化的全流程并深入讲解调色板在 tsParticles 引擎内部的注册与解析机制。Jellyfish Glow 调色板是什么Jellyfish Glow 是 tsParticles 众多内置调色板palette之一它并不定义粒子的完整行为而是定义一套颜色方案包括背景色、粒子填充色集合以及画布混合模式blend mode。正如官方文档所说A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.调色板只定义颜色不定义完整行为需要配合运行时包与粒子配置一起使用。在 调色板源码 中可以看到它的完整定义export const options: IPalette { name: Jellyfish Glow, background: #000814, blendMode: screen, colors: { fill: { enable: true, value: [ #001133, #0033AA, #4488FF, #88AAFF, #FF88DD, #FFAAEE, #DDEEFF, ], }, }, };这套配色共包含 7 个填充色从深海蓝到冰蓝、再到水母般的粉紫与粉白搭配近乎纯黑的深蓝背景#000814并使用screen滤色混合模式让粒子叠加发光营造出水母在深海中发光的视觉效果。调色板包含哪些颜色官方 README 给出了完整的颜色清单色值视觉定位#001133深海蓝最深的粒子色#0033AA深蓝中坚底色#4488FF亮蓝冷色主调#88AAFF浅蓝过渡色#FF88DD水母粉暖色点缀#FFAAEE淡粉柔和过渡#DDEEFF冰白高光点缀#000814背景接近纯黑的深蓝夜空混合模式screen粒子叠加发光填充true粒子使用填充色快速上手清单按照官方文档的 Quick checklist使用该调色板只需三步安装tsparticles/engine或直接使用下方的 CDN 包加载一个基础包例如tsparticles/basic并在tsParticles.load(...)之前调用loadJellyfishGlowPalette在选项中应用调色板并补充一份最小化的粒子配置。安装与加载方式一CDN / Vanilla JS / jQuery官方文档推荐直接在页面中引入两个脚本基础运行时包与调色板包。script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-jellyfishGlow4/tsparticles.palette-coloredSmokeAmber.min.js/script注意CDN 包脚本名沿用了系列模板命名文件名中包含coloredSmokeAmber实际对应的是tsparticles/palette-jellyfish-glow包引入后会在全局暴露loadJellyfishGlowPalette函数。这一点在 browser.ts 中有明确实现它将loadJellyfishGlowPalette挂载到globalThis上并同时导出index.ts的全部内容。方式二npm 安装ESM / CJS从 package.json 可以看到该包以tsparticles/palette-jellyfish-glow发布当前仓库版本为 4.3.3同时提供 ESMdist/esm、CommonJSdist/cjs、浏览器dist/browser与 UMD 多种产物并额外导出了一个./lazy子路径用于懒加载场景npm install tsparticles/palette-jellyfish-glowimport { loadJellyfishGlowPalette } from tsparticles/palette-jellyfish-glow;基本用法在脚本加载完成后按如下方式初始化tsParticles官方文档示例(async engine { await loadBasic(engine); await loadJellyfishGlowPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: jellyfishGlow, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);关键点说明palette: jellyfishGlow是让引擎应用调色板的唯一入口粒子数量number.value: 200保证画面饱满size的min/max区间让粒子大小有层次move开启缓慢漂移速度 2更符合水母悬浮的动感选项中的particles部分与普通 tsParticles 配置完全一致可自由增删。调色板名称的对应关系注意一个容易混淆的细节在 options 中书写的是jellyfishGlow而在源码中注册的名称是jellyfish-glow。查看 index.tsconst paletteName jellyfish-glow; export async function loadJellyfishGlowPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }引擎在解析选项时会自动兼容这两种写法因此官方示例中使用jellyfishGlow也可以正常命中注册的jellyfish-glow调色板。调色板在引擎内部如何工作数据模型IPalette引擎通过 IPalette 接口 约束所有调色板的数据结构background背景色字符串blendMode画布混合模式类型为GlobalCompositeOperation本调色板使用screencolors颜色集合支持单组或多组SingleOrMultipleIPaletteColors每组可包含fill填充色含enable开关、可选opacity与value和stroke描边色含可选opacity、value与widthname调色板显示名称。注册与解析PluginManagerloadJellyfishGlowPalette的核心动作是调用engine.pluginManager.addPalette(name, options)。在 PluginManager.ts 中调色板被存入一个Mapstring, IPalette并提供getPalette(name)按名称取回。当Options解析到palette字段时会触发 Options.ts 中的#importPalette私有方法将调色板展开为三项配置this.load({ background: { color: paletteData.background, }, blend: { enable: true, mode: paletteData.blendMode, }, particles: { palette, }, });也就是说palette: jellyfishGlow一行配置实际等价于同时设置了背景色#000814、开启blend并指定screen模式、以及让粒子读取该调色板的颜色集合。理解了这条链路就能明白为什么调色板能一键改变整套特效的观感。懒加载版本包内还提供了 index.lazy.ts它从tsparticles/engine/lazy导入引擎类型并在插件注册回调内通过动态import(./options.js)按需加载配置。如果你的应用对首屏体积敏感可以通过tsparticles/palette-jellyfish-glow/lazy子路径引入让调色板配置延迟到需要时才加载。自定义与覆盖官方文档强调了一个重要特性Important ⚠️ You can override all the options defining the properties like in any standardtsParticlesinstallation.也就是说调色板只是默认值你可以在 options 中显式覆盖任意属性。例如想减少粒子数量、改圆形为爱心形状、放大粒子并加速漂移const options { particles: { number: { value: 80 }, shape: { type: heart }, size: { value: { min: 20, max: 30 } }, move: { enable: true, speed: 4, }, }, palette: jellyfishGlow, };甚至可以覆盖背景与混合模式const options { background: { color: #0a0f1e }, // 自定义背景 palette: jellyfishGlow, particles: { number: { value: 150 } }, };由于#importPalette在加载时以this.load(...)合并配置之后显式书写的同名配置会覆盖调色板提供的默认值因此定制非常灵活不会破坏调色板的整体风格。在框架组件库中使用tsParticles 为 React.js、Vue.js2.x/3.x、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 和 Web Components 提供了现成的组件库对应仓库 wrappers 目录下的各封装包。在这些框架中使用本调色板的流程是安装对应框架的 tsParticles 组件库与本调色板包在组件初始化处调用loadJellyfishGlowPalette(engine)在组件 options 中设置palette: jellyfishGlow。具体 API 以各组件库仓库文档为准调用加载函数的方式与 Vanilla JS 保持一致。相关资源调色板包本体palettes/fantasy/jellyfishGlow内含 options.ts、index.ts 与 package.json引擎调色板接口定义IPalette.ts调色板注册与解析实现PluginManager.ts 与 Options.ts更多预设与调色板可参考 presets 与 palettes 目录主文档见 markdown 目录及 README.md。总而言之Jellyfish Glow 是 tsParticles 调色板体系中即插即用的典型代表一行palette配置即可获得完整的深海水母辉光氛围同时保留了对粒子数量、形状、大小、运动与混合模式的完全控制权非常适合作为网站动态背景与氛围特效的开箱即用方案。【免费下载链接】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），仅供参考