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-fireREADME 标题为 Default Palette展开讲解如何用一套预定义的暖色系配色快速搭建火焰风格的粒子背景。读完本文你将掌握色板包的安装与加载方式、palette: default配置项的用法、色板内部配色结构与混合模式blendMode的工作原理以及如何在引擎源码层面理解色板如何被解析并注入到粒子配置中。一、什么是 tsParticles 色板PalettetsParticles 的色板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.色板只定义颜色不定义完整行为需要与运行时包和粒子选项搭配使用。因此使用色板的完整步骤是三步走安装tsparticles/engine或直接使用下面的 CDN bundle加载一个基础运行时包例如tsparticles/basic并在tsParticles.load(...)之前调用loadDefaultPalette(engine)本包实际导出的是loadFirePalette见下文源码说明在 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 srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-default4/tsparticles.palette-coloredSmokeAmber.min.js/script说明仓库内 package.dist.json 中记录了该包发布时的jsdelivr/unpkg入口为tsparticles.palette-colored-smoke-amber.min.jsREADME 中的脚本名是色板系列通用的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 元素idtsparticles上创建粒子容器。3.2 关于加载函数名的源码说明原文档统一称呼该函数为loadDefaultPalette但仓库源码中本包实际导出的加载函数名为loadFirePalette。见 palettes/fire/default/src/index.tsconst paletteName fire; export async function loadFirePalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }addPalette把色板对象以fire为键注册进引擎的插件管理器。也就是说使用 npm ESM/CJS 方式导入时请调用loadFirePalette(engine)若你使用的是色板系列统一发布的 CDN bundleREADME 中的tsparticles/palette-default包则按文档调用loadDefaultPalette(engine)配置中的palette字段值需与注册名一致本包对应palette: fireREADME 示例写default是通用文档模板写法请以实际加载的注册名为准。同时包内还提供了懒加载入口 src/index.lazy.ts它会在注册时才import(./options.js)动态载入配色数据适合需要拆分首屏体积的场景。四、色板配色详解火焰色系的 10 个颜色与混合模式4.1 配色定义源码色板的实际数据定义在 palettes/fire/default/src/options.tsexport 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 表格给出了完整色值与作用说明整理如下色值说明#FFFFFF粒子最亮色纯白火焰中心#FFFF88亮黄#FFFF00纯黄#FFCC00金黄#FF8800橙#FF4400亮橙红#FF0000纯红#CC0000深红#880000暗红#440000最暗红#000000Background背景色这 10 个颜色构成从白色 → 黄色 → 橙色 → 红色 → 暗红的完整火焰渐变序列从视觉效果上模拟火焰中心最亮、边缘渐暗的暖色过渡。4.3 关键参数Blend mode 与 FillREADME 表格底部还记录了两个关键属性Blend modescreen—— 画布混合模式为滤色screen。该模式下颜色会与背景叠加变亮黑色背景上的暖色粒子会自然融合、避免生硬边缘特别适合发光火焰、烟花类效果。Filltrue—— 表示启用填充色对应源码中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, }, }); }这段逻辑完成三件事通过pluginManager.getPalette(palette)按注册名取出色板对象注册表定义见 engine/src/Core/Utils/PluginManager.ts 的addPalette/getPalette方法把色板的background#000000写入顶层background.color把blendModescreen写入blend.mode并强制启用混合把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与widthwidth缺省为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: SingleOrMultipleIPaletteColors; // 一组或多组颜色 } interface IPaletteColors { fill?: { enable: boolean; opacity?: RangeValue; value: SingleOrMultiplestring }; stroke?: { opacity?: RangeValue; value: SingleOrMultiplestring; 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与注册名一致。Qscreen混合模式意味着什么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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/19 1:25:36 · 阅读 1.2k tsParticles Fire 主题默认色板（Default Palette）实战指南：从安装、配色原理到火焰粒子效果定制
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-fireREADME 标题为 Default Palette展开讲解如何用一套预定义的暖色系配色快速搭建火焰风格的粒子背景。读完本文你将掌握色板包的安装与加载方式、palette: default配置项的用法、色板内部配色结构与混合模式blendMode的工作原理以及如何在引擎源码层面理解色板如何被解析并注入到粒子配置中。一、什么是 tsParticles 色板PalettetsParticles 的色板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.色板只定义颜色不定义完整行为需要与运行时包和粒子选项搭配使用。因此使用色板的完整步骤是三步走安装tsparticles/engine或直接使用下面的 CDN bundle加载一个基础运行时包例如tsparticles/basic并在tsParticles.load(...)之前调用loadDefaultPalette(engine)本包实际导出的是loadFirePalette见下文源码说明在 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 srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-default4/tsparticles.palette-coloredSmokeAmber.min.js/script说明仓库内 package.dist.json 中记录了该包发布时的jsdelivr/unpkg入口为tsparticles.palette-colored-smoke-amber.min.jsREADME 中的脚本名是色板系列通用的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 元素idtsparticles上创建粒子容器。3.2 关于加载函数名的源码说明原文档统一称呼该函数为loadDefaultPalette但仓库源码中本包实际导出的加载函数名为loadFirePalette。见 palettes/fire/default/src/index.tsconst paletteName fire; export async function loadFirePalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }addPalette把色板对象以fire为键注册进引擎的插件管理器。也就是说使用 npm ESM/CJS 方式导入时请调用loadFirePalette(engine)若你使用的是色板系列统一发布的 CDN bundleREADME 中的tsparticles/palette-default包则按文档调用loadDefaultPalette(engine)配置中的palette字段值需与注册名一致本包对应palette: fireREADME 示例写default是通用文档模板写法请以实际加载的注册名为准。同时包内还提供了懒加载入口 src/index.lazy.ts它会在注册时才import(./options.js)动态载入配色数据适合需要拆分首屏体积的场景。四、色板配色详解火焰色系的 10 个颜色与混合模式4.1 配色定义源码色板的实际数据定义在 palettes/fire/default/src/options.tsexport 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 表格给出了完整色值与作用说明整理如下色值说明#FFFFFF粒子最亮色纯白火焰中心#FFFF88亮黄#FFFF00纯黄#FFCC00金黄#FF8800橙#FF4400亮橙红#FF0000纯红#CC0000深红#880000暗红#440000最暗红#000000Background背景色这 10 个颜色构成从白色 → 黄色 → 橙色 → 红色 → 暗红的完整火焰渐变序列从视觉效果上模拟火焰中心最亮、边缘渐暗的暖色过渡。4.3 关键参数Blend mode 与 FillREADME 表格底部还记录了两个关键属性Blend modescreen—— 画布混合模式为滤色screen。该模式下颜色会与背景叠加变亮黑色背景上的暖色粒子会自然融合、避免生硬边缘特别适合发光火焰、烟花类效果。Filltrue—— 表示启用填充色对应源码中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, }, }); }这段逻辑完成三件事通过pluginManager.getPalette(palette)按注册名取出色板对象注册表定义见 engine/src/Core/Utils/PluginManager.ts 的addPalette/getPalette方法把色板的background#000000写入顶层background.color把blendModescreen写入blend.mode并强制启用混合把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与widthwidth缺省为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: SingleOrMultipleIPaletteColors; // 一组或多组颜色 } interface IPaletteColors { fill?: { enable: boolean; opacity?: RangeValue; value: SingleOrMultiplestring }; stroke?: { opacity?: RangeValue; value: SingleOrMultiplestring; 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与注册名一致。Qscreen混合模式意味着什么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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考