tsParticles Fire Seed 调色板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 仓库中的tsparticles/palette-fire-seed即 fire 系列中的 Fire Seed 调色板展开讲解如何用它快速构建红、橙、黄三色叠加、黑色背景的火焰粒子动画背景。读完本文你将掌握调色板包的 CDN / npm 两种加载方式、loadSeedPalette与loadFireSeedPalette的调用区别、调色板在引擎内部的解析原理以及如何在此基础上继续叠加自定义粒子配置。一、Fire Seed 是什么一个只管配色的调色板tsParticles 的 Palette调色板机制解决的是一个非常实际的问题粒子动画的配色方案往往是成套的、可复用的。与其每次手写一组颜色数组不如把配色封装成一个独立包通过一行palette: seed配置即可整体套用。Fire Seed 就是 fire 系列palettes/fire下的 8 个调色板之一与该系列的 candlelight、default、embersAndAsh、fullFireGradient、lavaLamp、metalSparks、moltenMetal 并列。它提供的是火种seed of fire配色——用最经典的火焰三色渐变来表现火星与火苗。需要特别强调的是调色板只定义颜色不定义完整行为。粒子数量、形状、运动速度等仍然需要由基础包如tsparticles/basic与粒子配置提供。这一点在官方 README 的 Quick checklist 中也有明确说明。二、颜色构成与源码定义Fire Seed 的完整配色在 options.ts 中定义如下用途颜色说明填充色 1#ff0000纯红火焰内芯填充色 2#ff8800橙红火焰中段填充色 3#ffff00纯黄火焰外焰背景#000000纯黑衬托发光感混合模式screen滤色让重叠粒子颜色变亮叠加填充true粒子使用填充色而非描边对应的源码实现非常简洁整个调色板就是一个IPalette对象// palettes/fire/seed/src/options.ts import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Fire Seed, background: #000000, blendMode: screen, colors: { fill: { enable: true, value: [ #ff0000, #ff8800, #ffff00, ], }, }, };从这段代码可以看到调色板的数据模型。引擎侧的 IPalette 接口 定义了 4 个必填字段background背景色、blendModeCanvas 全局混合模式、colors单组或多组填充/描边颜色、name调色板名称。colors.fill.value的类型是SingleOrMultiplestring因此既可以是单色字符串也可以是像这里一样的多色数组——多色数组正是粒子在红、橙、黄之间随机取色的依据。值得注意的细节screen混合模式对应 Canvas 的globalCompositeOperation screen是火焰粒子效果的关键。它让多个粒子重叠处的颜色按滤色方式变亮粒子越密集区域越接近白色从而产生火焰的发光与灼热感而不是普通半透明叠加那种变暗的效果。三、引擎内部如何消费调色板在浏览器里你只需要设置palette: seed但引擎内部实际做了解包与展开。核心逻辑在 Options.ts 的#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, }, // ... }); }其工作流程可以概括为注册loadSeedPalette(engine)通过engine.pluginManager.addPalette(name, options)把调色板存入插件管理器的palettesMap见 PluginManager.ts查找配置解析时Options与ParticlesOptions通过getPalette(name)按名取回调色板数据ParticlesOptions.ts展开#importPalette自动将调色板的background写入背景配置、将blendMode写入混合配置并把颜色注入粒子配置等效于你手写了一整段颜色配置。也就是说palette: seed一行配置在引擎层会被展开为背景纯黑 启用 screen 混合 粒子填充色取自三色数组三部分省去大量重复配置。四、快速上手清单Quick Checklist按官方 README 的步骤最小可运行只需要三步安装tsparticles/engine或直接使用下方 CDN 完整包加载一个基础运行时包例如tsparticles/basic并在tsParticles.load(...)之前调用loadSeedPalette或loadFireSeedPalette完成注册在 options 中同时给出palette: seed与一份最简粒子配置。第 2 步的先注册后加载顺序是硬性要求引擎解析配置时会在插件管理器中按名查找调色板若尚未注册getPalette将返回undefined该调色板配置会被静默跳过。五、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-seed4/tsparticles.palette-coloredSmokeAmber.min.js/script说明浏览器 bundle 通过 browser.ts 把加载函数挂到globalThis因此在全局作用域可直接调用loadFireSeedPalette。dist 包在 package.dist.json 中声明的 CDN 文件名为tsparticles.palette-colored-smoke-amber.min.js实际引用名请以对应 CDN 上发布的文件为准。脚本加载完成后按如下方式初始化粒子(async engine { await loadBasic(engine); await loadSeedPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: seed, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段配置的效果是200 个圆形粒子以 2 的速度缓慢漂浮直径在 1015 之间随机颜色由调色板在红/橙/黄中随机指定黑色背景配合screen混合形成火焰氛围。加载函数命名注意loadSeedPalettevsloadFireSeedPalette仓库源码中实际存在两个加载函数对应不同的入口容易混淆入口导出函数注册的调色板名标准入口 index.tsloadFireSeedPalettefire-seed懒加载入口 index.lazy.tsloadSeedPaletteseed若通过 npm 标准导入tsparticles/palette-fire-seed应调用loadFireSeedPalette配置里用palette: fire-seed若通过懒加载子路径tsparticles/palette-fire-seed/lazy导入应调用loadSeedPalette配置里用palette: seed懒加载入口采用动态import(./options.js)按需加载调色板数据适合追求首屏体积的场景。官方 README 示例使用的loadSeedPalette对应懒加载入口实际项目请与所选入口保持一致避免函数未定义或调色板名不匹配。六、npm / 模块化用法在本仓库中该调色板的正式包名为tsparticles/palette-fire-seed见 package.json与官方文档中出现的tsparticles/palette-seed属于同一调色板在不同发布语境下的命名。模块化用法如下import { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadFireSeedPalette } from tsparticles/palette-fire-seed; await loadBasic(tsParticles); await loadFireSeedPalette(tsParticles); await tsParticles.load({ id: tsparticles, options: { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2 }, }, palette: fire-seed, }, });懒加载写法只需更换导入路径与函数名import { loadSeedPalette } from tsparticles/palette-fire-seed/lazy; await loadSeedPalette(tsParticles); // options 中 palette: seed七、自定义与叠加调色板不是上限官方 README 特别提示调色板中的所有选项都可以像标准 tsParticles 配置那样被覆盖。这意味着调色板是基础配色 运行时包 粒子选项组合中的一环而非最终形态。例如可以在options中显式覆盖粒子的color或调整size、opacity、links、trail等任意标准配置也可以在palette之外继续编写完整的particles配置让调色板只负责背景与默认配色细节行为全部由你的配置接管。由于#importPalette最终只是把调色板数据合并进标准 options所以它与 tsParticles 既有配置体系完全兼容不存在特殊限制。若需要更大的火焰色阶也可以参考同目录下其他 fire 系列调色板的 options.ts如 default、moltenMetal、lavaLamp对比不同配色数组与混合模式的取值自行组合出符合需求的颜色集合。八、React / Vue / Angular 等框架组件库用法对于使用 tsParticles 官方组件库如tsparticles/react、tsparticles/vue3、tsparticles/angular等均位于 wrappers 与 demo 目录的项目不需要手动拼接 CDN 脚本在组件初始化前调用对应的加载函数即可。流程与原生用法完全一致——先loadBasicloadFireSeedPalette或loadSeedPalette完成注册再在组件的 options 中填写palette: seed/fire-seed与粒子配置。各组件库仓库的文档中均包含该函数的调用说明。九、常见问题与注意事项粒子没有任何颜色检查加载函数是否在load/组件初始化之前调用完成未注册时getPalette返回空调色板配置会被忽略。颜色单调、没有火焰渐变的层次感确认blendMode: screen生效blend.enable应为true并让粒子数量与大小达到足够重叠密度screen叠加的发光效果才明显。想用其他火焰配色fire 系列共 8 个调色板可以对比 palettes/fire 下各包的options.ts后按需选择或参照IPalette接口engine/src/Core/Interfaces/IPalette.ts自定义配色。CDN 文件名不一致官方 README 与 dist 包声明package.dist.json中的文件名写法略有差异引用前以 CDN 实际发布的文件为准npm 方式则不存在此问题。通过调色板机制你可以在数分钟内让页面背景呈现出可控、可复用的火焰粒子效果并在此基础上继续叠加任意 tsParticles 能力实现从火种到完整粒子场景的自由演进。【免费下载链接】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），仅供参考