tsParticles 紫色烟雾调色板Colored Smoke Purple 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-colored-smoke-purpleColored Smoke - Purple展开讲解如何通过 CDN 或 npm 快速接入这一组紫色系粒子配色、如何在配置中引用palette选项、如何叠加粒子行为参数进行自定义并结合本仓库的 engine 源码IPalette.ts、PluginManager.ts、ParticlesOptions.ts剖析调色板从注册到被引擎解析的底层原理。读完本文你将能独立把紫色烟雾调色板接入任意 tsParticles 场景并理解调色板只定义颜色、不定义行为这一核心设计。调色板Palette与预设Preset的本质区别在开始使用前先明确一个概念调色板只负责颜色不负责完整行为。原 README 明确强调A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.调色板定义的是颜色而非完整行为因此需要搭配运行时包和粒子选项一起使用。这与 preset预设形成对比预设是完整可用的ISourceOptions配置集合而调色板仅提供一组颜色值、背景色与混合模式。实际效果由你写入的particles配置数量、形状、大小、运动等决定调色板只填充颜色维度。这一点从本仓库的目录组织也能看出presets/ 下每个子目录都包含完整的 options 配置而 palettes/atmosphere/coloredSmokePurple 目录的核心只是一个 options.ts 颜色定义文件。Colored Smoke - Purple 颜色明细该调色板包含 6 个填充色fill color与 1 个背景色background使用source-over混合模式并启用填充fill: true完整定义如下角色色值说明粒子填充色#110022极深紫几乎接近黑色粒子填充色#330055深紫粒子填充色#550088中紫粒子填充色#8811AA紫罗兰粒子填充色#BB33CC亮紫粒子填充色#EE77FF浅粉紫背景色#040010近黑色深蓝紫混合模式source-over默认叠加模式填充开关true启用填充色这些值直接定义在 palettes/atmosphere/coloredSmokePurple/src/options.ts 中与 README 的颜色表格一一对应export const options: IPalette { name: Colored Smoke - Purple, background: #040010, blendMode: source-over, colors: { fill: { enable: true, value: [ #110022, #330055, #550088, #8811AA, #BB33CC, #EE77FF, ], }, }, };调色板的引擎侧数据结构调色板在引擎中的类型定义位于 engine/src/Core/Interfaces/IPalette.ts是理解上述 options 结构的关键IPalette包含name调色板名称、background背景色、blendModeCanvas 混合模式类型为GlobalCompositeOperation、colors颜色配置支持单个或多个集合IPaletteColors可选fill填充与stroke描边IPaletteColorsFillenable开关、opacity可选透明度范围类型为RangeValue、value色值SingleOrMultiplestring支持单个或多个字符串色值IPaletteColorsStrokeopacity、value、width描边宽度范围。可见调色板除了填色还支持描边与透明度范围Colored Smoke - Purple 只用到了fill分支。源码视角调色板如何被注册与解析1. 注册pluginManager.addPalette调用loadColoredSmokePurplePalette(engine)后调色板以colored-smoke-purple为键注册进引擎的插件管理器。见 palettes/atmosphere/coloredSmokePurple/src/index.tsconst paletteName colored-smoke-purple; export async function loadColoredSmokePurplePalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }引擎侧PluginManager维护一个palettes: Mapstring, IPaletteengine/src/Core/Utils/PluginManager.tsaddPalette将其写入该 MapL163-L165getPalette(name)按名称读取L247-L249。该包还提供了懒加载入口 src/index.lazy.ts通过动态import(./options.js)延迟加载颜色定义适合需要减小首屏包体积的 ESM 场景浏览器全局入口 src/browser.ts 则会把loadColoredSmokePurplePalette挂到globalThis上供 CDN 全局脚本使用。2. 解析options 中的 palette 选项被展开为具体配置当你在options中写入palette: coloredSmokePurple时引擎会在两处进行展开顶层 Options.ts 的#importPalette把background写入background.color把blendMode写入blend.enable true与blend.mode粒子级 ParticlesOptions.ts 的#importPalette将colors数组映射为paint配置fill/stroke的color.value、opacity、width并同样启用blend。也就是说palette: coloredSmokePurple一行配置实际等价于手动书写背景色、混合模式与 paint 颜色集合这正是用一行配置代替大量颜色配置的便利所在。从源码可以推断如果注册时名称写错或未调用加载函数getPalette会返回undefined对应配置会被静默跳过ParticlesOptions.ts#L127-L129因此务必保证先加载调色板再执行tsParticles.load(...)。快速使用清单原 README 给出了三步接入清单整理如下安装tsparticles/engine或直接使用下方 CDN bundle加载一个基础运行时包例如tsparticles/basic并在tsParticles.load(...)之前调用loadColoredSmokePurplePalette在 options 中同时应用调色板与一份最简粒子配置数量、形状、大小、运动等。CDN / Vanilla JS / jQuery 接入通过 jsDelivr CDN 加载基础包与调色板脚本4对应 v4 版本线script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-coloredSmokePurple4/tsparticles.palette-coloredSmokePurple.min.js/script注意原 README 中第二个脚本的文件名尾部存在笔误写成了palette-coloredSmokeAmber.min.js。根据本仓库 package.json 中声明的包名tsparticles/palette-colored-smoke-purple实际 CDN 文件应为tsparticles.palette-coloredSmokePurple.min.js。脚本加载完成后初始化代码如下(async engine { await loadBasic(engine); await loadColoredSmokePurplePalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: coloredSmokePurple, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);各配置项的作用与取值范围说明particles.number.value: 200画面中常驻粒子数量上限particles.shape.type: circle粒子形状为圆形particles.size.value: { min: 10, max: 15 }粒子尺寸在 1015 像素之间随机较大的粒子配合紫色系更适合营造烟雾质感particles.move.enable: true与speed: 2开启慢速漂移速度 2 为像素/帧量级的移动速度palette: coloredSmokePurple核心一行——让引擎自动展开为背景色、混合模式与紫色填充色集合解析细节见上文源码视角一节。id: tsparticles对应页面中用于承载 canvas 的元素 id。自定义与覆盖调色板并非封闭的黑盒你可以在标准 tsParticles 配置中覆盖任意属性README 中同样以 ⚠️ 醒目标注了这一点。例如在palette之上追加const options { particles: { number: { value: 300 }, color: { value: #FFFFFF }, // 覆盖调色板颜色改为白色粒子 opacity: { value: 0.8 }, size: { value: { min: 5, max: 20 } }, move: { enable: true, speed: 1.5, direction: top }, links: { enable: true, color: #BB33CC }, }, background: { color: #020008 }, // 覆盖调色板背景色 palette: coloredSmokePurple, };覆盖遵循 tsParticles 常规的后加载覆盖先加载合并规则palette展开的属性会被你显式书写的同名字段覆盖因此可以只保留紫色系填充、同时替换背景与运动行为。在框架组件库中使用tsParticles 为 React、Vue2.x/3.x、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 与 Web Components 提供了组件库封装。使用方式为先按对应组件库的文档完成tsparticles/engine与组件包的初始化然后在组件创建/挂载前调用loadColoredSmokePurplePalette(engine)最后照常传入包含palette: coloredSmokePurple的 options。本仓库中对应组件实现可参考 wrappers/ 与 integrations/ 目录下的各框架封装。进一步探索该调色板的完整工程配置构建、TypeScript、rollup见 palettes/atmosphere/coloredSmokePurple 目录同系列大气主题调色板amber、blue、green、magenta、orange、rainbow、red、teal、dustHaze、fogMorning、volcanicAsh 等位于 palettes/atmosphere/ 目录接入方式完全一致仅需替换加载函数与palette名称引擎对调色板/预设的统一管理逻辑集中在 engine/src/Core/Utils/PluginManager.ts调色板选项background、blend、palette的加载与展开逻辑见 engine/src/Options/Classes/Options.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），仅供参考