企业官网建设流程全解析

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 中的色板表，该调色板包含以下颜色：

配套参数：Blend mode为source-over，Fill（填充）为true。整组颜色从#E9D5FF到#3C096C形成了由浅至深的连续紫色梯度，配合浅紫背景，视觉上非常统一，适合作为网页的庆祝纸屑背景或氛围动效。

这里需要说明一个数据结构细节：引擎对调色板的颜色定义并不强制只能有"填充"一种。查看引擎的类型定义 IPalette.ts，可以发现IPalette支持fill与stroke两组颜色，其中填充色可配置enable（开关）、opacity（透明度范围）和value（单个或多个颜色值），描边色还额外支持width（描边宽度范围）。本调色板只启用了fill，未使用stroke。

三、快速使用清单

包 README 给出了三步快速上手指引，结合仓库结构可以进一步明确每一步的职责：

1. 安装@tsparticles/engine（或使用下面的 CDN bundle，bundle 中已内置引擎运行时）；
2. 加载一个基础运行时包（例如@tsparticles/basic），并在tsParticles.load(...)之前调用loadMonochromePurplePalette注册调色板；
3. 在 options 中设置palette字段，并搭配一份最简的 particles 配置。

核心心法：调色板只定义颜色，不定义完整行为，因此必须与一个运行时包和粒子选项配合使用。运行时包负责提供粒子的形状、移动、绘制等能力，调色板负责在这些能力之上套用配色。

四、安装与加载方式

4.1 CDN / 原生 JavaScript / jQuery

包 README 提供的 CDN 引入方式如下：

<script src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@4/tsparticles.basic.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-monochromePurple@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>

第一行加载基础 bundle（提供loadBasic），第二行加载调色板 bundle。需要提醒的是：从构建配置 rollup.config.js 看，本包构建时传入的moduleName为palette-monochromePurple，即按规则生成的 CDN 文件名应为tsparticles.palette-monochromePurple.min.js；README 中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 个圆形粒子，尺寸在 10～15 之间随机，以速度 2 缓慢飘动，颜色自动取自调色板的 7 个紫色。注意：行为部分（数量、形状、大小、移动）是普通粒子配置，与调色板无关；palette: "monochromePurple"才是触发配色套用的关键字段。

关于 palette 名称的一个源码细节

包 README 示例中使用的是palette: "monochromePurple"。但查看注册逻辑 index.ts 可以发现，插件实际向引擎注册的内部名称是confetti-monochrome-purple：

const paletteName = "confetti-monochrome-purple"; export async function loadConfettiMonochromePurplePalette(engine: Engine): Promise<void> { await engine.pluginManager.register(e => { e.pluginManager.addPalette(paletteName, options); }); }

引擎的 PluginManager.ts 通过一个Map<string, 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函数即可。加载时机与原生用法一致：先注册调色板，再加载粒子配置。

九、常见问题速查

十、结语与延伸阅读

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