tsParticles Green 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/tsparticlestsParticles Green Palettetsparticles/palette-fireworks-green是 tsParticles 生态中的官方绿色调色板插件专为烟花fireworks与粒子动画场景设计。它本身不定义粒子的完整行为而是提供一套经过设计的绿色系配色方案含背景色与混合模式你需要将其与运行时包如tsparticles/basic和粒子配置组合使用。读完本文你将掌握该调色板的全部 8 个色值、loadGreenPalette的加载方式CDN / npm / 懒加载以及如何在源码层面理解它与 tsParticles 引擎的PluginManager、IPalette接口的协作机制。调色板速览颜色表与核心属性与大多数 tsParticles palette 包一致Green Palette 属于fireworks系列仓库路径为 palettes/fireworks/green。其完整色值如下表所示色值说明#FFFFFF白色高光#CCFFDD极浅薄荷绿#88FFAA浅亮绿#33FF66主亮绿#00CC33标准绿#007722深绿#003311墨绿#001100背景色近黑色深绿底混合模式Blend modescreen填充Filltruescreen混合模式意味着叠加区域会变亮类似投影叠加效果配合深色背景#001100可以营造出绿色烟花在黑幕上发光、拖尾的视觉感受。快速开始清单官方 README 给出的三步上手路径见 palettes/fireworks/green/README.md安装tsparticles/engine或直接使用下方 CDN bundle加载一个基础运行时包例如tsparticles/basic并在tsParticles.load(...)之前调用loadGreenPalette在 options 中应用该调色板并搭配一份最简粒子配置。关键认知调色板只定义颜色不定义完整行为因此必须与运行时包和粒子选项配合使用。方式一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-green4/tsparticles.palette-green.min.js/script说明当前仓库 rollup.config.js 中声明的 UMD 模块名为palette-greenmoduleName: palette-green因此实际 CDN 产物名以tsparticles.palette-green.min.js为准个别版本的历史产物文件名可能与此略有差异请以对应 npm 版本实际发布的 dist 目录为准。加载完成后即可按如下方式初始化(async engine { await loadBasic(engine); await loadGreenPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: green, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);要点解析loadBasic(engine)注册基础粒子能力形状、运动、尺寸等loadGreenPalette(engine)把绿色调色板注册进引擎options 中的palette: green通过名称引用该调色板particles部分提供粒子数量、形状、尺寸与运动参数这些行为参数需要自行配置调色板不负责。方式二npm 包 模块导入包名为tsparticles/palette-fireworks-green见 palettes/fireworks/green/package.json当前仓库版本为 4.3.3sideEffects: false提供 ESM / CJS / UMD / 浏览器多种入口。npm install tsparticles/palette-fireworks-green # 或 pnpm add tsparticles/palette-fireworks-greenimport { loadGreenPalette } from tsparticles/palette-fireworks-green; import { loadBasic } from tsparticles/basic; (async engine { await loadBasic(engine); await loadGreenPalette(engine); await engine.load({ id: tsparticles, options: { particles: { /* 你的粒子配置 */ }, palette: green, }, }); })(tsParticles);如需进一步压缩首屏体积可使用懒加载入口tsparticles/palette-fireworks-green/lazy对应仓库源码 src/index.lazy.ts。懒加载实现会延迟到注册时才动态import(./options.js)从而把调色板数据拆分到独立 chunkimport { loadGreenPalette } from tsparticles/palette-fireworks-green/lazy;源码视角调色板是如何注册与消费的1. 注册入口在 src/index.ts 中loadFireworksGreenPalette即对外导出的loadGreenPalette通过引擎的pluginManager注册插件插件回调中再调用addPalette把调色板数据写入引擎const paletteName fireworks-green; export async function loadFireworksGreenPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }在 engine/src/Core/Utils/PluginManager.ts 中addPalette本质上是向palettesMap 写入一条记录getPalette(name)则按名称读取addPalette(name: string, palette: IPalette): void { this.palettes.set(name, palette); }这正是 options 中palette: green能被解析的前提——不过请注意注册时的 key 是fireworks-green而使用时的字符串green是调色板插件面向用户的别名解析层由引擎对 palette 名称的归一化匹配机制处理实际以引擎版本行为为准。2. 调色板数据结构调色板的真实数据定义在 src/options.tsexport const options: IPalette { name: Fireworks - Green, background: #001100, blendMode: screen, colors: { fill: { enable: true, value: [ #FFFFFF, #CCFFDD, #88FFAA, #33FF66, #00CC33, #007722, #003311, ], }, }, };它与引擎侧的类型定义 engine/src/Core/Interfaces/IPalette.ts 一一对应name调色板显示名background画布背景色这里为深色#001100blendMode画布合成模式类型为GlobalCompositeOperation取值为screencolors可为单个或一组SingleOrMultipleIPaletteColors每个颜色集可配置fill填充色与可选的stroke描边色此处仅启用fill且enable: true。自定义完全可覆盖官方 README 特别强调⚠️ 重要所有选项都可以像标准 tsParticles 安装一样通过定义属性进行覆盖。例如const options { particles: { /* ... */ }, palette: green, // 覆盖背景色改用更深的纯黑 background: { color: #000000, }, // 或调整混合模式 // 通过完整 options 覆盖 blendMode 相关行为 };也就是说Green Palette 只是提供一个开箱即用的配色起点具体亮度、粒子数量、运动速度、混合效果等仍可自由调整。框架集成如果你使用的是带有 tsParticles 组件库的框架React、Vue 2/3、Angular、Svelte、jQuery、Preact、Solid、Riot 等仓库见 wrappers 与 demo 目录流程一致安装对应框架的 tsParticles 组件包与tsparticles/palette-fireworks-green在组件初始化前调用loadGreenPalette即可。例如在 React 场景下通常在initParticlesEngine回调中先执行loadBasic与loadGreenPalette再渲染Particles options{...} /。相关资源导航调色板与预设的完整目录可参考仓库中的 presets 目录以及各 palette 系列fireworks、confetti、fire、pastel等见 palettes引擎选项的通用说明可查阅 markdown/Options.md 与 markdown/Options 目录该调色板自带示例图片位于 palettes/fireworks/green/images/sample.png运行效果即为深色背景上绿色系粒子的烟花/飘散视觉。小结tsparticles/palette-fireworks-green是一个配色即插即用的轻量插件核心价值在于把 7 个精心挑选的绿色色值 深绿背景 screen混合模式封装为一行loadGreenPalette(engine)调用。理解 options.ts 中IPalette的结构、PluginManager.ts 的注册机制后你不仅能在页面中快速复现绿色烟花效果也能照此思路为项目定制自己的调色板。【免费下载链接】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），仅供参考
