tsParticles cmySecondaries 调色板CMY 次级色粒子效果的定义、接入原理与实战配置【免费下载链接】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/spectrum/cmySecondaries/README.md 为主体完整讲解 tsParticles 的 cmySecondariesCMY Secondaries调色板它的配色构成青色 / 品红 / 黄色三色填充 黑色背景 screen 混合模式、安装与 CDN/框架接入方式、loadCmySecondariesPalette的调用链以及引擎把palette选项展开为背景、混合模式和粒子涂装的内部实现。读完后你可以把这个调色板装进任何 tsParticles 实例并理解引擎如何把一个调色板翻译成具体的渲染参数。1. 调色板定位它定义颜色不定义行为cmySecondaries 是 tsParticles v4 调色板体系中spectrum光谱家族的一员对应 npm 包tsparticles/palette-cmy-secondaries源码位于 palettes/spectrum/cmySecondaries。README 给出的使用清单Quick checklist明确了它的使用前提安装tsparticles/engine或使用 CDN 版本加载一个基础运行时包例如tsparticles/basic并在tsParticles.load(...)之前调用loadCmySecondariesPalette在 options 中同时应用该调色板和一份最小粒子配置。README 特别强调调色板只定义颜色不定义完整行为所以必须搭配一个运行时包和粒子选项一起使用。这一点在仓库结构上也能印证——palettes/spectrum/cmySecondaries/package.json 中该包唯一的运行时依赖是tsparticles/engineworkspace 依赖它自身不包含任何粒子运动逻辑只是向引擎注册一份配色数据。CMY 是印刷/显示色彩模型中的青色Cyan、品红Magenta、黄色Yellow三色即 RGB 主色红绿蓝的补色。与 RGB 主色叠加的直觉相反CMY 三色在黑色背景上使用screen滤色/加法混合模式时重叠区域会叠加提亮适合做高对比的霓虹风格背景。2. 配色构成三色填充、黑色背景、screen 混合README 的 Colors 一节用色卡表格声明了全部配色信息完整继承如下角色值填充色 1#00ffff青色填充色 2#ff00ff品红填充色 3#ffff00黄色Background#000000纯黑Blend modescreenFilltrue这些值的唯一事实来源是 src/options.ts它导出的就是一个符合IPalette接口的常量对象import { type IPalette } from tsparticles/engine; export const options: IPalette { name: CMY Secondaries, background: #000000, blendMode: screen, colors: { fill: { enable: true, value: [ #00ffff, #ff00ff, #ffff00, ], }, }, };对照引擎侧的调色板类型定义 engine/src/Core/Interfaces/IPalette.ts各字段含义如下字段类型本调色板的取值作用namestringCMY Secondaries人类可读名称用于文档展示backgroundstring#000000应用调色板时写入容器背景的颜色blendModeGlobalCompositeOperationscreencanvas 合成模式colors.fillIPaletteColorsFillenable: true三值数组粒子填充色value支持单值或数组本调色板给的是三个颜色引擎会为每个粒子随机取用colors.strokeIPaletteColorsStroke未设置描边色未启用粒子只填充不描边需要注意colors在类型上是SingleOrMultipleIPaletteColors即一个调色板可以声明多组颜色变体本调色板只声明了一组含三值填充数组。IPaletteColorsFill还支持可选的opacity范围字段本调色板没有使用因此粒子不透明度走粒子自身配置的默认值。3. 注册机制loadCmySecondariesPalette与 lazy 入口palettes/spectrum/cmySecondaries/src/index.ts 提供了标准的加载函数import { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName cmy-secondaries; export async function loadCmySecondariesPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }调用链很短但每一步都有引擎源码支撑engine.pluginManager.register(...)把一个初始化回调登记到插件管理器回调内执行e.pluginManager.addPalette(paletteName, options)把配色对象以名称为键写入调色板注册表。对应实现见 engine/src/Core/Utils/PluginManager.tsaddPalette(name: string, palette: IPalette): void { this.palettes.set(name, palette); }PluginManager用一个Mapstring, IPalette存储所有调色板readonly palettes读取时通过getPalette(name)按名取用同文件 #L247-L249。从源码结构看注册是幂等覆盖式的同名set会直接替换旧值因此重复加载同一调色板不会产生副作用。另一个值得注意的细节index.ts中的注册名是cmy-secondarieskebab-case即 npm 包名而 README 的 usage 示例中 options 里写的是palette: cmySecondariescamelCase与 npm 包名/CDN 脚本的命名一致。以官方 README 的用法为准两者指向同一个调色板包如果你直接使用源码构建产物建议以loadCmySecondariesPalette内部注册的名称为准做验证。此外该包还提供 src/index.lazy.ts 懒加载入口同样导出loadCmySecondariesPalette但回调改为async在真正注册前才动态await import(./options.js)——配色数据被拆成独立 chunk只在调色板实际被使用时才加载。package.json 的exports字段暴露了./lazy子路径types/browser/esm/cjs/umd 各形态齐全供打包器做按需分割。对于 CDN 用户src/browser.ts 会在全局对象上挂载加载函数import { loadCmySecondariesPalette } from ./index.js; const globalObject globalThis as typeof globalThis { __tsParticlesInternals?: Recordstring, unknown; loadCmySecondariesPalette?: typeof loadCmySecondariesPalette; }; globalObject.__tsParticlesInternals globalObject.__tsParticlesInternals ?? {}; globalObject.loadCmySecondariesPalette loadCmySecondariesPalette; export * from ./index.js;这就是为什么下面 CDN 用法里可以直接在脚本作用域调用loadCmySecondariesPalette(...)无需import。4. 安装与快速开始4.1 CDN / Vanilla JS / jQueryREADME 给出的引入方式jsDelivr锁定 v4 大版本script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-cmySecondaries4/tsparticles.palette-coloredSmokeAmber.min.js/script需要如实指出第二条script的包名和文件名palette-cmySecondaries/tsparticles.palette-coloredSmokeAmber.min.js与本调色板 package.json 中的实际包名tsparticles/palette-cmy-secondaries不一致属于模板生成时的复制残留——从仓库内容看README 中colored smoke amber的描述文字也是同类残留。接入时请以包的实际发布名为准确认 CDN 资源并以loadCmySecondariesPalette这个全局函数是否可用作为脚本加载成功的判据。4.2 最小可运行配置脚本加载后按 README 的示例初始化完整保留可复制运行(async engine { await loadBasic(engine); await loadCmySecondariesPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: cmySecondaries, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);示例中各选项的作用number.value: 200画布中粒子总数shape.type: circle圆形粒子调色板只决定颜色形状由粒子选项决定size.value: { min: 10, max: 15 }每个粒子半径在 10–15 之间随机move.enable: true, speed: 2开启运动速度为 2palette: cmySecondaries顶层选项触发引擎导入调色板原理见第 5 节。4.3 自定义README 的 Customization 一节提醒你可以像标准 tsParticles 安装那样覆盖所有选项。由于调色板只写入背景、混合模式和粒子涂装三类字段因此move.speed、size、links、交互选项等都不受影响可以自由覆盖。反过来如果你想换背景色需要显式设置background.color来覆盖调色板写入的#000000——但这样做会削弱screen混合模式的视觉基础screen 混合在深底上叠加提亮效果最佳。4.4 框架组件README 建议使用官方组件库React、Vue 2/3、Angular、Svelte、Preact、Solid 等时查阅组件库文档并照常调用loadCmySecondariesPalette函数再在组件的 options 中传入palette: cmySecondaries。本仓库的 wrappers 目录收录了各框架封装包其加载模式与上面 CDN 示例一致先loadBasic或对应基础包再loadCmySecondariesPalette。5. 引擎内部palette选项如何被展开这是理解调色板行为的关键。当 options 中出现palette字段时引擎在 engine/src/Options/Classes/Options.ts 的doLoad中检测到它并立即调用私有方法#importPaletteif (data.palette ! undefined) { this.palette data.palette; this.#importPalette(this.palette); }#importPalette同文件 #L142-L161按名称从PluginManager取出调色板数据找不到则静默返回找到后把调色板展开为三个标准选项写入当前 options#importPalette(palette: string): void { const paletteData this.#pluginManager.getPalette(palette); if (!paletteData) { return; } this.load({ background: { color: paletteData.background, // - background: #000000 }, blend: { enable: true, mode: paletteData.blendMode, // - blend: screen }, particles: { palette, // 递归下钻到粒子层 }, }); }对应到 cmySecondaries这一步等价于设置了黑色背景、开启screen混合并把palette名字传给particles。粒子层在 engine/src/Options/Classes/Particles/ParticlesOptions.ts 的#importPalette中完成颜色到涂装的转换取出paletteData.colors用isArray判断单组/多组归一化为数组colorVariants对每一组颜色变体flatMap出一个IPaint对象若存在fill构造{ fill: { color: { value }, enable, opacity } }若同时存在stroke再附上描边的color/opacity/width若产出的 paint 变体多于一个整体作为多值paint写入每个粒子随机命中其中一个变体否则取第一个最后this.load({ paint: palettePaint, blend: { enable: true, mode: paletteData.blendMode } })——粒子自己也开启与调色板一致的混合模式。对 cmySecondaries 具体而言colors.fill.value是[#00ffff, #ff00ff, #ffff00]三值数组引擎把它映射为三个 paint 变体于是 200 个圆形粒子各自随机染上青、品红、黄之一——这正是示例图中三色圆点散布在黑色背景上的来源screen混合让粒子相互重叠处产生叠加提亮。6. 包结构与版本信息源码与构建配置集中在 palettes/spectrum/cmySecondariessrc/4 个入口/数据文件、rollup.config.js、多套 tsconfigbase/browser/module/typespackage.json包名tsparticles/palette-cmy-secondaries当前版本 4.3.3type: moduleexports提供主入口与./lazy子路径的五种形态types/browser/esm/cjs/umd构建脚本基于tsparticles-build版本历史见 CHANGELOG.md最近的几次发布4.3.3 / 4.3.2 / 4.3.1 等均为 monorepo 统一版本联动version bump only调色板本体配置稳定适用前提该调色板属于 tsParticles v4 调色板体系依赖同仓库的tsparticles/engine示例代码基于 v4 的engine.load({ id, options })API。7. 在 spectrum 家族中的位置cmySecondaries 所在的spectrum家族还包括acidPair、dualityBlueYellow、dualityGreenMagenta、dualityRedCyan、fullSpectrum、okabeItoAccessible、prismScatter、rainbow、rgbPrimaries等见 palettes/spectrum。接入方式与本文完全相同安装对应tsparticles/palette-*包、调用其loadXxxPalette、在 options 里写palette: 名称。例如姊妹调色板 palettes/spectrum/rgbPrimaries/README.md 中的用法就是palette: rgbPrimaries其 src/index.ts 与 cmySecondaries 的注册结构逐行同构。仓库其余调色板fire、nature、tech 等家族也遵循同一套IPaletteaddPalette机制掌握一个即可类推全部。8. 小结是什么cmySecondaries 是 tsParticles 的 CMY 次级色调色板三色填充#00ffff/#ff00ff/#ffff00、黑色背景、screen混合、无描边定义见 palettes/spectrum/cmySecondaries/src/options.ts怎么装CDN 引入基础包 调色板脚本或 npm 安装tsparticles/palette-cmy-secondaries支持 ESM/CJS/types/UMD 及./lazy子路径调用loadCmySecondariesPalette(engine)注册到PluginManager怎么用options 顶层写palette: cmySecondaries配合最小粒子配置即可调色板只写背景、混合与涂装其余选项全部可自由覆盖底层原理Options.doLoad检测到palette后#importPalette将其展开为background.colorblendparticles.palette粒子层再把调色板颜色转成多变体paint实现一个字段换一套配色的接入体验。【免费下载链接】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），仅供参考