企业官网建设流程全解析

tsParticles 紫色烟雾调色板（Colored Smoke Purple 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

本篇技术指南围绕 tsParticles 官方调色板@tsparticles/palette-colored-smoke-purple（Colored Smoke - Purple）展开，讲解如何通过 CDN 或 npm 快速接入这一组紫色系粒子配色、如何在配置中引用palette选项、如何叠加粒子行为参数进行自定义，并结合本仓库的 engine 源码（IPalette.ts、PluginManager.ts、ParticlesOptions.ts）剖析调色板从注册到被引擎解析的底层原理。读完本文，你将能独立把紫色烟雾调色板接入任意 tsParticles 场景，并理解"调色板只定义颜色、不定义行为"这一核心设计。

调色板（Palette）与预设（Preset）的本质区别

在开始使用前，先明确一个概念：调色板只负责颜色，不负责完整行为。原 README 明确强调："A palette defines colors, not complete behavior, so pair it with a runtime package and particle options."（调色板定义的是颜色而非完整行为，因此需要搭配运行时包和粒子选项一起使用）。

这与 preset（预设）形成对比：预设是完整可用的ISourceOptions配置集合，而调色板仅提供一组颜色值、背景色与混合模式。实际效果由你写入的particles配置（数量、形状、大小、运动等）决定，调色板只填充颜色维度。这一点从本仓库的目录组织也能看出：presets/ 下每个子目录都包含完整的 options 配置，而 palettes/atmosphere/coloredSmokePurple 目录的核心只是一个 options.ts 颜色定义文件。

Colored Smoke - Purple 颜色明细

该调色板包含 6 个填充色（fill color）与 1 个背景色（background），使用source-over混合模式并启用填充（fill: true），完整定义如下：

这些值直接定义在 palettes/atmosphere/coloredSmokePurple/src/options.ts 中，与 README 的颜色表格一一对应：

export const options: IPalette = { name: "Colored Smoke - Purple", background: "#040010", blendMode: "source-over", colors: { fill: { enable: true, value: [ "#110022", "#330055", "#550088", "#8811AA", "#BB33CC", "#EE77FF", ], }, }, };

调色板的引擎侧数据结构

调色板在引擎中的类型定义位于 engine/src/Core/Interfaces/IPalette.ts，是理解上述 options 结构的关键：

• IPalette：包含name（调色板名称）、background（背景色）、blendMode（Canvas 混合模式，类型为GlobalCompositeOperation）、colors（颜色配置，支持单个或多个集合）；
• IPaletteColors：可选fill（填充）与stroke（描边）；
• IPaletteColorsFill：enable（开关）、opacity（可选透明度范围，类型为RangeValue）、value（色值，SingleOrMultiple<string>支持单个或多个字符串色值）；
• IPaletteColorsStroke：opacity、value、width（描边宽度范围）。

可见调色板除了填色还支持描边与透明度范围，Colored Smoke - Purple 只用到了fill分支。

源码视角：调色板如何被注册与解析

1. 注册：pluginManager.addPalette

调用loadColoredSmokePurplePalette(engine)后，调色板以"colored-smoke-purple"为键注册进引擎的插件管理器。见 palettes/atmosphere/coloredSmokePurple/src/index.ts：

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

引擎侧PluginManager维护一个palettes: Map<string, IPalette>（engine/src/Core/Utils/PluginManager.ts），addPalette将其写入该 Map（L163-L165），getPalette(name)按名称读取（L247-L249）。

该包还提供了懒加载入口 src/index.lazy.ts，通过动态import("./options.js")延迟加载颜色定义，适合需要减小首屏包体积的 ESM 场景；浏览器全局入口 src/browser.ts 则会把loadColoredSmokePurplePalette挂到globalThis上，供 CDN 全局脚本使用。

2. 解析：options 中的 palette 选项被展开为具体配置

当你在options中写入palette: "coloredSmokePurple"时，引擎会在两处进行展开：

• 顶层 Options.ts 的#importPalette：把background写入background.color，把blendMode写入blend.enable = true与blend.mode；
• 粒子级 ParticlesOptions.ts 的#importPalette：将colors数组映射为paint配置（fill/stroke的color.value、opacity、width），并同样启用blend。

也就是说，palette: "coloredSmokePurple"一行配置实际等价于手动书写背景色、混合模式与 paint 颜色集合，这正是"用一行配置代替大量颜色配置"的便利所在。从源码可以推断，如果注册时名称写错或未调用加载函数，getPalette会返回undefined，对应配置会被静默跳过（ParticlesOptions.ts#L127-L129），因此务必保证先加载调色板再执行tsParticles.load(...)。

快速使用清单

原 README 给出了三步接入清单，整理如下：

1. 安装@tsparticles/engine（或直接使用下方 CDN bundle）；
2. 加载一个基础运行时包（例如@tsparticles/basic），并在tsParticles.load(...)之前调用loadColoredSmokePurplePalette；
3. 在 options 中同时应用调色板与一份最简粒子配置（数量、形状、大小、运动等）。

CDN / Vanilla JS / jQuery 接入

通过 jsDelivr CDN 加载基础包与调色板脚本（@4对应 v4 版本线）：

<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-coloredSmokePurple@4/tsparticles.palette-coloredSmokePurple.min.js"></script>

注意：原 README 中第二个脚本的文件名尾部存在笔误（写成了palette-coloredSmokeAmber.min.js）。根据本仓库 package.json 中声明的包名@tsparticles/palette-colored-smoke-purple，实际 CDN 文件应为tsparticles.palette-coloredSmokePurple.min.js。

脚本加载完成后，初始化代码如下：

(async engine => { await loadBasic(engine); await loadColoredSmokePurplePalette(engine); const options = { particles: { number: { value: 200 }, shape: { type: "circle" }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: "coloredSmokePurple", }; await engine.load({ id: "tsparticles", options, }); })(tsParticles);

各配置项的作用与取值范围说明：

• particles.number.value: 200：画面中常驻粒子数量上限；
• particles.shape.type: "circle"：粒子形状为圆形；
• particles.size.value: { min: 10, max: 15 }：粒子尺寸在 10～15 像素之间随机，较大的粒子配合紫色系更适合营造"烟雾"质感；
• particles.move.enable: true与speed: 2：开启慢速漂移（速度 2 为像素/帧量级的移动速度）；
• palette: "coloredSmokePurple"：核心一行——让引擎自动展开为背景色、混合模式与紫色填充色集合（解析细节见上文"源码视角"一节）。

id: "tsparticles"对应页面中用于承载 canvas 的元素 id。

自定义与覆盖

调色板并非封闭的"黑盒"：你可以在标准 tsParticles 配置中覆盖任意属性（README 中同样以 ⚠️ 醒目标注了这一点）。例如在palette之上追加：

const options = { particles: { number: { value: 300 }, color: { value: "#FFFFFF" }, // 覆盖调色板颜色，改为白色粒子 opacity: { value: 0.8 }, size: { value: { min: 5, max: 20 } }, move: { enable: true, speed: 1.5, direction: "top" }, links: { enable: true, color: "#BB33CC" }, }, background: { color: "#020008" }, // 覆盖调色板背景色 palette: "coloredSmokePurple", };

覆盖遵循 tsParticles 常规的"后加载覆盖先加载"合并规则：palette展开的属性会被你显式书写的同名字段覆盖，因此可以只保留紫色系填充、同时替换背景与运动行为。

在框架组件库中使用

tsParticles 为 React、Vue（2.x/3.x）、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 与 Web Components 提供了组件库封装。使用方式为：先按对应组件库的文档完成@tsparticles/engine与组件包的初始化，然后在组件创建/挂载前调用loadColoredSmokePurplePalette(engine)，最后照常传入包含palette: "coloredSmokePurple"的 options。本仓库中对应组件实现可参考 wrappers/ 与 integrations/ 目录下的各框架封装。

进一步探索

• 该调色板的完整工程配置（构建、TypeScript、rollup）见 palettes/atmosphere/coloredSmokePurple 目录；
• 同系列大气主题调色板（amber、blue、green、magenta、orange、rainbow、red、teal、dustHaze、fogMorning、volcanicAsh 等）位于 palettes/atmosphere/ 目录，接入方式完全一致，仅需替换加载函数与palette名称；
• 引擎对调色板/预设的统一管理逻辑集中在 engine/src/Core/Utils/PluginManager.ts；
• 调色板选项（background、blend、palette）的加载与展开逻辑见 engine/src/Options/Classes/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