tsParticles Colored Smoke Rainbow 调色板：安装、配置与源码机制解析

tsParticles Colored Smoke Rainbow 调色板：安装、配置与源码机制解析

【免费下载链接】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-rainbow（Colored Smoke – Rainbow）展开，介绍如何通过 CDN 或 npm 快速接入这组彩虹色烟雾配色，并在粒子配置中通过palette: "coloredSmokeRainbow"一键应用。文中同时深入解读该调色板在@tsparticles/engine中的注册与加载机制（IPalette、PluginManager、Options.#importPalette），帮助读者理解"调色板只定义颜色、不定义行为"的设计边界，并掌握覆盖默认配色的扩展方法。

tsParticles Colored Smoke Rainbow 调色板粒子效果示例

一、什么是 Colored Smoke Rainbow 调色板

Colored Smoke Rainbow 是 tsParticles 众多官方调色板（palette）之一，位于仓库的 palettes/atmosphere/coloredSmokeRainbow 目录下。它的定位非常明确：只提供一组颜色定义，不包含任何粒子行为逻辑——即文档中所强调的 "A palette defines colors, not complete behavior, so pair it with a runtime package and particle options"。

调色板本身是一份标准的IPalette结构描述，其完整定义记录在 engine/src/Core/Interfaces/IPalette.ts：

其中IPaletteColorsFill支持enable（开关）、opacity（不透明度，可为范围值）与value（单个或多个颜色值）；IPaletteColorsStroke额外包含width（描边宽度）。Colored Smoke Rainbow 只使用了fill分支。

二、颜色组成：七色虹彩 + 黑色背景

在 src/options.ts 中可以看到该调色板的真实定义：名称为"Colored Smoke - Rainbow"，背景色为#050505，混合模式为source-over，填充色开启，共 7 种颜色。对应文档中的颜色表如下：

注意：这 7 种颜色在源码中以数组形式保存在colors.fill.value中，粒子在渲染时会从该颜色池中取值，因此画面呈现出红、橙、黄、绿、蓝、紫交错的彩虹效果。

三、快速上手：三步接入清单

官方文档给出的快速检查清单（Quick checklist）如下，三步即可完成接入：

1. 安装运行时基础包：安装@tsparticles/engine，或直接使用下方 CDN 全量 bundle；
2. 加载基础功能包并注册调色板：例如加载@tsparticles/basic，并在tsParticles.load(...)之前调用loadColoredSmokeRainbowPalette(engine)；
3. 在配置中应用调色板：在 options 中设置palette: "coloredSmokeRainbow"，并搭配一份最简粒子配置。

需要特别强调的是：调色板只负责"颜色从哪里来"，粒子的数量、形状、大小、运动等行为仍由你自行配置，这也是"palette defines colors, not complete behavior"的含义。

四、CDN / Vanilla JS / jQuery 使用方式

如果项目通过<script>标签直接引入（纯 HTML、Vanilla JS 或 jQuery），按文档指引引入两个脚本即可：

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

脚本加载完成后，即可用如下方式初始化tsParticles：

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

这份最小配置中：

• number.value: 200控制粒子总数；
• shape.type: "circle"指定圆形粒子；
• size.value: { min: 10, max: 15 }让粒子尺寸在 10～15 之间随机；
• move.speed: 2设定匀速漂移速度；
• palette: "coloredSmokeRainbow"是应用调色板的关键键，引擎会根据该名称查找已注册的调色板并自动套用背景色、混合模式与颜色池。

五、npm 模块化安装与 Lazy 加载

在模块化工程中，推荐直接安装 npm 包。从 package.json 可以看到，该包的正式名称为@tsparticles/palette-colored-smoke-rainbow（当前仓库内版本为 4.3.3），其exports同时暴露了标准入口与./lazy入口：

npm install @tsparticles/engine @tsparticles/basic @tsparticles/palette-colored-smoke-rainbow

ESM 使用方式：

import { tsParticles } from "@tsparticles/engine"; import { loadBasic } from "@tsparticles/basic"; import { loadColoredSmokeRainbowPalette } from "@tsparticles/palette-colored-smoke-rainbow"; await loadBasic(tsParticles); await loadColoredSmokeRainbowPalette(tsParticles);

如果希望把调色板定义延迟到运行时按需加载，可以改用@tsparticles/palette-colored-smoke-rainbow/lazy入口。从 src/index.lazy.ts 的实现可以看出，lazy 版本会在注册回调内通过await import("./options.js")动态加载颜色定义，从而减小首屏包体。

六、源码解析：调色板是如何注册与生效的

6.1 注册入口：loadColoredSmokeRainbowPalette

标准入口 src/index.ts 的实现非常简洁：

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

它通过engine.pluginManager.register(...)将调色板以"colored-smoke-rainbow"为键注册进插件管理器。而浏览器环境下，src/browser.ts 会把该函数挂到globalThis.loadColoredSmokeRainbowPalette上，这就是 CDN 场景下可以直接调用它的原因。

6.2 存储与查询：PluginManager

在引擎的 PluginManager 中，调色板被存储在一个Map<string, IPalette>中（第 58 行readonly palettes）。两个核心方法：

• addPalette(name, palette)（第 163 行）：将调色板写入 Map；
• getPalette(name)（第 247 行）：按名称取出调色板。

6.3 配置解析：Options.#importPalette

当你在 options 中写下palette: "coloredSmokeRainbow"时，引擎的 Options 类 会调用#importPalette(palette)，其内部逻辑为：

1. 通过pluginManager.getPalette(palette)查找调色板，找不到则直接返回；
2. 找到后，把paletteData.background应用到background.color；
3. 把paletteData.blendMode应用到blend.mode并开启blend.enable；
4. 将particles.palette指向该调色板名称，供粒子取色使用。

可以看到，调色板机制本质上是"配置注入"：背景色、混合模式、颜色池三项被自动合并进你的粒子选项，无需手工逐一填写。

七、自定义与扩展

调色板只是起点。官方文档明确指出：所有 options 都可以像标准 tsParticles 安装那样通过定义对应属性来覆盖（override）。例如，你可以在使用调色板的同时，自行覆盖粒子数量、形状、运动轨迹，甚至手动指定particles.color来局部替换取色逻辑：

const options = { particles: { number: { value: 300 }, shape: { type: "star" }, // 覆盖形状 size: { value: { min: 5, max: 20 } }, move: { enable: true, speed: 3, direction: "top", // 改为向上飘动，模拟烟雾升腾 }, }, palette: "coloredSmokeRainbow", // 颜色仍来自调色板 };

如果需要全新的配色，也可以仿照 src/options.ts 的结构自行构造IPalette对象，并通过engine.pluginManager.addPalette(自定义名称, 自定义调色板)注册，从而完全掌控背景色、混合模式与颜色池。

八、框架组件集成

在 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 与 Web Components 等框架中，tsParticles 均有对应的组件库。集成方式与原生场景一致：在对应组件库的文档指引下，调用loadColoredSmokeRainbowPalette函数完成注册，然后在组件的 options 中设置palette: "coloredSmokeRainbow"即可。仓库中 wrappers 目录下保存了各框架组件的实现源码，可作为集成时的参考。

九、相关资源与进一步探索

• 调色板包源码：palettes/atmosphere/coloredSmokeRainbow（含src/options.ts、src/index.ts、src/index.lazy.ts、src/browser.ts）
• 调色板类型定义：engine/src/Core/Interfaces/IPalette.ts
• 调色板注册与查询：engine/src/Core/Utils/PluginManager.ts
• 调色板配置注入逻辑：engine/src/Options/Classes/Options.ts#L142-L161
• 更多预设与调色板：仓库根目录下的 presets 与 palettes 目录收录了全部官方配色与预设，例如palettes/atmosphere下还有fire、water、space等不同主题的同系列调色板，可对照阅读。

【免费下载链接】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