tsParticles Aurora Borealis 调色板为粒子系统注入「极光绿紫」配色的原理与用法【免费下载链接】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 仓库中的 Aurora Borealis极光调色板展开先完整介绍该调色板的配色方案8 个填充色、深绿背景、screen混合模式再结合palettes/space/auroraBorealis的源码与tsparticles/engine的插件机制讲清楚一个调色板包从注册addPalette到被options.palette引用并落到粒子 paint 属性的完整链路最后给出 CDN 与框架两套可直接复制的接入方式。读完后你可以独立接入任意 tsParticles 调色板包并理解IPalette中background、blendMode、colors.fill/stroke各字段在引擎中的实际作用。调色板是什么只定义颜色不定义行为tsParticles 中调色板palette与预设preset是两种不同的概念。官方 README 的 Quick checklist 明确提示A palette defines colors, not complete behavior, so pair it with a runtime package and particle options. 调色板只定义颜色不定义完整行为因此必须搭配一个运行时包和粒子选项使用。也就是说Aurora Borealis 调色板本身不包含任何粒子运动、形状或交互逻辑它只提供一组颜色数据粒子的数量、形状、速度、移动方式仍然由你传入的particles配置决定。这是使用任何tsparticles/palette-*包时必须先建立的前提。配色方案8 色绿紫渐变 深绿背景该调色板的完整颜色定义在 options.ts 中与 README 中展示的色板一一对应角色值说明填充色 1#002200极暗的绿粒子底色填充色 2#004400深绿填充色 3#00AA44中绿填充色 4#00FFAA亮绿极光主色填充色 5#00FFCC青绿填充色 6#4400AA深紫极光紫主色填充色 7#8800FF亮紫填充色 8#CC44FF浅紫背景 Background#000d06近黑的深绿模拟夜空混合模式 Blend modescreen屏幕叠加多粒子重叠处提亮填充 Filltrue启用粒子填充色配色逻辑很直观5 个绿色由暗到亮构成一组3 个紫色由暗到亮构成另一组两组颜色叠加在#000d06的夜空背景上配合screen混合模式重叠区域变亮可以模拟出极光带中绿、紫交织的发光效果。源码剖析调色板包的四个文件palettes/space/auroraBorealis包的源码只有 4 个文件麻雀虽小五脏俱全恰好覆盖了引擎调色板接入的完整机制。1. 颜色数据实现引擎的 IPalette 接口颜色数据的类型来自引擎侧的 IPalette 接口它只有 4 个字段export interface IPalette { /** Background color */ background: string; /** Canvas blend mode */ blendMode: GlobalCompositeOperation; /** Palette colors, single or multiple sets */ colors: SingleOrMultipleIPaletteColors; /** Palette name */ name: string; }其中colors支持单个色组或多个色组SingleOrMultiple每个色组包含可选的fill含enable、opacity、value和stroke含opacity、value、width。Aurora Borealis 只提供了fill未提供stroke// palettes/space/auroraBorealis/src/options.ts export const options: IPalette { name: Aurora Borealis, background: #000d06, blendMode: screen, colors: { fill: { enable: true, value: [ #002200, #004400, #00AA44, #00FFAA, #00FFCC, #4400AA, #8800FF, #CC44FF, ], }, }, };2. 注册函数loadAuroraBorealisPaletteloadAuroraBorealisPalette 是这个包的核心导出。它把options通过引擎的PluginManager.addPalette注册进全局调色板表注册时使用的键名是aurora-borealis// palettes/space/auroraBorealis/src/index.ts const paletteName aurora-borealis; export async function loadAuroraBorealisPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }引擎侧的addPalette实现非常轻量本质上是往一个 Map 里写入键值对见 PluginManager.addPalette// engine/src/Core/Utils/PluginManager.ts addPalette(name: string, palette: IPalette): void { this.palettes.set(name, palette); }需要注意的一个细节源码中注册的键名是短横线风格的aurora-borealis而 README 示例代码中options.palette写的是驼峰风格的auroraBorealis。从源码结构看运行时查找getPalette(name)是按 Map 键严格匹配的两者写法存在出入实际接入时建议先按源码中的aurora-borealis验证是否生效若未命中可回退到 README 的驼峰写法或干脆不依赖名称直接传particles级颜色配置。3. Lazy 变体按需动态 import 颜色数据包内还提供 index.lazy.ts注册逻辑与标准版一致区别在于options.js是在register回调内用await import(./options.js)动态加载的// palettes/space/auroraBorealis/src/index.lazy.ts export async function loadAuroraBorealisPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(async e { const { options } await import(./options.js); e.pluginManager.addPalette(paletteName, options); }); }对只含几行颜色字符串的数据包lazy 变体节省的体积有限但它与引擎的lazy入口tsparticles/engine/lazy配套适合在追求首屏体积的场景中统一使用动态导入风格。4. Browser 入口让 CDN 脚本能挂到全局变量browser.ts 是 UMD/CDN 构建的入口它把loadAuroraBorealisPalette挂到globalThis上// palettes/space/auroraBorealis/src/browser.ts globalObject.__tsParticlesInternals globalObject.__tsParticlesInternals ?? {}; globalObject.loadAuroraBorealisPalette loadAuroraBorealisPalette; export * from ./index.js;这正是 README 中「script引入后直接调用全局函数loadAuroraBorealisPalette(engine)」能够工作的底层原因。package.json 中browser字段指向dist/browser/index.jsexports同时提供了.与./lazy两个子路径及 cjs/esm/umd/types 各形态版本号为 4.3.3。引擎如何消费调色板从 options.palette 到粒子颜色理解了注册链路再来看引擎侧的消费链路两个私有方法是关键。顶层Options#importPalette当你在配置里写palette: auroraBorealis时引擎的 Options#importPalette 会执行三件事// engine/src/Options/Classes/Options.ts #importPalette(palette: string): void { const paletteData this.#pluginManager.getPalette(palette); if (!paletteData) { return; // 未注册同名调色板时静默返回 } this.load({ background: { color: paletteData.background, // 1. 应用深绿背景 #000d06 }, blend: { enable: true, // 2. 开启混合 mode: paletteData.blendMode, // 并设为 screen }, particles: { palette, // 3. 把名称透传给粒子层 }, }); }也就是说background和blendMode两个字段在顶层生效画布背景被设为#000d06混合模式被设为screen而颜色数组的落地则交给下一层。粒子层ParticlesOptions#importPaletteParticlesOptions#importPalette 负责把调色板颜色映射为粒子 paint 的填充/描边变体。其核心逻辑是将paletteData.colors统一规整为数组isArray(paletteColors) ? paletteColors : [paletteColors]即引擎原生支持「一个调色板多组颜色」每个色组的fill被转写为 paint 的fill.color.value / fill.enable / fill.opacity若调色板只定义了fillAurora Borealis 即属此类每个色组只产生一个{ fill: fillPart }的 paint 变体不产生描边。对 Aurora Borealis 而言最终效果是每个粒子从 8 个颜色中随机取一种填充色粒子在screen混合模式下叠加于深色夜空背景之上。实际使用接入步骤综合 README 的 Quick checklist 与仓库源码标准接入分三步安装tsparticles/engine或直接使用 CDN 包安装并加载一个运行时基础包例如tsparticles/basic在调用tsParticles.load(...)之前先调用loadAuroraBorealisPalette在 options 中指定调色板名称并给出最小粒子配置数量、形状、大小、移动。方式一CDN / Vanilla JS / jQueryscript srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-auroraBorealis4/tsparticles.palette-coloredSmokeAmber.min.js/script(async engine { await loadBasic(engine); await loadAuroraBorealisPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: auroraBorealis, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);两个需要留意的仓库事实仓库内 package.json 声明的 npm 包名是tsparticles/palette-aurora-borealis短横线风格而 README 徽标与 CDN 地址使用的是tsparticles/palette-auroraBorealis驼峰风格及文件名tsparticles.palette-coloredSmokeAmber.min.js。从源码结构看这很可能是模板复制遗留的不一致CDN 地址请以 npm 实际发布的包名为准核对本地 workspace 开发时直接以源码tsparticles/palette-aurora-borealis为准。browser入口会把loadAuroraBorealisPalette挂到全局见上文 browser.ts 分析因此script方式下无需import直接调用全局函数即可。方式二框架组件库React / Vue / Angular / Svelte 等官方 README 的建议是查阅对应组件库wrapper的文档在其中导入并调用loadAuroraBorealisPalette(engine)用法与 CDN 方式完全一致只是把「脚本加载」换成「模块导入」。本仓库wrappers/目录下包含 react、vue2、vue3、angular、svelte、preact、stencil、solid、qwik、nextjs、nuxt 等组件库demo/目录下有对应的可运行示例工程可作为各框架接入的参考起点。自定义覆盖README 特别提醒ImportantYou can override all the options defining the properties like in any standardtsParticlesinstallation.由于调色板本质只是向options注入background、blend与粒子 paint 颜色见Options#importPalette源码这些属性都可以通过常规load合并被后续传入的显式配置覆盖——例如在palette之外再指定particles.color或background.color即可只借用其中一部分调色板行为。小结与仓库内延伸路径Aurora Borealis 调色板由 8 个绿紫填充色、背景#000d06与screen混合模式构成fill.enable为true注册链路loadAuroraBorealisPalette→PluginManager.addPalette引擎实现→options.palette名称匹配 →Options#importPalette/ParticlesOptions#importPalette落地为背景、混合与粒子颜色包提供标准入口与./lazy子路径package.json exportsCDN 场景走browser.ts的全局挂载调色板只定义颜色粒子行为仍需运行时包 粒子选项配合。相关文档仓库内同目录的 CHANGELOG 可查版本变更引擎侧调色板接口的类型定义见 IPalette。【免费下载链接】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），仅供参考
