tsParticles DarkMatter 调色板深空暗色粒子配色的使用、注册机制与源码解析【免费下载链接】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本文以仓库内palettes/space/darkMatter调色板包的 README 为主体完整讲解 DarkMatterDark Matter调色板的颜色定义、安装与加载步骤、CDN/框架接入方式并结合 tsParticles 引擎源码剖析loadDarkMatterPalette背后的注册链路调色板如何被PluginManager存储、Options与ParticlesOptions如何把一组色值转换成背景色、混合模式与粒子paint配置。读完后你可以独立把一个颜色调色板接入任意 tsParticles 运行时并能解释只声明palette名字这一行配置在引擎内部实际触发了哪些参数注入。一、DarkMatter 调色板是什么DarkMatter 调色板位于仓库的 palettes/space/darkMatter/README.md对应的 npm 包名是tsparticles/palette-dark-matter见 package.json当前版本为 4.3.3MIT 协议。在 tsParticles 的插件体系里调色板palette只定义颜色不定义粒子行为。官方 README 原文明确提示A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.调色板只定义颜色而不定义完整行为必须搭配一个运行时基础包和粒子选项一起使用。也就是说它解决的是配色方案这一层背景色、画布混合模式blend mode、粒子的填充色fill与可选的描边色stroke而粒子的数量、形状、大小、运动等仍由你传入的 options 决定。颜色定义以源码为准该调色板的核心数据在 src/options.ts 中与 README 中 Colors 小节完全一致项目取值说明nameDark Matter调色板显示名称background#060606容器背景色接近纯黑的深空底色blendModescreen画布混合模式浅色粒子在暗背景上产生发光叠加效果colors.fill.enabletrue启用填充色colors.fill.value#111111、#1a1a1a、#002200、#00AA00、#00FF005 个填充色从近黑灰到低饱和深绿再到高亮荧光绿的暗→亮梯度colors.stroke未定义该调色板不提供描边色从源码结构看这套配色是典型的暗底 荧光绿点缀深空主题大面积粒子落在#111111/#1a1a1a的暗灰区间少量粒子命中#00FF00这类高亮绿配合screen混合模式后整体呈现暗物质/深空中零星亮粒的观感。二、快速上手清单继承自官方 READMEREADME 给出的三步清单如下安装tsparticles/engine或使用下文 CDN 脚本加载一个基础包例如tsparticles/basic并在tsParticles.load(...)之前调用loadDarkMatterPalette在 options 中应用调色板名字palette字段并给出最少的粒子配置。三、具体接入方式CDN / Vanilla JS / jQueryREADME 提供的脚本引入方式第 4 大版本script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-darkMatter4/tsparticles.palette-coloredSmokeAmber.min.js/script需要指出的是这段 CDN 片段是 README 中保留的模板文案其中的包名palette-darkMatter和 bundle 文件名coloredSmokeAmber与本包package.json中真实的 npm 包名tsparticles/palette-dark-matter连字符命名并不一致属于文档复制遗留的笔误以源码注册的调色板名为dark-matter见下文第四节。实际使用时请按仓库源码确认真实的包名与注册名。初始化代码脚本加载后README 给出的完整初始化示例如下(async engine { await loadBasic(engine); await loadDarkMatterPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: darkMatter, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);要点loadBasic(engine)提供基础运行时circle 形状、move 更新器等loadDarkMatterPalette(engine)只负责注册调色板两者顺序可互换但都必须在engine.load之前完成palette字段放在 options 顶层是触发引擎自动导入调色板的开关size: { value: { min: 10, max: 15 } }展示了范围值写法粒子尺寸在 10~15 之间随机。自定义README 的 Customization 小节强调你可以像任何标准 tsParticles 安装那样覆盖所有 options——调色板注入的参数之后传入的显式配置会参与正常的 options 合并流程因此调色板 手动覆盖可以混用。带组件库的框架对 React、Vue、Angular、Svelte 等带 tsParticles 组件库的框架README 的建议是查阅对应组件库文档在框架初始化时调用同一个loadDarkMatterPalette函数即可其余用法与 Vanilla 一致。四、源码级原理loadDarkMatterPalette做了什么4.1 注册入口src/index.ts 中只有一个导出函数const paletteName dark-matter; export async function loadDarkMatterPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }它把 options.ts 中定义的IPalette对象以dark-matter连字符为 key 注册进引擎的插件管理器。这里可以注意一个事实源码注册的 key 是dark-matter而 README 示例中写的是palette: darkMatter驼峰两处并不一致接入时建议以源码注册的dark-matter为准。4.2 PluginManager调色板的存储与查找调色板在引擎中的存储位置见 PluginManager.ts/** The palettes map */ readonly palettes new Mapstring, IPalette();addPalette(name, palette)同文件 L163-L164执行this.palettes.set(name, palette)getPalette(name)L247-L248执行this.palettes.get(name)找不到时返回undefined。这意味着调色板查找是严格的 key 精确匹配名字写错不会报错只是查不到后文说明其后果。4.3 IPalette调色板的数据结构引擎侧的调色板契约定义在 IPalette.tsexport interface IPalette { background: string; // 背景色 blendMode: GlobalCompositeOperation; // 画布混合模式 colors: SingleOrMultipleIPaletteColors; // 颜色组可单组或多组 name: string; }其中IPaletteColors包含可选的fillenable/opacity?/valuevalue支持单值或数组和strokevalue/opacity?/width。DarkMatter 只使用了fill一支且value为 5 色数组属于该结构的最小用法colors支持多组数组即一个调色板可以定义多套 fill/stroke 组合引擎会把它们展开为多个 paint 变体供粒子逐个随机命中。4.4 顶层palette字段的导入链路当你在 options 顶层写palette: dark-matter时Options.ts 的#importPalette会被load流程触发#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实际做了三件事把容器背景色设为调色板的background#060606开启容器级blend 混合模式取blendModescreen把palette名字下传到particles配置进入下一节的粒子级导入。4.5 粒子级把调色板颜色翻译成paintParticlesOptions.ts 的#importPalette是颜色到渲染参数的转换核心取paletteData.colors若是数组则视为多变体统一按IPaletteColors展开每个变体中fill被映射为 paint 的填充{ color: { value }, enable, opacity }stroke如有映射为描边{ color: { value }, opacity, width }width缺省为 0展开出的 paint 变体数量大于 1 时整体作为paint载入粒子逐个随机取变体否则取第一个变体最后执行this.load({ paint: palettePaint, blend: { enable: true, mode: paletteData.blendMode } })即粒子自身也开启screen混合。对 DarkMatter 而言最终效果等价于每个圆形粒子被随机赋予#111111/#1a1a1a/#002200/#00AA00/#00FF00五种填充色之一容器背景#060606容器与粒子双层screen混合。4.6 名字写错会发生什么由 4.2 与 4.4 的代码路径可以确认getPalette查不到时#importPalette直接return引擎不会抛错——背景、blend、粒子 paint 全部保持默认值画面上只表现为调色板没生效。这是调试时最隐蔽的坑排查时先核对注册 key源码为dark-matter与 options 中palette字面值是否完全一致。五、版本、构建与使用前提版本与依赖package.json 声明version: 4.3.3运行时依赖仅tsparticles/engineworkspace 同版本sideEffects: false说明该包是纯数据注册包可被 tree-shaking产物形态exports同时提供.与./lazy两个入口且各有 types/browser/esm/cjs/umd 五种构建由 rollup.config.js 与package.dist.json描述lazy入口供需要按需异步加载的场景使用使用前提调色板不携带任何粒子行为必须搭配tsparticles/basic之类的基础运行时包或使用包含所需能力的 bundleCDN 方式下两个script顺序加载即可包管理器方式下在engine.load前await两个load*函数即可。六、小结DarkMatter 是 tsParticles 调色板包的一个标准最小实现一份IPalette数据5 色暗绿填充 #060606背景 screen混合加一个注册函数。它的价值在于把深空暗色荧光绿这套配色封装成可复用单元通过 options 顶层一个palette字符串即可让引擎自动完成背景色、容器/粒子双层混合模式和粒子 paint 的注入。理解PluginManager的 Map 注册、Options#importPalette与ParticlesOptions#importPalette的注入链路后你既可以为其他项目编写自己的调色板包照抄palettes/space/darkMatter的四文件结构即可也能准确解释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），仅供参考 tsParticles DarkMatter 调色板：深空暗色粒子配色的使用、注册机制与源码解析
tsParticles DarkMatter 调色板深空暗色粒子配色的使用、注册机制与源码解析【免费下载链接】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本文以仓库内palettes/space/darkMatter调色板包的 README 为主体完整讲解 DarkMatterDark Matter调色板的颜色定义、安装与加载步骤、CDN/框架接入方式并结合 tsParticles 引擎源码剖析loadDarkMatterPalette背后的注册链路调色板如何被PluginManager存储、Options与ParticlesOptions如何把一组色值转换成背景色、混合模式与粒子paint配置。读完后你可以独立把一个颜色调色板接入任意 tsParticles 运行时并能解释只声明palette名字这一行配置在引擎内部实际触发了哪些参数注入。一、DarkMatter 调色板是什么DarkMatter 调色板位于仓库的 palettes/space/darkMatter/README.md对应的 npm 包名是tsparticles/palette-dark-matter见 package.json当前版本为 4.3.3MIT 协议。在 tsParticles 的插件体系里调色板palette只定义颜色不定义粒子行为。官方 README 原文明确提示A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.调色板只定义颜色而不定义完整行为必须搭配一个运行时基础包和粒子选项一起使用。也就是说它解决的是配色方案这一层背景色、画布混合模式blend mode、粒子的填充色fill与可选的描边色stroke而粒子的数量、形状、大小、运动等仍由你传入的 options 决定。颜色定义以源码为准该调色板的核心数据在 src/options.ts 中与 README 中 Colors 小节完全一致项目取值说明nameDark Matter调色板显示名称background#060606容器背景色接近纯黑的深空底色blendModescreen画布混合模式浅色粒子在暗背景上产生发光叠加效果colors.fill.enabletrue启用填充色colors.fill.value#111111、#1a1a1a、#002200、#00AA00、#00FF005 个填充色从近黑灰到低饱和深绿再到高亮荧光绿的暗→亮梯度colors.stroke未定义该调色板不提供描边色从源码结构看这套配色是典型的暗底 荧光绿点缀深空主题大面积粒子落在#111111/#1a1a1a的暗灰区间少量粒子命中#00FF00这类高亮绿配合screen混合模式后整体呈现暗物质/深空中零星亮粒的观感。二、快速上手清单继承自官方 READMEREADME 给出的三步清单如下安装tsparticles/engine或使用下文 CDN 脚本加载一个基础包例如tsparticles/basic并在tsParticles.load(...)之前调用loadDarkMatterPalette在 options 中应用调色板名字palette字段并给出最少的粒子配置。三、具体接入方式CDN / Vanilla JS / jQueryREADME 提供的脚本引入方式第 4 大版本script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-darkMatter4/tsparticles.palette-coloredSmokeAmber.min.js/script需要指出的是这段 CDN 片段是 README 中保留的模板文案其中的包名palette-darkMatter和 bundle 文件名coloredSmokeAmber与本包package.json中真实的 npm 包名tsparticles/palette-dark-matter连字符命名并不一致属于文档复制遗留的笔误以源码注册的调色板名为dark-matter见下文第四节。实际使用时请按仓库源码确认真实的包名与注册名。初始化代码脚本加载后README 给出的完整初始化示例如下(async engine { await loadBasic(engine); await loadDarkMatterPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: darkMatter, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);要点loadBasic(engine)提供基础运行时circle 形状、move 更新器等loadDarkMatterPalette(engine)只负责注册调色板两者顺序可互换但都必须在engine.load之前完成palette字段放在 options 顶层是触发引擎自动导入调色板的开关size: { value: { min: 10, max: 15 } }展示了范围值写法粒子尺寸在 10~15 之间随机。自定义README 的 Customization 小节强调你可以像任何标准 tsParticles 安装那样覆盖所有 options——调色板注入的参数之后传入的显式配置会参与正常的 options 合并流程因此调色板 手动覆盖可以混用。带组件库的框架对 React、Vue、Angular、Svelte 等带 tsParticles 组件库的框架README 的建议是查阅对应组件库文档在框架初始化时调用同一个loadDarkMatterPalette函数即可其余用法与 Vanilla 一致。四、源码级原理loadDarkMatterPalette做了什么4.1 注册入口src/index.ts 中只有一个导出函数const paletteName dark-matter; export async function loadDarkMatterPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }它把 options.ts 中定义的IPalette对象以dark-matter连字符为 key 注册进引擎的插件管理器。这里可以注意一个事实源码注册的 key 是dark-matter而 README 示例中写的是palette: darkMatter驼峰两处并不一致接入时建议以源码注册的dark-matter为准。4.2 PluginManager调色板的存储与查找调色板在引擎中的存储位置见 PluginManager.ts/** The palettes map */ readonly palettes new Mapstring, IPalette();addPalette(name, palette)同文件 L163-L164执行this.palettes.set(name, palette)getPalette(name)L247-L248执行this.palettes.get(name)找不到时返回undefined。这意味着调色板查找是严格的 key 精确匹配名字写错不会报错只是查不到后文说明其后果。4.3 IPalette调色板的数据结构引擎侧的调色板契约定义在 IPalette.tsexport interface IPalette { background: string; // 背景色 blendMode: GlobalCompositeOperation; // 画布混合模式 colors: SingleOrMultipleIPaletteColors; // 颜色组可单组或多组 name: string; }其中IPaletteColors包含可选的fillenable/opacity?/valuevalue支持单值或数组和strokevalue/opacity?/width。DarkMatter 只使用了fill一支且value为 5 色数组属于该结构的最小用法colors支持多组数组即一个调色板可以定义多套 fill/stroke 组合引擎会把它们展开为多个 paint 变体供粒子逐个随机命中。4.4 顶层palette字段的导入链路当你在 options 顶层写palette: dark-matter时Options.ts 的#importPalette会被load流程触发#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实际做了三件事把容器背景色设为调色板的background#060606开启容器级blend 混合模式取blendModescreen把palette名字下传到particles配置进入下一节的粒子级导入。4.5 粒子级把调色板颜色翻译成paintParticlesOptions.ts 的#importPalette是颜色到渲染参数的转换核心取paletteData.colors若是数组则视为多变体统一按IPaletteColors展开每个变体中fill被映射为 paint 的填充{ color: { value }, enable, opacity }stroke如有映射为描边{ color: { value }, opacity, width }width缺省为 0展开出的 paint 变体数量大于 1 时整体作为paint载入粒子逐个随机取变体否则取第一个变体最后执行this.load({ paint: palettePaint, blend: { enable: true, mode: paletteData.blendMode } })即粒子自身也开启screen混合。对 DarkMatter 而言最终效果等价于每个圆形粒子被随机赋予#111111/#1a1a1a/#002200/#00AA00/#00FF00五种填充色之一容器背景#060606容器与粒子双层screen混合。4.6 名字写错会发生什么由 4.2 与 4.4 的代码路径可以确认getPalette查不到时#importPalette直接return引擎不会抛错——背景、blend、粒子 paint 全部保持默认值画面上只表现为调色板没生效。这是调试时最隐蔽的坑排查时先核对注册 key源码为dark-matter与 options 中palette字面值是否完全一致。五、版本、构建与使用前提版本与依赖package.json 声明version: 4.3.3运行时依赖仅tsparticles/engineworkspace 同版本sideEffects: false说明该包是纯数据注册包可被 tree-shaking产物形态exports同时提供.与./lazy两个入口且各有 types/browser/esm/cjs/umd 五种构建由 rollup.config.js 与package.dist.json描述lazy入口供需要按需异步加载的场景使用使用前提调色板不携带任何粒子行为必须搭配tsparticles/basic之类的基础运行时包或使用包含所需能力的 bundleCDN 方式下两个script顺序加载即可包管理器方式下在engine.load前await两个load*函数即可。六、小结DarkMatter 是 tsParticles 调色板包的一个标准最小实现一份IPalette数据5 色暗绿填充 #060606背景 screen混合加一个注册函数。它的价值在于把深空暗色荧光绿这套配色封装成可复用单元通过 options 顶层一个palette字符串即可让引擎自动完成背景色、容器/粒子双层混合模式和粒子 paint 的注入。理解PluginManager的 Map 注册、Options#importPalette与ParticlesOptions#importPalette的注入链路后你既可以为其他项目编写自己的调色板包照抄palettes/space/darkMatter的四文件结构即可也能准确解释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），仅供参考