tsParticles FullFireGradient 调色板实战指南用 22 色火焰渐变粒子打造炽热网页背景【免费下载链接】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-full-fire-gradient展开完整讲解 FullFireGradient 色板的颜色构成、CDN 与模块化加载方式、配置项与自定义方法并结合引擎源码剖析调色板的注册与解析原理。读完本文你将掌握如何在一个最小粒子配置上叠加火焰渐变调色板快速获得黑底火焰效果的动画背景并理解palette顶层选项与粒子paint填充的底层映射关系。什么是 FullFireGradient 调色板FullFireGradient 是 tsParticles 官方palettes仓库当前仓库中的 palettes 目录下fire主题家族的一员对应 npm 包tsparticles/palette-full-fire-gradient详见 package.json。它的核心作用是为粒子效果提供一套从纯黑、深红、亮红、橙、金黄到亮白过渡的完整火焰渐变配色并配套黑色背景与screen滤色混合模式。需要特别强调的是调色板Palette只定义颜色不定义完整行为。正如原文档 Quick checklist 中指出的Palette 需要与一个运行时基础包如tsparticles/basic以及一份最小的粒子配置配合使用——粒子数量、形状、尺寸、运动等行为仍由你的particles选项决定调色板只负责统一注入颜色、背景与混合模式。色板构成22 色火焰渐变一览根据调色板定义文件 options.ts 与 README.md该调色板按从暗到亮的顺序定义了一条完整的火焰渐变曲线序号色值序号色值1#00000012#FF66002#11000013#FF88003#22000014#FFAA004#44000015#FFCC005#66000016#FFDD006#88000017#FFEE007#AA000018#FFFF008#CC000019#FFFF449#FF000020#FFFF8810#FF220021#FFFFBB11#FF440022#FFFFFF配套参数同样来自 options.ts 中的IPalette对象Background背景色#000000纯黑背景用于突出火焰粒子的亮度层次Blend mode混合模式screen滤色混合让重叠粒子的颜色叠加变亮营造火焰炽热的发光感Fill填充true即启用粒子填充色粒子的绘制使用上述 22 色作为填充色值来源。可以看到这条渐变从纯黑出发经过#110000→#660000的暗红区间、#880000→#FF0000的红色区间、#FF2200→#FFAA00的橙黄区间、#FFCC00→#FFFF00的亮黄区间最终以#FFFF44、#FFFF88、#FFFFBB、#FFFFFF收尾完整模拟了火焰从内焰到外焰的温度色彩变化。快速上手清单原文档给出了三步快速接入流程这里完整保留并结合仓库源码补充说明安装引擎或引入 CDN bundle安装tsparticles/engine或直接使用下方 CDN 引入方式加载一个基础功能包并注册调色板例如加载tsparticles/basic并在tsParticles.load(...)之前调用loadFullFireGradientPalette在选项中应用调色板并配置最小粒子参数通过顶层palette: fullFireGradient选项引用同时提供particles相关行为配置。第 2 步的先后顺序是有讲究的调色板通过引擎的插件机制注册详见下文“源码级原理”必须保证loadFullFireGradientPalette在实例load之前完成否则选项解析时无法在插件管理器的palettes映射中找到该调色板。使用方式CDN / Vanilla JS / jQuery原文档给出的 CDN 引入方式如下两条 script 缺一不可一条加载基础功能包一条加载调色板包script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-fullFireGradient4/tsparticles.palette-coloredSmokeAmber.min.js/script脚本加载完成后即可初始化tsParticles(async engine { await loadBasic(engine); await loadFullFireGradientPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: fullFireGradient, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);上述配置中particles定义了粒子行为200 个圆形粒子、尺寸 1015、每秒 2 像素速度移动而palette: fullFireGradient是顶层选项——引擎会据此从插件管理器取出调色板并自动注入背景色、混合模式与粒子颜色详见下文解析链。自定义说明原文档特别提示该调色板的所有选项都可以像标准 tsParticles 安装一样被覆盖。也就是说你可以在 options 中显式定义background、blend、particles.color等属性覆盖调色板注入的默认值也可以调整particles.number、size、move等行为参数来改变火焰粒子的密度、大小与运动方式。调色板提供的是一套开箱即用的配色基线而不是锁死的最终效果。模块化npm / 框架加载如果使用 npm 安装包名与导出路径可在 package.json 的exports字段中确认默认入口tsparticles/palette-full-fire-gradient对应dist/esm/index.jsESM、dist/cjs/index.jsCJS与dist/types/index.d.ts类型声明懒加载入口tsparticles/palette-full-fire-gradient/lazy对应index.lazy.ts它会在注册时通过动态import(./options.js)按需加载色板数据适合需要减小首屏包体积的场景见 index.lazy.ts浏览器全局 bundle 通过 browser.ts 把loadFullFireGradientPalette挂载到globalThis这正是 CDN 用法中全局函数名的来源。源码级原理从注册到选项解析1. 调色板注册loadFullFireGradientPalette调色板包的核心入口 index.ts 非常精简import { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName full-fire-gradient; export async function loadFullFireGradientPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }它通过engine.pluginManager.register(...)注册一个插件加载函数并在函数内调用addPalette(paletteName, options)把色板数据存入引擎。注意这里用于addPalette的键是full-fire-gradient而在 options 中引用的名称是fullFireGradient两者是一一对应的注册键注册键采用 kebab-case使用键采用 camelCase 形式。2. 引擎侧存储PluginManager.addPalette在引擎的 PluginManager.ts 中调色板被存放在一个以字符串为键的Mapstring, IPalette里readonly palettes new Mapstring, IPalette(); addPalette(name: string, palette: IPalette): void { this.palettes.set(name, palette); } getPalette(name: string): IPalette | undefined { return this.palettes.get(name); }IPalette接口定义于 IPalette.ts包含四个字段name调色板显示名、background背景色、blendModeCanvas 混合模式类型为GlobalCompositeOperation与colors一组或多组填充/描边颜色配置。其中填充配置IPaletteColorsFill支持enable开关、value单个或数组色值与可选的opacity透明度区间。3. 顶层选项解析Options.#importPalette当 options 中出现顶层palette字段时Options.ts 的doLoad方法会调用私有方法#importPalette#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, }, }); }也就是说一行palette: fullFireGradient会被展开为三部分背景色#000000、启用的blend混合screen模式以及 particles 层面的palette引用用于注入粒子颜色。这从源码层面印证了“调色板 背景 混合模式 颜色”的三位一体结构。4. 粒子颜色注入ParticlesOptions.#importPalette粒子层面的调色板在 ParticlesOptions.ts 中处理它会读取paletteData.colors将其中的fill填充与stroke描边配置转换为粒子绘制用的paint选项。对于 FullFireGradientfill.enable为true22 个色值作为fill.value的数组整体注入粒子在渲染时即从这组颜色中取样同时paint也会带上调色板的blendModescreen。这正是示例图中粒子呈现出从暗红到亮黄、部分接近白色的多色层次的根本原因。框架组件集成原文档指出使用带 tsParticles 组件库的框架React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等时请查阅对应组件库文档并在组件初始化前调用loadFullFireGradientPalette函数。集成逻辑与 Vanilla 用法一致——先加载基础包、再注册调色板、最后在 options 中引用palette: fullFireGradient组件库负责把 options 传给引擎实例。本仓库 wrappers 目录下提供了各框架的官方封装源码可供参考。相关资源调色板定义22 色、背景、混合模式palettes/fire/fullFireGradient/src/options.ts调色板注册入口palettes/fire/fullFireGradient/src/index.ts、懒加载版 index.lazy.ts、浏览器全局版 browser.ts引擎IPalette接口engine/src/Core/Interfaces/IPalette.ts插件管理器addPalette/getPaletteengine/src/Core/Utils/PluginManager.ts顶层palette选项解析engine/src/Options/Classes/Options.ts粒子颜色注入paintengine/src/Options/Classes/Particles/ParticlesOptions.ts包元数据与导出路径palettes/fire/fullFireGradient/package.json示例效果图palettes/fire/fullFireGradient/images/sample.png【免费下载链接】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），仅供参考
tsParticles FullFireGradient 调色板实战指南：用 22 色火焰渐变粒子打造炽热网页背景
tsParticles FullFireGradient 调色板实战指南用 22 色火焰渐变粒子打造炽热网页背景【免费下载链接】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-full-fire-gradient展开完整讲解 FullFireGradient 色板的颜色构成、CDN 与模块化加载方式、配置项与自定义方法并结合引擎源码剖析调色板的注册与解析原理。读完本文你将掌握如何在一个最小粒子配置上叠加火焰渐变调色板快速获得黑底火焰效果的动画背景并理解palette顶层选项与粒子paint填充的底层映射关系。什么是 FullFireGradient 调色板FullFireGradient 是 tsParticles 官方palettes仓库当前仓库中的 palettes 目录下fire主题家族的一员对应 npm 包tsparticles/palette-full-fire-gradient详见 package.json。它的核心作用是为粒子效果提供一套从纯黑、深红、亮红、橙、金黄到亮白过渡的完整火焰渐变配色并配套黑色背景与screen滤色混合模式。需要特别强调的是调色板Palette只定义颜色不定义完整行为。正如原文档 Quick checklist 中指出的Palette 需要与一个运行时基础包如tsparticles/basic以及一份最小的粒子配置配合使用——粒子数量、形状、尺寸、运动等行为仍由你的particles选项决定调色板只负责统一注入颜色、背景与混合模式。色板构成22 色火焰渐变一览根据调色板定义文件 options.ts 与 README.md该调色板按从暗到亮的顺序定义了一条完整的火焰渐变曲线序号色值序号色值1#00000012#FF66002#11000013#FF88003#22000014#FFAA004#44000015#FFCC005#66000016#FFDD006#88000017#FFEE007#AA000018#FFFF008#CC000019#FFFF449#FF000020#FFFF8810#FF220021#FFFFBB11#FF440022#FFFFFF配套参数同样来自 options.ts 中的IPalette对象Background背景色#000000纯黑背景用于突出火焰粒子的亮度层次Blend mode混合模式screen滤色混合让重叠粒子的颜色叠加变亮营造火焰炽热的发光感Fill填充true即启用粒子填充色粒子的绘制使用上述 22 色作为填充色值来源。可以看到这条渐变从纯黑出发经过#110000→#660000的暗红区间、#880000→#FF0000的红色区间、#FF2200→#FFAA00的橙黄区间、#FFCC00→#FFFF00的亮黄区间最终以#FFFF44、#FFFF88、#FFFFBB、#FFFFFF收尾完整模拟了火焰从内焰到外焰的温度色彩变化。快速上手清单原文档给出了三步快速接入流程这里完整保留并结合仓库源码补充说明安装引擎或引入 CDN bundle安装tsparticles/engine或直接使用下方 CDN 引入方式加载一个基础功能包并注册调色板例如加载tsparticles/basic并在tsParticles.load(...)之前调用loadFullFireGradientPalette在选项中应用调色板并配置最小粒子参数通过顶层palette: fullFireGradient选项引用同时提供particles相关行为配置。第 2 步的先后顺序是有讲究的调色板通过引擎的插件机制注册详见下文“源码级原理”必须保证loadFullFireGradientPalette在实例load之前完成否则选项解析时无法在插件管理器的palettes映射中找到该调色板。使用方式CDN / Vanilla JS / jQuery原文档给出的 CDN 引入方式如下两条 script 缺一不可一条加载基础功能包一条加载调色板包script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-fullFireGradient4/tsparticles.palette-coloredSmokeAmber.min.js/script脚本加载完成后即可初始化tsParticles(async engine { await loadBasic(engine); await loadFullFireGradientPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: fullFireGradient, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);上述配置中particles定义了粒子行为200 个圆形粒子、尺寸 1015、每秒 2 像素速度移动而palette: fullFireGradient是顶层选项——引擎会据此从插件管理器取出调色板并自动注入背景色、混合模式与粒子颜色详见下文解析链。自定义说明原文档特别提示该调色板的所有选项都可以像标准 tsParticles 安装一样被覆盖。也就是说你可以在 options 中显式定义background、blend、particles.color等属性覆盖调色板注入的默认值也可以调整particles.number、size、move等行为参数来改变火焰粒子的密度、大小与运动方式。调色板提供的是一套开箱即用的配色基线而不是锁死的最终效果。模块化npm / 框架加载如果使用 npm 安装包名与导出路径可在 package.json 的exports字段中确认默认入口tsparticles/palette-full-fire-gradient对应dist/esm/index.jsESM、dist/cjs/index.jsCJS与dist/types/index.d.ts类型声明懒加载入口tsparticles/palette-full-fire-gradient/lazy对应index.lazy.ts它会在注册时通过动态import(./options.js)按需加载色板数据适合需要减小首屏包体积的场景见 index.lazy.ts浏览器全局 bundle 通过 browser.ts 把loadFullFireGradientPalette挂载到globalThis这正是 CDN 用法中全局函数名的来源。源码级原理从注册到选项解析1. 调色板注册loadFullFireGradientPalette调色板包的核心入口 index.ts 非常精简import { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName full-fire-gradient; export async function loadFullFireGradientPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }它通过engine.pluginManager.register(...)注册一个插件加载函数并在函数内调用addPalette(paletteName, options)把色板数据存入引擎。注意这里用于addPalette的键是full-fire-gradient而在 options 中引用的名称是fullFireGradient两者是一一对应的注册键注册键采用 kebab-case使用键采用 camelCase 形式。2. 引擎侧存储PluginManager.addPalette在引擎的 PluginManager.ts 中调色板被存放在一个以字符串为键的Mapstring, IPalette里readonly palettes new Mapstring, IPalette(); addPalette(name: string, palette: IPalette): void { this.palettes.set(name, palette); } getPalette(name: string): IPalette | undefined { return this.palettes.get(name); }IPalette接口定义于 IPalette.ts包含四个字段name调色板显示名、background背景色、blendModeCanvas 混合模式类型为GlobalCompositeOperation与colors一组或多组填充/描边颜色配置。其中填充配置IPaletteColorsFill支持enable开关、value单个或数组色值与可选的opacity透明度区间。3. 顶层选项解析Options.#importPalette当 options 中出现顶层palette字段时Options.ts 的doLoad方法会调用私有方法#importPalette#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, }, }); }也就是说一行palette: fullFireGradient会被展开为三部分背景色#000000、启用的blend混合screen模式以及 particles 层面的palette引用用于注入粒子颜色。这从源码层面印证了“调色板 背景 混合模式 颜色”的三位一体结构。4. 粒子颜色注入ParticlesOptions.#importPalette粒子层面的调色板在 ParticlesOptions.ts 中处理它会读取paletteData.colors将其中的fill填充与stroke描边配置转换为粒子绘制用的paint选项。对于 FullFireGradientfill.enable为true22 个色值作为fill.value的数组整体注入粒子在渲染时即从这组颜色中取样同时paint也会带上调色板的blendModescreen。这正是示例图中粒子呈现出从暗红到亮黄、部分接近白色的多色层次的根本原因。框架组件集成原文档指出使用带 tsParticles 组件库的框架React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等时请查阅对应组件库文档并在组件初始化前调用loadFullFireGradientPalette函数。集成逻辑与 Vanilla 用法一致——先加载基础包、再注册调色板、最后在 options 中引用palette: fullFireGradient组件库负责把 options 传给引擎实例。本仓库 wrappers 目录下提供了各框架的官方封装源码可供参考。相关资源调色板定义22 色、背景、混合模式palettes/fire/fullFireGradient/src/options.ts调色板注册入口palettes/fire/fullFireGradient/src/index.ts、懒加载版 index.lazy.ts、浏览器全局版 browser.ts引擎IPalette接口engine/src/Core/Interfaces/IPalette.ts插件管理器addPalette/getPaletteengine/src/Core/Utils/PluginManager.ts顶层palette选项解析engine/src/Options/Classes/Options.ts粒子颜色注入paintengine/src/Options/Classes/Particles/ParticlesOptions.ts包元数据与导出路径palettes/fire/fullFireGradient/package.json示例效果图palettes/fire/fullFireGradient/images/sample.png【免费下载链接】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），仅供参考
