tsParticles Monochrome Pink 调色板指南：粉色系彩纸粒子的配色原理与接入实践

tsParticles Monochrome Pink 调色板指南粉色系彩纸粒子的配色原理与接入实践【免费下载链接】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 官方调色板palettes/confetti/monochromePinknpm 包名tsparticles/palette-confetti-monochrome-pink为对象完整讲解其 7 种粉色系颜色的取值、底层IPalette数据模型以及从 CDN 脚本到 npm 模块再到组件库的三种接入方式。读完本文你将掌握 tsParticles 调色板只定义颜色、不定义行为的设计哲学并能独立将 Monochrome Pink 配色应用到自己的彩纸confetti粒子场景中。一、调色板概览一份粉色调色板包含哪些信息monochromePink是一个面向 confetti彩纸场景的粉色调色板。官方 README 用一张表格完整列出了它的全部视觉资产本文原样继承如下角色色值说明粒子填充色#FF99BB浅粉粒子填充色#FF66AA亮粉粒子填充色#FF3388玫粉粒子填充色#CC1166深玫红粒子填充色#990044深酒红粒子填充色#FF0055亮红粉粒子填充色#FFCCDD极浅粉高光色背景色#fff0f5淡薰衣草粉lavender blush混合模式source-overCanvas 默认混合模式填充开关true启用粒子填充色可以看到这份调色板的配色逻辑是同色系深浅渐变从近乎白色的#FFCCDD一路过渡到深沉的#990044再点缀高饱和的#FF0055在#fff0f5的浅粉背景上既能保持整体色调统一又因明度与饱和度的落差而具备层次感非常适合婚礼、情人节、美妆、礼品等粉色主题页面。二、调色板的本质一份数据而非一套行为在动手接入前必须先理解 tsParticles 调色板的核心设计它只是一份颜色数据不包含任何粒子运动、数量或形状逻辑。README 的 Quick checklist 也强调A palette defines colors, not complete behavior, so pair it with a runtime package and particle options调色板只定义颜色不定义完整行为需配合运行时包和粒子选项使用。仓库源码直接印证了这一点。调色板的全部内容就是 options.ts 中的一个常量对象import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Confetti - Monochrome Pink, background: #fff0f5, blendMode: source-over, colors: { fill: { enable: true, value: [ #FF99BB, #FF66AA, #FF3388, #CC1166, #990044, #FF0055, #FFCCDD, ], }, }, };而这份数据要遵循的接口IPalette定义在引擎源码 engine/src/Core/Interfaces/IPalette.ts 中结构如下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支持fill填充色与stroke描边色两组配置fill可设置enable开关、可选opacity透明度范围以及value颜色值单个字符串或字符串数组stroke还额外支持width描边宽度范围见 IPalette.ts。Monochrome Pink 只使用了fill分支enable: true表示启用填充色value传入 7 个十六进制色值字符串。这份数据如何生效从 index.ts 可以看到注册机制export async function loadConfettiMonochromePinkPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }加载函数通过engine.pluginManager.register把调色板注册进引擎addPalette(paletteName, options)将上述数据绑定到confetti-monochrome-pink这个调色板键名上。之后你在粒子配置里写palette: monochromePink引擎就会读取这份颜色数据并应用到粒子渲染上。三、快速上手指南Quick checklist官方 README 给出的三条快速检查清单是接入任何调色板的最小行动路径安装tsparticles/engine或直接使用下方 CDN bundle加载一个基础运行时包例如tsparticles/basic并在tsParticles.load(...)之前调用loadMonochromePinkPalette或loadConfettiMonochromePinkPalette在 options 中同时配置palette: monochromePink与一份最小化的粒子参数。其中第 2 步的先加载调色板、再加载配置顺序是必须的——调色板注册属于引擎插件系统的初始化动作必须在粒子加载前完成否则引擎无法解析配置中的palette字段。四、接入方式一CDN / Vanilla JS / jQuery最快捷的方式是直接通过 CDN 引入两个 bundle。README 给出的 HTML 示例如下4为 v4 版本线script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-monochromePink4/tsparticles.palette-coloredSmokeAmber.min.js/script注意README 与发布包 package.dist.json 中jsdelivr/unpkg字段写的是tsparticles.palette-colored-smoke-amber.min.js而构建配置 rollup.config.js 中moduleName为palette-monochromePink。两者不一致可以推断这是从其他调色板模板复制后未完全替换的遗留命名。以rollup.config.js中的moduleName为准本包实际产出的 UMD bundle 应为tsparticles.palette-monochromePink.min.js风格文件名在实际引用时请以 npm 包内 dist 目录实际生成的文件名为准。脚本加载完成后即可用官方 README 的示例代码初始化引擎该示例完整继承如下(async engine { await loadBasic(engine); await loadMonochromePinkPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: monochromePink, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段代码的要点拆解loadBasic(engine)提供 circle 等基础形状与基础粒子的运行时能力loadMonochromePinkPalette(engine)注册调色板数据options.particles定义粒子行为200 个粒子、圆形、尺寸 1015 之间随机、以速度 2 匀速移动关键一行是palette: monochromePink它把颜色来源从手工逐个写color数组切换为调色板自动分配若不写这行粒子将没有颜色。也就是说粒子动起来靠的是particles配置而粒子长什么样颜色由调色板接管——两者职责分离、互补配合这正是第二节强调的设计哲学在实战中的体现。五、接入方式二npm 模块与懒加载ESM / CJS / UMD在模块化工程中通过 npm 安装包名见 package.jsonnpm install tsparticles/engine tsparticles/basic tsparticles/palette-confetti-monochrome-pink包提供了两条导出路径见 package.json 的exports字段常规入口.导出loadConfettiMonochromePinkPalette来自 index.ts注册名称为confetti-monochrome-pink懒加载入口./lazy导出loadMonochromePinkPalette来自 index.lazy.ts注册名称为monochrome-pink并通过await import(./options.js)动态加载颜色数据适合在需要按需拆包、减小首屏体积的场景使用。两种入口都支持types/browser/import/require/umd多种模块格式可同时服务 TypeScript 类型提示、浏览器直接引用、ESM 打包与 CommonJS 环境。在模块化代码中使用示例import { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadConfettiMonochromePinkPalette } from tsparticles/palette-confetti-monochrome-pink; await loadBasic(tsParticles); await loadConfettiMonochromePinkPalette(tsParticles); await tsParticles.load({ id: tsparticles, options: { palette: monochromePink, particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2 }, }, }, });六、接入方式三框架组件库React / Vue / Angular 等如果你在使用带有 tsParticles 组件库的框架React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等流程不变查阅对应组件库文档在初始化组件之前调用loadMonochromePinkPalette或loadConfettiMonochromePinkPalette完成调色板注册然后在传给组件的 options 中写入palette: monochromePink即可。调色板注册与引擎加载的生命周期顺序与 Vanilla 场景完全一致。七、自定义与覆盖Customization官方 README 特别标注了Important ⚠️提示调色板中的所有选项都可以像标准 tsParticles 安装那样通过自定义 options 属性进行覆盖。这意味着你可以覆盖粒子行为调整particles.number.value、size、move.speed等参数改变粒子的密度、大小与运动节奏覆盖背景在 options 中显式指定background替代调色板自带的#fff0f5覆盖混合模式将blendMode从默认的source-over改为其他GlobalCompositeOperation值如multiply、screen获得不同的叠色效果扩展颜色不修改调色板源码而是在粒子color配置中追加自定义色值与调色板色值共同参与随机分配。由于调色板本质上只是一份可序列化的数据对象你甚至可以直接把 options.ts 中的颜色数组复制到自己的options.colors里手工使用——这为不引入调色板插件、仅借用配色方案的场景提供了便捷路径。八、相关资源与继续探索同系列调色板monochromePink属于 confetti 调色板家族同目录下还有 default、gold、monochromeBlue、monochromeGreen、monochromePurple、monochromeRed、neon、pastel、patriotic、rainbow、winter 等 11 个方案见 palettes/confetti 目录结构完全一致可对照阅读调色板数据模型IPalette/IPaletteColors/IPaletteColorsFill/IPaletteColorsStroke接口定义于 engine/src/Core/Interfaces/IPalette.ts是理解调色板全部可配置维度的权威参考注册机制engine.pluginManager.addPalette的调用链可继续追踪 engine/src/Core/Utils/PluginManager.ts构建配置调色板包的打包逻辑集中在 rollup.config.js其中paletteName: MonochromePink Palette用于生成 UMD 全局命名空间引擎入口若想了解调色板之外的整体能力可阅读 engine/src/index.ts 与 engine/README.md。综上Monochrome Pink 调色板是理解 tsParticles 调色板体系的最佳入门样本之一数据量小、结构清晰、源码路径集中。掌握调色板 颜色数据、运行时包 行为能力这条主线后你就能举一反三地接入仓库内任何一个调色板甚至基于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），仅供参考