tsParticles Colored Smoke Amber 调色板完全指南：从 CDN 集成到源码级配色机制

tsParticles Colored Smoke Amber 调色板完全指南：从 CDN 集成到源码级配色机制

【免费下载链接】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 的Colored Smoke Amber（彩色烟雾琥珀）调色板是一套预置的琥珀色系配色方案，用于快速打造暖色调的粒子背景：它定义了 6 种从深棕到亮橙的粒子填充色、深色背景色以及source-over混合模式，并通过palette选项一键应用到粒子动画中。本文以该调色板为线索，完整讲解其安装、加载、配置与自定义方法，并结合仓库源码剖析调色板在引擎内部"从注册到生效"的实现原理，帮助你既会用、也懂其底层工作机制。

Colored Smoke Amber 调色板示例效果

调色板是什么：六色琥珀烟配色一览

Colored Smoke Amber 调色板的核心定义位于 options.ts，它是一份符合引擎IPalette接口的静态配置对象：

import { type IPalette } from "@tsparticles/engine"; export const options: IPalette = { name: "Colored Smoke - Amber", background: "#090500", blendMode: "source-over", colors: { fill: { enable: true, value: [ "#1A1000", "#3A2200", "#6B3D00", "#A65A00", "#D98A1A", "#FFC266", ], }, }, };

这份配置定义了以下要素：

颜色明细

这组颜色由深到浅、由暗到亮渐进排列，模拟了琥珀色烟雾在暗背景下由浓到淡的层次感，视觉上温暖且富有纵深感。调色板同时声明了Blend mode: source-over与Fill: true，前者保证粒子颜色以普通覆盖方式叠加，后者确保每个粒子都使用填充色渲染。

从源码理解调色板机制：IPalette 接口与注册链路

要真正用好调色板，有必要先看懂引擎如何定义和消费它。调色板的数据结构由引擎的 IPalette.ts 接口约束：

export interface IPalette { background: string; // 背景色 blendMode: GlobalCompositeOperation; // Canvas 混合模式 colors: SingleOrMultiple<IPaletteColors>; // 一组或多组颜色配置 name: string; // 调色板名称 }

其中IPaletteColors又分为可选的fill（填充）与stroke（描边）两部分：fill支持enable（开关）、opacity（透明度范围）和value（单个或多个色值）；stroke额外支持width（描边宽度范围）。Colored Smoke Amber 只使用了fill分支，因此粒子的描边保持默认关闭。

调色板通过引擎的插件管理器注册与查找，核心实现在 PluginManager.ts：

• addPalette(name, palette)：把调色板按名称存入内部的Map<string, IPalette>；
• getPalette(name)：按名称取出调色板数据。

而本调色板的加载函数定义在 index.ts：

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

可以看到：调用loadColoredSmokeAmberPalette(engine)后，调色板即以colored-smoke-amber为键注册进引擎，之后配置项中的palette字段才能解析到它。这也是"必须先加载调色板、再tsParticles.load(...)"这一顺序要求的根本原因。

配置解析时发生了什么

当配置中出现palette字段时，引擎在两级位置做了导入处理：

1. 顶层 Options（Options.ts）：读取data.palette后调用#importPalette，把paletteData.background写入background.color，把paletteData.blendMode写入blend.mode并启用blend（Options.ts）。也就是说，背景色和混合模式是调色板自动带来的，无需再手动配置。
2. 粒子层 ParticlesOptions（ParticlesOptions.ts）：把colors中的fill/stroke转换为引擎的paint（绘制）配置，包括颜色value、enable、opacity，并把blendMode同步到粒子的blend.mode。

因此，"调色板 = 颜色 + 背景 + 混合模式的打包方案"在引擎层是确定的事实：你只需写一行palette: "colored-smoke-amber"，颜色、背景、混合模式都会被自动装配到粒子上。

快速开始：三步接入清单

官方文档给出了最精简的接入流程，以下按原步骤展开：

1. 安装引擎：安装@tsparticles/engine（或直接使用下方的 CDN Bundle，Bundle 已内置引擎）；
2. 加载基础包并注册调色板：加载一个基础运行时包（例如@tsparticles/basic），并在tsParticles.load(...)之前调用loadColoredSmokeAmberPalette；
3. 在选项中应用调色板：在粒子配置之外加入palette: "colored-smoke-amber"以及一份最简粒子参数。

需要特别强调的是：调色板只定义颜色，不定义完整行为。粒子数量、形状、大小、运动等行为参数仍需你通过particles配置提供，调色板负责的是"看起来是什么颜色"，而非"粒子如何运动"。

CDN / 原生 JavaScript / jQuery 用法

对于不想使用构建工具的场景，通过 jsDelivr 引入两个脚本即可（@tsparticles/basic提供基础运行时，调色板脚本注册配色）：

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

脚本加载完成后，tsParticles与loadColoredSmokeAmberPalette会暴露在全局作用域（全局挂载逻辑见 browser.ts），随后即可初始化动画：

(async engine => { await loadBasic(engine); await loadColoredSmokeAmberPalette(engine); const options = { particles: { number: { value: 200 }, // 200 个粒子 shape: { type: "circle" }, // 圆形粒子 size: { value: { min: 10, max: 15 } }, // 半径 10~15 随机 move: { enable: true, speed: 2, // 每秒移动 2 像素 }, }, palette: "coloredSmokeAmber", // 应用琥珀烟雾调色板 }; await engine.load({ id: "tsparticles", options, }); })(tsParticles);

这段示例中，粒子颜色无需单独声明——palette字段会自动把 6 种琥珀色装配为粒子填充色，同时把#090500应用为背景。需要留意的是palette字段的取值：根据源码 index.ts，调色板实际注册键为colored-smoke-amber，若你使用该 npm 包时遇到"调色板未生效"，请优先确认palette值与注册键是否完全一致。

自定义覆盖

调色板提供的只是一套默认值，你可以像任何标准 tsParticles 安装一样，覆盖所有相关配置项。例如希望加大粒子、加快运动并改成三角形：

const options = { background: { color: "#000000" }, // 覆盖调色板带来的背景色 particles: { number: { value: 300 }, shape: { type: "triangle" }, size: { value: { min: 12, max: 20 } }, move: { enable: true, speed: 3 }, color: { value: "#FFC266" }, // 或显式固定为单一琥珀色 }, palette: "colored-smoke-amber", };

显式声明的background、particles.color、blend等配置优先级更高，会覆盖调色板注入的同名配置，这为"基于调色板再做差异化定制"保留了充分空间。

npm 模块方式与懒加载

在基于打包器（Vite / Webpack / Rollup）的项目中，推荐通过 npm 安装。包名与版本信息见 package.json：

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

标准引入方式：

import { tsParticles } from "@tsparticles/engine"; import { loadBasic } from "@tsparticles/basic"; import { loadColoredSmokeAmberPalette } from "@tsparticles/palette-colored-smoke-amber"; await loadBasic(tsParticles); await loadColoredSmokeAmberPalette(tsParticles); await tsParticles.load({ id: "tsparticles", options: { particles: { /* ...粒子参数... */ }, palette: "colored-smoke-amber", }, });

该包还提供懒加载子路径@tsparticles/palette-colored-smoke-amber/lazy，对应 index.lazy.ts：它只在加载函数被调用时才动态import("./options.js")读取调色板数据，适合希望把配色数据拆分成独立 chunk、首屏不加载的场景：

import { loadColoredSmokeAmberPalette } from "@tsparticles/palette-colored-smoke-amber/lazy";

两种入口导出的函数签名完全一致，可以按打包策略任选其一。安装后可查看该包的exports字段确认./lazy子路径映射（package.json）。

在框架组件中使用

tsParticles 官方提供了 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 与 Web Components 等框架的组件库（对应仓库的 wrappers 目录）。在这些框架中使用本调色板的流程与原生方式一致：

1. 安装对应框架的组件库（例如@tsparticles/react）与@tsparticles/palette-colored-smoke-amber；
2. 在初始化组件引擎时先加载基础包，再调用loadColoredSmokeAmberPalette(engine)；
3. 将options（含palette: "colored-smoke-amber"与particles参数）传给组件。

各框架组件的具体初始化方式（如何拿到engine实例、在哪个生命周期钩子中注册）以对应组件库文档为准，但"先注册调色板、再加载配置"的原则是通用的。

小结与进阶提示

• 调色板 = 颜色 + 背景 + 混合模式：palette一行配置即自动完成背景色、粒子填充色与blend.mode的装配（证据见 Options.ts 与 ParticlesOptions.ts）；
• 加载顺序是关键：务必在tsParticles.load(...)之前调用loadColoredSmokeAmberPalette，否则getPalette查不到注册数据，palette配置会被静默忽略；
• 调色板不负责行为：粒子数量、形状、大小、运动等仍需自行配置；
• 一切皆可覆盖：显式配置项优先于调色板注入的默认值，可以在保留配色基调的同时自由定制。

如果你想继续深入，可以对照阅读引擎的 IPalette.ts 了解调色板数据结构的完整字段，或在 PluginManager.ts 中查看addPalette/getPalette的注册与查询实现，从而把"配色方案"扩展为自己的自定义调色板。

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