tsParticles Hologram 调色板实战指南为粒子效果注入全息霓虹配色【免费下载链接】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-hologram调色板文档为主线讲解全息Hologram配色方案的核心概念、安装方式与实战用法。你将掌握如何通过loadHologramPalette一行注册、以palette: hologram快速应用青色/蓝色霓虹粒子配色并理解调色板在 tsParticles 引擎底层的注册与解析机制从而举一反三地使用仓库内全部 20 个官方调色板。什么是 tsParticles 调色板在 tsParticles 体系中调色板Palette只定义颜色不定义完整行为。这一点在原文档中有明确强调A palette defines colors, not complete behavior调色板定义颜色而非完整行为。它解决的是粒子该是什么颜色这一单一问题而粒子的数量、形状、大小、运动方式等仍由你的粒子配置particles options决定。Hologram 调色板就是这样一个颜色插件它注册一套以青色cyan、蓝绿色系为主、点缀紫粉色的全息霓虹配色配合深色背景与screen混合模式营造出深邃神秘的全息质感。从 示例截图 可以看到粒子以青色、蓝色为主带有浅色轮廓少量紫色与粉色点缀非常适合科技感、赛博朋克风格的项目背景。配色一览官方文档色板原文档给出了 Hologram 调色板的完整色板表格摘录如下颜色色值深青色#003344青蓝#006688亮青#00AACC水蓝#00DDFF浅青#44EEFF极浅青#AAFFFF纯白#FFFFFF背景色#000a0d近黑色深蓝绿文档同时说明该调色板的组合参数为Blend mode混合模式screenFill填充false。其中背景色与screen混合模式是营造全息发光视觉的关键——screen模式会让粒子颜色与背景叠加后变亮产生类似霓虹灯管自发光的效果。以源码为准的完整配色数据需要说明的是README.md 中的色板表格是简化示意实际运行时注册进引擎的配色定义位于 options.ts其数据与文档表格略有出入文档侧重展示主色阶源码则包含完整的填充色、描边色与描边宽度区间。以下为源码中的真实注册数据填充色fill#003844、#007A8A、#00C6C7、#68EEFF、#8F76FF、#D89CFF描边色stroke#AAFFFF、#C8FAFF、#8CEBFF描边宽度0.6 ~ 1.4组合变体第二组变体在填充色的基础上叠加描边#00F0FF、#8F76FF、#FFFFFF描边宽度1.6 ~ 3.2从源码结构看调色板被定义为三个颜色变体color variants纯填充、纯描边、填充描边三种组合引擎加载时会将其转换为粒子的paint绘制配置粒子在运行时会从这些颜色中随机取值从而呈现同一调色板下的丰富色彩层次。快速上手清单原文档给出的 Quick checklist快速检查清单包含三步这是使用任意 tsParticles 调色板的通用流程安装引擎安装tsparticles/engine或直接使用 CDN 打包文件加载基础包与调色板加载一个基础功能包如tsparticles/basic并在tsParticles.load(...)之前调用loadHologramPalette应用配色与粒子配置在配置中设置palette字段并搭配一份最简粒子配置。记住核心原则调色板只提供颜色必须与运行时包runtime package和粒子选项配合使用。安装与使用CDN / Vanilla JS / jQuery使用 CDN 方式时需要依次引入基础包与调色板脚本以 v4 为例script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-hologram4/tsparticles.palette-coloredSmokeAmber.min.js/script注意原文档此处引用的 CDN 文件名沿用了其他调色板的命名模板。从当前仓库的 rollup.config.js 看该包的构建模块名为palette-hologrammoduleName: palette-hologram因此在 CDN 上实际的打包文件名应以tsparticles.palette-hologram.min.js为准。若文件名无法命中请以 jsDelivr 上的实际文件列表为准。基本用法Vanilla JS脚本加载完成后即可初始化tsParticles(async engine { await loadBasic(engine); await loadHologramPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: hologram, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段代码的关键点loadBasic(engine)加载基础能力包圆形 shape、移动 updater 等最核心的功能对应实现见 bundles/basic/src/index.tsloadHologramPalette(engine)注册 hologram 调色板配置中的palette: hologram是激活调色板的总开关粒子数量200 个、圆形形状、大小区间10~15与运动速度2则完全由你掌控engine.load({ id, options })创建并启动实例id对应页面中承载粒子画布的容器元素。自定义与覆盖原文档特别提示所有选项都可以像标准 tsParticles 安装一样直接覆盖。调色板只负责注入颜色默认值你在particles中显式书写的任何属性数量、形状、大小、运动、颜色等优先级更高。例如你可以在使用 hologram 配色时仍自定义粒子形状为square、提高运动速度颜色部分则完全交给调色板。配合框架组件库tsParticles 提供了 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 与 Web Components 等组件库对应仓库中的 wrappers 目录。在框架中使用时只需按照对应组件库文档完成初始化并在加载引擎后调用loadHologramPalette函数随后同样在 options 中设置palette: hologram即可注册逻辑与 Vanilla JS 完全一致。源码解析调色板如何工作调色板的注册入口调色板包的入口实现非常精简完整逻辑位于 palettes/tech/hologram/src/index.tsexport async function loadHologramPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }它把名为hologram的调色板通过pluginManager.addPalette写入引擎的插件管理器。在 engine/src/Core/Utils/PluginManager.ts 中addPalette的实现只是将调色板存入一个Mapstring, IPaletteaddPalette(name: string, palette: IPalette): void { this.palettes.set(name, palette); }同时browser.ts会把loadHologramPalette挂载到globalThis上这就是 CDN 全局变量loadHologramPalette的来源见 browser.ts。IPalette 接口定义调色板的数据结构由引擎统一定义见 engine/src/Core/Interfaces/IPalette.tsIPalettename名称、background背景色、blendMode画布混合模式、colors颜色变体可单个或多个IPaletteColorsFillenable是否启用填充、opacity填充透明度区间、value填充色单个或多个IPaletteColorsStrokeopacity、value描边色、width描边宽度区间。对照 options.ts 可以看到 Hologram 调色板完整实现了该接口blendMode: screen、背景#000a0d、三组颜色变体其中描边变体还指定了宽度区间0.6~1.4与1.6~3.2这解释了示例截图中粒子边缘发亮的描边轮廓。配置解析链路当配置中出现palette字段时引擎会触发两条解析路径顶层配置在 engine/src/Options/Classes/Options.ts 的doLoad中检测到data.palette后调用#importPalette该方法Options.ts从插件管理器取出调色板数据并自动加载背景色background.color、混合模式blend.mode并启用blend以及粒子的palette字段粒子级配置在 engine/src/Options/Classes/Particles/ParticlesOptions.ts 中#importPalette把调色板的每个颜色变体转换为粒子的paint绘制配置——填充色填入paint.fill描边色与宽度填入paint.stroke多个变体则生成多组 paint 供粒子随机使用。也就是说palette: hologram这一行配置最终会展开为完整的背景色、混合模式与粒子绘制参数与手写这些配置等价。这也印证了文档的提示调色板是颜色快捷方式任何显式配置都可以覆盖它注入的默认值。懒加载版本该包还提供了懒加载入口tsparticles/palette-hologram/lazy见 index.lazy.ts它使用动态import(./options.js)在注册时才加载配色数据适合追求更小首屏包体积的构建场景。包的分发配置ESM/CJS/UMD 多格式导出、浏览器入口等见 package.json。从 Hologram 到整个调色板家族Hologram 调色板位于仓库的 palettes/tech 目录下整个 palettes 目录还包含 atmosphere、fire、fireworks、food、space、water 等 20 个主题调色板。它们的用法与本篇完全一致——安装对应包 → 调用对应的loadXxxPalette→ 设置palette: xxx。掌握 Hologram 的注册与解析原理后你可以轻松迁移到任何其他官方调色板或参照 IPalette.ts 的接口自行定义私有配色。小结tsParticles Hologram 调色板用一套青色/蓝色霓虹配色、近黑背景与screen混合模式为粒子效果提供了即插即用的全息皮肤。它的使用流程可以浓缩为三步加载基础包、调用loadHologramPalette(engine)、在 options 中写入palette: hologram。透过 index.ts、options.ts 与引擎侧 PluginManager.ts、Options.ts 的实现你能清楚地看到调色板从注册到解析再到绘制的完整链路——这正是 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），仅供参考