企业官网建设流程全解析

tsParticles Colored Smoke Green 调色板实战指南：快速构建绿色烟雾粒子背景

【免费下载链接】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-green调色板的完整技术指南。该调色板为粒子效果预置了 6 种深浅不一的绿色填充色与配套背景色，适合快速搭建"彩色烟雾"风格的页面背景动画。读完本文，你将掌握调色板的注册方式（loadColoredSmokeGreenPalette）、颜色构成、与@tsparticles/basic等运行时包的搭配方法，以及如何通过标准 tsParticles 配置对其做深度自定义。

图片为仓库内 示例图，展示了该调色板在深色背景下呈现的绿色粒子散布效果。

调色板是什么

tsParticles 的调色板（Palette）是一组只定义颜色、不定义行为的预设数据。它解决的是"颜色从哪来"的问题，而不是"粒子怎么动"的问题——运动、形状、数量等行为仍然由你的粒子配置（Particles Options）与运行时包（如@tsparticles/basic）决定。

本调色板名为Colored Smoke Green（内部标识符colored-smoke-green），在 options.ts 中定义的完整数据为：

import { type IPalette } from "@tsparticles/engine"; export const options: IPalette = { name: "Colored Smoke - Green", background: "#010802", blendMode: "source-over", colors: { fill: { enable: true, value: [ "#001100", "#003300", "#005500", "#117722", "#33AA55", "#77DD88", ], }, }, };

颜色构成

原文档给出的色板由 5 个主色与 1 个辅助色（共 6 个填充色）加 1 个背景色组成：

配套参数：Blend mode（混合模式）为source-over，Fill（填充）为true。粒子渲染时会在#010802背景上使用source-over混合方式绘制上述绿色圆形，形成烟雾般的层次过渡。

结构对应的接口定义

IPalette接口定义于 engine/src/Core/Interfaces/IPalette.ts：

• name：调色板名称（string）；
• background：背景色（string）；
• blendMode：画布混合模式（GlobalCompositeOperation，此处为source-over）；
• colors：颜色集合，可为单个或数组（SingleOrMultiple<IPaletteColors>）；
  • fill：填充色配置，含enable（是否启用）与value（单个或多个色值，支持RangeValue范围）；
  • stroke：可选描边配置，含width与opacity。

调色板如何注册并生效：源码级原理

理解调色板的工作原理，有助于排查"颜色没生效"的问题。核心注册代码位于 src/index.ts：

import { type Engine } from "@tsparticles/engine"; import { options } from "./options.js"; const paletteName = "colored-smoke-green"; export async function loadColoredSmokeGreenPalette(engine: Engine): Promise<void> { await engine.pluginManager.register(e => { e.pluginManager.addPalette(paletteName, options); }); }

调用链可以概括为三步：

1. loadColoredSmokeGreenPalette(engine)通过engine.pluginManager.register(...)把调色板注册逻辑挂载到引擎；
2. 注册回调内部调用addPalette(paletteName, options)，将colored-smoke-green这个名称与颜色数据存入 PluginManager 的palettes映射表中（见 engine/src/Core/Utils/PluginManager.ts 中的addPalette与getPalette方法）；
3. 当配置中出现palette: "coloredSmokeGreen"时，引擎在加载配置阶段（engine/src/Options/Classes/Options.ts 的doLoad方法）调用#importPalette，从 PluginManager 取出对应调色板并应用到容器。

此外，仓库还提供了懒加载入口src/index.lazy.ts：它从@tsparticles/engine/lazy导入类型，并在注册回调内使用动态import("./options.js")，只有真正加载调色板时才拉取颜色数据，适合对首屏体积敏感的场景。npm 包的exports字段（见 package.json）同时暴露了.（标准入口）与./lazy（懒加载入口）两条路径。

注册时机要求：loadColoredSmokeGreenPalette必须在tsParticles.load(...)之前调用，否则引擎在处理palette选项时还找不到对应名称的调色板。

快速开始：三种接入方式

原文档给出的 Quick checklist 为三步：① 安装@tsparticles/engine（或使用 CDN bundle）；② 加载基础包并调用loadColoredSmokeGreenPalette；③ 在选项中应用调色板 + 最小粒子配置。下面按接入方式展开。

方式一：CDN / Vanilla JS / jQuery

在 HTML 中依次引入基础包与调色板 bundle（注意：调色板 bundle 的正确文件名是tsparticles.palette-coloredSmokeGreen.min.js）：

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

原文档此处脚本名写作coloredSmokeAmber属于笔误，实际构建产物为tsparticles.palette-coloredSmokeGreen.min.js，请以本处为准。

脚本加载后，loadColoredSmokeGreenPalette会作为全局函数挂载（由 src/browser.ts 的globalObject.loadColoredSmokeGreenPalette = loadColoredSmokeGreenPalette;完成）。

方式二：npm 安装 + ES Module

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

标准入口使用方式：

import { tsParticles } from "@tsparticles/engine"; import { loadBasic } from "@tsparticles/basic"; import { loadColoredSmokeGreenPalette } from "@tsparticles/palette-colored-smoke-green"; (async () => { await loadBasic(tsParticles); await loadColoredSmokeGreenPalette(tsParticles); // 然后调用 tsParticles.load(...) })();

如果使用懒加载入口：

import { loadColoredSmokeGreenPalette } from "@tsparticles/palette-colored-smoke-green/lazy";

方式三：框架组件库

若项目使用 React、Vue（2.x/3.x）、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 或 Web Components 等框架，可先安装对应的 tsParticles 组件库（如@tsparticles/react、@tsparticles/vue3等，仓库 wrappers 目录下可见全部封装），在组件初始化时同样调用loadColoredSmokeGreenPalette完成注册，再把palette写进选项对象。

完整可运行示例

原文档提供了一个最小配置，结合调色板即可运行：

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

各字段含义与取值说明：

把这段代码放进任意.html的<script>标签（配合方式一的 CDN 脚本）即可看到效果：深墨绿背景上，绿色粒子缓慢漂浮扩散。

自定义与覆盖

调色板只提供颜色默认值，所有选项都可以像标准 tsParticles 安装一样被覆盖。例如，想调整粒子行为或替换部分颜色时，直接在options中显式声明对应属性即可：

const options = { background: { color: "#001100" }, // 覆盖调色板背景 particles: { number: { value: 300 }, shape: { type: "circle" }, size: { value: { min: 8, max: 20 } }, opacity: { value: { min: 0.4, max: 0.9 } }, // 半透明叠加出烟雾层次 move: { enable: true, speed: 1.5, direction: "top", outModes: { default: "out" }, }, }, palette: "coloredSmokeGreen", };

如果想在保留调色板填充色的同时叠加描边，IPalette还支持stroke配置（value、width、opacity），但本调色板的默认options.ts仅启用了fill。

常见问题

Q1：加载后粒子颜色没有变化？先确认loadColoredSmokeGreenPalette(engine)在engine.load(...)之前执行；其次确认选项顶层写了palette: "coloredSmokeGreen"；最后检查引入的 bundle 文件名是否拼写正确（见上文方式一）。

Q2：palette和preset有什么区别？preset是一整套完整方案（含粒子行为、交互等），而palette只负责颜色。原文档明确强调："A palette defines colors, not complete behavior"，因此调色板必须搭配运行时包与粒子配置一起使用。

Q3：如何在框架中加载？在组件生命周期里调用loadColoredSmokeGreenPalette（同样须先于实例加载），并把palette传入选项。各框架组件库的详细文档位于 wrappers 对应目录。

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