tsParticles Monochrome Purple 调色板实战指南用 7 个紫色构建单色纸屑效果【免费下载链接】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/monochromePurple调色板包的完整技术指南核心讲解如何通过tsparticles/palette-confetti-monochrome-purple为粒子/纸屑效果快速套用一套 7 色紫色单色配色并搭配tsparticles/basic等运行时包直接出效果。读完本文你将掌握调色板的安装方式、loadMonochromePurplePalette的加载时机、palette选项的配置方法并能从源码层面理解调色板在引擎中定义颜色、不定义行为的底层工作原理。一、这是什么一个只定义颜色的调色板插件monochromePurple单色紫是 tsParticles 提供的 confetti 系列调色板之一与仓库中palettes/confetti/目录下的gold、monochromeBlue、rainbow、pastel等同属一类。它的职责非常纯粹只提供一套配色方案不包含任何粒子运动、形状或行为逻辑。这一点在包的源码中体现得最直接。调色板的核心数据定义在 options.ts全文就是一个实现了引擎IPalette接口的对象import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Confetti - Monochrome Purple, background: #f7f0ff, blendMode: source-over, colors: { fill: { enable: true, value: [ #D0A6FF, #B57CFF, #9A52FF, #7A2BE2, #5A189A, #3C096C, #E9D5FF, ], }, }, };可以看到它只声明了四件事调色板名称、背景色、画布混合模式blend mode、填充色列表。粒子如何移动、多大、什么形状全部由你通过常规的 particles 选项自行配置。二、配色明细7 个填充色 1 个背景色根据 options.ts 与包 README 中的色板表该调色板包含以下颜色颜色值说明#D0A6FF浅紫填充色#B57CFF淡紫填充色#9A52FF中紫填充色#7A2BE2蓝紫填充色#5A189A深紫填充色#3C096C极深紫填充色#E9D5FF极浅紫填充色#f7f0ff背景色Background配套参数Blend mode为source-overFill填充为true。整组颜色从#E9D5FF到#3C096C形成了由浅至深的连续紫色梯度配合浅紫背景视觉上非常统一适合作为网页的庆祝纸屑背景或氛围动效。这里需要说明一个数据结构细节引擎对调色板的颜色定义并不强制只能有填充一种。查看引擎的类型定义 IPalette.ts可以发现IPalette支持fill与stroke两组颜色其中填充色可配置enable开关、opacity透明度范围和value单个或多个颜色值描边色还额外支持width描边宽度范围。本调色板只启用了fill未使用stroke。三、快速使用清单包 README 给出了三步快速上手指引结合仓库结构可以进一步明确每一步的职责安装tsparticles/engine或使用下面的 CDN bundlebundle 中已内置引擎运行时加载一个基础运行时包例如tsparticles/basic并在tsParticles.load(...)之前调用loadMonochromePurplePalette注册调色板在 options 中设置palette字段并搭配一份最简的 particles 配置。核心心法调色板只定义颜色不定义完整行为因此必须与一个运行时包和粒子选项配合使用。运行时包负责提供粒子的形状、移动、绘制等能力调色板负责在这些能力之上套用配色。四、安装与加载方式4.1 CDN / 原生 JavaScript / jQuery包 README 提供的 CDN 引入方式如下script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-monochromePurple4/tsparticles.palette-coloredSmokeAmber.min.js/script第一行加载基础 bundle提供loadBasic第二行加载调色板 bundle。需要提醒的是从构建配置 rollup.config.js 看本包构建时传入的moduleName为palette-monochromePurple即按规则生成的 CDN 文件名应为tsparticles.palette-monochromePurple.min.jsREADME 中tsparticles.palette-coloredSmokeAmber.min.js这一文件名疑似从其他调色板colored smoke amber 系列复制粘贴而来实际使用时请以构建产物实际文件名为准。此外package.dist.json 中jsdelivr/unpkg字段也存在同样的命名复制痕迹可作为排查依据。4.2 npm / 模块化引入包名为tsparticles/palette-confetti-monochrome-purple见 package.json当前仓库版本为 4.3.3其导出结构支持标准 ESM、CJS、UMD 以及懒加载入口./lazy。典型用法import { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadMonochromePurplePalette } from tsparticles/palette-confetti-monochrome-purple; async function init() { await loadBasic(tsParticles); await loadMonochromePurplePalette(tsParticles); await tsParticles.load({ id: tsparticles, options: { /* ... */ }, }); }五、基础使用示例脚本加载完成后即可按下面的方式初始化tsParticles示例来自包 README(async engine { await loadBasic(engine); await loadMonochromePurplePalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: monochromePurple, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这份配置会生成 200 个圆形粒子尺寸在 1015 之间随机以速度 2 缓慢飘动颜色自动取自调色板的 7 个紫色。注意行为部分数量、形状、大小、移动是普通粒子配置与调色板无关palette: monochromePurple才是触发配色套用的关键字段。关于 palette 名称的一个源码细节包 README 示例中使用的是palette: monochromePurple。但查看注册逻辑 index.ts 可以发现插件实际向引擎注册的内部名称是confetti-monochrome-purpleconst paletteName confetti-monochrome-purple; export async function loadConfettiMonochromePurplePalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }引擎的 PluginManager.ts 通过一个Mapstring, IPalette维护调色板注册表addPalette(name, palette)负责写入getPalette(name)负责按名查询。如果你在实际运行时发现palette字段未能生效可以优先检查传入的名称是否与注册名confetti-monochrome-purple完全一致这是一个由源码结构推断、值得在实际项目中验证的细节。六、调色板在引擎内部是如何被消费的理解调色板如何变成颜色有助于排查配色不生效的问题。引擎在解析 options 时有两个入口会触发调色板导入顶层 Options.ts 中的#importPalette负责消费background与blendMode把调色板的背景色写入画布背景、把混合模式应用到绘制上下文粒子级 ParticlesOptions.ts 中的#importPalette负责把调色板的colors转换为粒子绘制paint配置——将fill.value映射为 paint 的填充色、fill.enable映射为填充开关、fill.opacity映射为透明度若存在stroke则连同描边色、透明度与宽度一并写入。也就是说当你在 options 中写了palette字段后引擎会先在注册表中查找对应调色板再把它翻译成背景、混合模式与粒子绘制颜色。若调色板未被正确加载例如loadMonochromePurplePalette调用晚于engine.load或名称不匹配getPalette会返回空配色自然就不会出现。懒加载入口为了控制首屏体积本包还提供了懒加载入口 index.lazy.ts。它与标准入口的功能完全一致区别在于使用import(./options.js)动态加载调色板数据适合在需要时才注册调色板的场景。对应 npm 包导出路径为tsparticles/palette-confetti-monochrome-purple/lazy见 package.json 的exports字段。七、自定义与覆盖包 README 特别强调你可以像任何标准 tsParticles 安装一样覆盖全部选项。例如你可以在保留调色板配色的同时把粒子改为方块、加大数量、加快速度或补充opacity、color等任意合法粒子选项const options { background: { color: #fff }, // 覆盖调色板默认背景 #f7f0ff particles: { number: { value: 300 }, shape: { type: square }, // 覆盖默认形状 size: { value: { min: 4, max: 8 } }, move: { enable: true, speed: 3 }, opacity: { value: 0.8 }, }, palette: monochromePurple, };调色板只是为你预先填好了配色相关的默认值任何你显式声明的属性都会按常规 tsParticles 合并优先级覆盖它。这也再次印证了调色板 配色预设而非成品动画的定位。八、在框架组件库中使用如果你在使用 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 或 Web Components 等框架的 tsParticles 组件库请查阅对应组件库文档在组件初始化前调用loadMonochromePurplePalette函数即可。加载时机与原生用法一致先注册调色板再加载粒子配置。九、常见问题速查问题排查方向配色不生效确认loadMonochromePurplePalette(engine)在engine.load(...)之前完成确认palette字段值与注册名一致源码注册名为confetti-monochrome-purple粒子不显示调色板不提供行为需自行配置particles.number、shape、move等选项或换用confetti等完整预设CDN 文件名 404以构建产物实际文件名为准moduleName为palette-monochromePurpleREADME 中的部分文件名疑似复制错误想换背景/混合模式调色板的background与blendMode均可在 options 中覆盖十、结语与延伸阅读monochromePurple是理解 tsParticles 调色板机制的一个极简范例插件入口index.ts 纯数据定义options.ts 引擎侧的消费逻辑Options/ParticlesOptions的#importPalette三层结构清晰可循。仓库palettes/confetti/目录下还有gold、monochromeBlue、neon、rainbow、winter等十余个同构调色板阅读本指南后你完全可以举一反三地使用它们。需要完整粒子行为时可进一步了解presets/confetti等预设包它们内部同样通过palette字段引用调色板参见 presets/confetti/src/options.ts。【免费下载链接】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），仅供参考