企业官网建设流程全解析

tsParticles Fire 主题默认色板（Default 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 仓库中palettes/fire/default色板包（npm 名为@tsparticles/palette-fire，README 标题为 "Default Palette"）展开，讲解如何用一套预定义的暖色系配色快速搭建火焰风格的粒子背景。读完本文，你将掌握：色板包的安装与加载方式、palette: "default"配置项的用法、色板内部配色结构与混合模式（blendMode）的工作原理，以及如何在引擎源码层面理解色板如何被解析并注入到粒子配置中。

一、什么是 tsParticles 色板（Palette）

tsParticles 的色板（Palette）与预设（Preset）是两种不同的概念：预设（Preset）是"完整的粒子行为方案"，会连粒子数量、形状、运动等一并配置好；而色板只负责定义颜色——它包含背景色、混合模式以及一组填充/描边颜色，不包含粒子行为。

正如palettes/fire/default/README.md所强调的："A palette defines colors, not complete behavior, so pair it with a runtime package and particle options."（色板只定义颜色，不定义完整行为，需要与运行时包和粒子选项搭配使用。）

因此使用色板的完整步骤是三步走：

1. 安装@tsparticles/engine（或直接使用下面的 CDN bundle）；
2. 加载一个基础运行时包（例如@tsparticles/basic），并在tsParticles.load(...)之前调用loadDefaultPalette(engine)（本包实际导出的是loadFirePalette，见下文源码说明）；
3. 在 options 中应用palette字段并配合一份最小粒子配置。

二、包的安装与 CDN 引入

2.1 npm 安装

该色板包在仓库中的包名为@tsparticles/palette-fire，包元数据见 palettes/fire/default/package.json，当前仓库锁定版本为4.3.3，依赖@tsparticles/engine（同版本）。安装命令如下：

npm install @tsparticles/engine @tsparticles/basic @tsparticles/palette-fire

其中@tsparticles/engine提供核心运行时，@tsparticles/basic提供最基础的粒子功能（形状、运动等），色板包只负责注入配色。

2.2 CDN / Vanilla JS / jQuery 方式

如果不想使用打包器，可以直接用 jsDelivr 引入两个脚本（原文档给出的写法）：

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

说明：仓库内 package.dist.json 中记录了该包发布时的jsdelivr/unpkg入口为tsparticles.palette-colored-smoke-amber.min.js，README 中的脚本名是色板系列通用的@tsparticles/palette-defaultCDN 包名。以实际发布到 npm 的包名为准。

三、基础用法：火焰粒子效果

3.1 最小可运行示例

原文档给出的 JavaScript 用法如下（已完整保留）：

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

关键点：

• loadBasic(engine)先加载基础运行时能力；
• loadDefaultPalette(engine)把色板注册进引擎；
• options 中particles只配置数量、形状、大小、运动，不配置颜色——颜色由palette: "default"自动注入；
• engine.load({ id: "tsparticles", options })在指定 DOM 元素（id="tsparticles"）上创建粒子容器。

3.2 关于加载函数名的源码说明

原文档统一称呼该函数为loadDefaultPalette，但仓库源码中本包实际导出的加载函数名为loadFirePalette。见 palettes/fire/default/src/index.ts：

const paletteName = "fire"; export async function loadFirePalette(engine: Engine): Promise<void> { await engine.pluginManager.register(e => { e.pluginManager.addPalette(paletteName, options); }); }

addPalette把色板对象以"fire"为键注册进引擎的插件管理器。也就是说：

• 使用 npm ESM/CJS 方式导入时，请调用loadFirePalette(engine)；
• 若你使用的是色板系列统一发布的 CDN bundle（README 中的@tsparticles/palette-default包），则按文档调用loadDefaultPalette(engine)；
• 配置中的palette字段值需与注册名一致，本包对应palette: "fire"（README 示例写"default"，是通用文档模板写法，请以实际加载的注册名为准）。

同时包内还提供了懒加载入口 src/index.lazy.ts，它会在注册时才import("./options.js")动态载入配色数据，适合需要拆分首屏体积的场景。

四、色板配色详解：火焰色系的 10 个颜色与混合模式

4.1 配色定义源码

色板的实际数据定义在 palettes/fire/default/src/options.ts：

export const options: IPalette = { name: "Fire - Full", background: "#000000", blendMode: "screen", colors: { fill: { enable: true, value: [ "#FFFFFF", "#FFFF88", "#FFFF00", "#FFCC00", "#FF8800", "#FF4400", "#FF0000", "#CC0000", "#880000", "#440000", ], }, }, };

4.2 颜色明细表

README 的 Colors 表格给出了完整色值与作用说明，整理如下：

这 10 个颜色构成从白色 → 黄色 → 橙色 → 红色 → 暗红的完整火焰渐变序列，从视觉效果上模拟"火焰中心最亮、边缘渐暗"的暖色过渡。

4.3 关键参数：Blend mode 与 Fill

README 表格底部还记录了两个关键属性：

• Blend mode：screen—— 画布混合模式为"滤色"（screen）。该模式下颜色会与背景叠加变亮，黑色背景上的暖色粒子会自然融合、避免生硬边缘，特别适合发光火焰、烟花类效果。
• Fill：true—— 表示启用填充色（对应源码中fill.enable: true）。

这两个值不是展示性的：引擎在解析色板时会直接把它们写进最终配置，见下文第五节。

五、引擎源码级原理：色板如何被解析和应用

色板并不是直接"画颜色"，而是由引擎在加载 options 时把色板对象映射为标准粒子配置。整个链路可以分为两层。

5.1 顶层 options 的palette字段

在 engine/src/Options/Classes/Options.ts 中，doLoad检测到data.palette后调用私有方法#importPalette（第 100-104 行、142-161 行）：

#importPalette(palette: string): void { const paletteData = this.#pluginManager.getPalette(palette); if (!paletteData) { return; } this.load({ background: { color: paletteData.background, }, blend: { enable: true, mode: paletteData.blendMode, }, particles: { palette, }, }); }

这段逻辑完成三件事：

1. 通过pluginManager.getPalette(palette)按注册名取出色板对象（注册表定义见 engine/src/Core/Utils/PluginManager.ts 的addPalette/getPalette方法）；
2. 把色板的background（#000000）写入顶层background.color，把blendMode（screen）写入blend.mode并强制启用混合；
3. 把palette名称继续下传给particles层级。

5.2 粒子层的palette与 Paint 颜色注入

在 engine/src/Options/Classes/Particles/ParticlesOptions.ts 的#importPalette（第 124-183 行）中，色板颜色被转换为粒子的 Paint（着色）配置：

• 将色板的colors.fill.value颜色数组映射为paint[].fill.color.value，并继承fill.enable与可选的fill.opacity；
• 如果色板定义了colors.stroke，会同步生成paint[].stroke（包含color、opacity与width，width缺省为0）；
• 多个颜色变体（colors为数组时）会生成多个 Paint 变体供粒子随机使用；
• 最后同样把blendMode应用到blend.mode。

也就是说，本色板的 10 个暖色最终会成为粒子可随机选取的填充色集合，配合screen混合模式与黑色背景，就得到了 README 示例图中"黑色背景 + 白/黄/橙/红渐变圆点"的火焰质感。

5.3IPalette接口的结构

色板对象类型定义在 engine/src/Core/Interfaces/IPalette.ts，结构如下：

interface IPalette { name: string; // 色板名称（本包为 "Fire - Full"） background: string; // 背景色 blendMode: GlobalCompositeOperation; // 画布混合模式（本包为 "screen"） colors: SingleOrMultiple<IPaletteColors>; // 一组或多组颜色 } interface IPaletteColors { fill?: { enable: boolean; opacity?: RangeValue; value: SingleOrMultiple<string> }; stroke?: { opacity?: RangeValue; value: SingleOrMultiple<string>; width: RangeValue }; }

对照即可发现：options.ts中定义的fill.enable、fill.value、background、blendMode都是该接口的字段；opacity与stroke在本色板中未使用（可选字段）。

六、定制与叠加：在色板基础上微调

README 特别提醒：色板引入后，你可以像标准 tsParticles 安装一样覆盖任何配置项（"You can override all the options defining the properties like in any standard tsParticles installation"）。

由于引擎的#importPalette是在doLoad中先于后续属性加载执行，之后显式指定的background、blend、particles.paint、particles.color等字段会覆盖色板注入的默认值。因此你可以这样微调：

const options = { particles: { number: { value: 300 }, // 增加粒子数 shape: { type: "circle" }, size: { value: { min: 5, max: 20 } }, move: { enable: true, speed: 3, direction: "top", // 让粒子向上飘，更像火焰升腾 outModes: { default: "out" }, }, }, palette: "fire", background: { color: "#1a0000" }, // 覆盖色板默认的纯黑背景 };

想要"纯色板 + 零自定义"也可以，色板会负责背景与颜色，但必须自备particles行为配置（形状、数量、运动），因为色板不定义行为。

七、配套资源与示例效果

• 仓库中的示例渲染图 palettes/fire/default/images/sample.png 展示了该色板的实际效果：纯黑背景上散布着圆形粒子，颜色从白色、浅黄、亮黄、橙、红过渡到深红，与配色表中的 10 个色值一一对应，是火焰主题的典型视觉呈现。
• 构建配置见 palettes/fire/default/rollup.config.js，它通过@tsparticles/rollup-plugin的loadParticlesPalette生成 browser/ESM/CJS/UMD 多格式产物，CDN 脚本即由此产出。
• 同类色板：仓库 palettes/fire 目录下还包含candlelight、embersAndAsh、fullFireGradient、lavaLamp、metalSparks、moltenMetal、seed等多个火焰变体，可对比选择；仓库根目录的 palettes 下还有atmosphere、confetti、fireworks、food等大量主题色板。

八、常见问题小结

Q：为什么只设置了palette却没颜色？色板只注入背景、混合模式与 Paint 颜色，粒子形状、数量、运动需要你在particles中显式配置（参考第三节示例）。同时确认加载函数已被调用（loadFirePalette/loadDefaultPalette），并且palette字段值（"fire"/"default"）与注册名一致。

Q：screen混合模式意味着什么？screen（滤色）模式下，叠加区域的颜色趋向更亮，天然适合发光粒子；配合黑色背景时粒子边缘更柔和，火焰、烟花类效果观感更好。若改成"source-over"（默认普通叠加），粒子会出现实体边缘，视觉效果完全不同。

Q：想在 React/Vue 等框架中使用？本包是纯引擎插件，在任何 tsParticles 组件库中（React、Vue 2/3、Angular、Svelte、jQuery、Preact 等）都只需在初始化前调用loadFirePalette(engine)注册，然后在 options 中设置palette即可，其余用法与原生一致。具体以各组件库文档为准。

结语

palettes/fire/default是一份"轻量而完整"的火焰配色方案：10 个暖色 +screen混合模式 + 纯黑背景，配合基础运行时包即可在数行代码内呈现火焰粒子背景。理解引擎中Options.#importPalette与ParticlesOptions.#importPalette两条解析链路后，你既能开箱即用，也能在色板基础上自由覆盖任意配置，把火焰效果改造成自己需要的形态。

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