tsParticles Colored Smoke Green 调色板实战指南快速构建绿色烟雾粒子背景【免费下载链接】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本文是一份针对 tsParticlestsparticles/palette-colored-smoke-green调色板的完整技术指南。该调色板为粒子效果预置了 6 种深浅不一的绿色填充色与配套背景色适合快速搭建彩色烟雾风格的页面背景动画。读完本文你将掌握调色板的注册方式loadColoredSmokeGreenPalette、颜色构成、与tsparticles/basic等运行时包的搭配方法以及如何通过标准 tsParticles 配置对其做深度自定义。图片为仓库内 示例图展示了该调色板在深色背景下呈现的绿色粒子散布效果。调色板是什么tsParticles 的调色板Palette是一组只定义颜色、不定义行为的预设数据。它解决的是颜色从哪来的问题而不是粒子怎么动的问题——运动、形状、数量等行为仍然由你的粒子配置Particles Options与运行时包如tsparticles/basic决定。本调色板名为Colored Smoke Green内部标识符colored-smoke-green在 options.ts 中定义的完整数据为import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Colored Smoke - Green, background: #010802, blendMode: source-over, colors: { fill: { enable: true, value: [ #001100, #003300, #005500, #117722, #33AA55, #77DD88, ], }, }, };颜色构成原文档给出的色板由 5 个主色与 1 个辅助色共 6 个填充色加 1 个背景色组成类型色值说明填充色#001100接近黑色的深绿填充色#003300深绿填充色#005500中深绿填充色#117722中绿填充色#33AA55亮绿填充色#77DD88浅亮绿背景色#010802近黑的墨绿背景配套参数Blend mode混合模式为source-overFill填充为true。粒子渲染时会在#010802背景上使用source-over混合方式绘制上述绿色圆形形成烟雾般的层次过渡。结构对应的接口定义IPalette接口定义于 engine/src/Core/Interfaces/IPalette.tsname调色板名称stringbackground背景色stringblendMode画布混合模式GlobalCompositeOperation此处为source-overcolors颜色集合可为单个或数组SingleOrMultipleIPaletteColorsfill填充色配置含enable是否启用与value单个或多个色值支持RangeValue范围stroke可选描边配置含width与opacity。调色板如何注册并生效源码级原理理解调色板的工作原理有助于排查颜色没生效的问题。核心注册代码位于 src/index.tsimport { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName colored-smoke-green; export async function loadColoredSmokeGreenPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }调用链可以概括为三步loadColoredSmokeGreenPalette(engine)通过engine.pluginManager.register(...)把调色板注册逻辑挂载到引擎注册回调内部调用addPalette(paletteName, options)将colored-smoke-green这个名称与颜色数据存入 PluginManager 的palettes映射表中见 engine/src/Core/Utils/PluginManager.ts 中的addPalette与getPalette方法当配置中出现palette: coloredSmokeGreen时引擎在加载配置阶段engine/src/Options/Classes/Options.ts 的doLoad方法调用#importPalette从 PluginManager 取出对应调色板并应用到容器。此外仓库还提供了懒加载入口src/index.lazy.ts它从tsparticles/engine/lazy导入类型并在注册回调内使用动态import(./options.js)只有真正加载调色板时才拉取颜色数据适合对首屏体积敏感的场景。npm 包的exports字段见 package.json同时暴露了.标准入口与./lazy懒加载入口两条路径。注册时机要求loadColoredSmokeGreenPalette必须在tsParticles.load(...)之前调用否则引擎在处理palette选项时还找不到对应名称的调色板。快速开始三种接入方式原文档给出的 Quick checklist 为三步① 安装tsparticles/engine或使用 CDN bundle② 加载基础包并调用loadColoredSmokeGreenPalette③ 在选项中应用调色板 最小粒子配置。下面按接入方式展开。方式一CDN / Vanilla JS / jQuery在 HTML 中依次引入基础包与调色板 bundle注意调色板 bundle 的正确文件名是tsparticles.palette-coloredSmokeGreen.min.jsscript srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-coloredSmokeGreen4/tsparticles.palette-coloredSmokeGreen.min.js/script原文档此处脚本名写作coloredSmokeAmber属于笔误实际构建产物为tsparticles.palette-coloredSmokeGreen.min.js请以本处为准。脚本加载后loadColoredSmokeGreenPalette会作为全局函数挂载由 src/browser.ts 的globalObject.loadColoredSmokeGreenPalette loadColoredSmokeGreenPalette;完成。方式二npm 安装 ES Modulenpm install tsparticles/engine tsparticles/basic tsparticles/palette-colored-smoke-green标准入口使用方式import { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadColoredSmokeGreenPalette } from tsparticles/palette-colored-smoke-green; (async () { await loadBasic(tsParticles); await loadColoredSmokeGreenPalette(tsParticles); // 然后调用 tsParticles.load(...) })();如果使用懒加载入口import { loadColoredSmokeGreenPalette } from tsparticles/palette-colored-smoke-green/lazy;方式三框架组件库若项目使用 React、Vue2.x/3.x、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 或 Web Components 等框架可先安装对应的 tsParticles 组件库如tsparticles/react、tsparticles/vue3等仓库 wrappers 目录下可见全部封装在组件初始化时同样调用loadColoredSmokeGreenPalette完成注册再把palette写进选项对象。完整可运行示例原文档提供了一个最小配置结合调色板即可运行(async engine { await loadBasic(engine); await loadColoredSmokeGreenPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: coloredSmokeGreen, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);各字段含义与取值说明配置项示例值作用particles.number.value200粒子总数烟雾越浓可调大particles.shape.typecircle粒子形状为圆形配合圆形颜色最接近烟雾质感particles.size.value{ min: 10, max: 15 }粒子尺寸范围模拟大小不一的烟团particles.move.enabletrue开启运动particles.move.speed2移动速度数值越小越烟palettecoloredSmokeGreen顶层选项指定使用本调色板名称来自内部标识符colored-smoke-green把这段代码放进任意.html的script标签配合方式一的 CDN 脚本即可看到效果深墨绿背景上绿色粒子缓慢漂浮扩散。自定义与覆盖调色板只提供颜色默认值所有选项都可以像标准 tsParticles 安装一样被覆盖。例如想调整粒子行为或替换部分颜色时直接在options中显式声明对应属性即可const options { background: { color: #001100 }, // 覆盖调色板背景 particles: { number: { value: 300 }, shape: { type: circle }, size: { value: { min: 8, max: 20 } }, opacity: { value: { min: 0.4, max: 0.9 } }, // 半透明叠加出烟雾层次 move: { enable: true, speed: 1.5, direction: top, outModes: { default: out }, }, }, palette: coloredSmokeGreen, };如果想在保留调色板填充色的同时叠加描边IPalette还支持stroke配置value、width、opacity但本调色板的默认options.ts仅启用了fill。常见问题Q1加载后粒子颜色没有变化先确认loadColoredSmokeGreenPalette(engine)在engine.load(...)之前执行其次确认选项顶层写了palette: coloredSmokeGreen最后检查引入的 bundle 文件名是否拼写正确见上文方式一。Q2palette和preset有什么区别preset是一整套完整方案含粒子行为、交互等而palette只负责颜色。原文档明确强调A palette defines colors, not complete behavior因此调色板必须搭配运行时包与粒子配置一起使用。Q3如何在框架中加载在组件生命周期里调用loadColoredSmokeGreenPalette同样须先于实例加载并把palette传入选项。各框架组件库的详细文档位于 wrappers 对应目录。【免费下载链接】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），仅供参考