tsParticles PurpleStroke 调色板使用指南为烟花粒子效果注入紫色描边【免费下载链接】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/tsparticlesPurpleStroke 是 tsParticles 官方调色板体系palettes中的一个色板包专为烟花fireworks场景设计它以近黑色的深紫背景、五种由白到紫的描边色与 screen 混合模式让粒子呈现出类似烟花绽放时轮廓发光、色彩叠加的视觉效果。本文将以该调色板在仓库中的 README 与源码为据完整讲解它的安装方式、CDN/原生 JavaScript 接入步骤、配置结构并深入引擎层剖析调色板如何被转换为粒子绘制选项帮助你掌握 tsParticles 调色板机制并直接上手使用。调色板是什么定义颜色而不是完整行为在深入安装步骤前需要先明确一个关键概念tsParticles 调色板只负责定义颜色方案不包含粒子行为逻辑。正如 palettes/fireworks/purpleStroke/README.md 中强调的A palette defines colors, not complete behavior, so pair it with a runtime package and particle options——调色板只定义颜色不定义完整行为因此必须与运行时包runtime package和粒子配置配对使用。具体到本仓库PurpleStroke 调色板的颜色方案定义在 palettes/fireworks/purpleStroke/src/options.tsimport { type IPalette } from tsparticles/engine; export const options: IPalette { name: Fireworks - Purple Stroke, background: #060011, blendMode: screen, colors: [ { stroke: { value: [ #FFFFFF, #EEDDFF, #CC99FF, #AA55FF, #7700FF, ], width: { min: 0.6, max: 1.8, }, }, }, { stroke: { value: [ #EEDDFF, #CC99FF, #AA55FF, #440088, ], width: { min: 1.4, max: 3.2, }, }, }, ], };从这份配置可以看出 PurpleStroke 的设计特征背景色为深紫近黑#060011为烟花粒子提供夜空般的画布混合模式为screen滤色多个粒子叠加时会提亮而非变暗这是烟花发光感的来源两组描边stroke颜色第一组以白色#FFFFFF为起点、渐变为浅紫#EEDDFF、#CC99FF、#AA55FF最外层为亮紫#7700FF描边宽度在0.6 ~ 1.8之间随机第二组为较深的紫系#EEDDFF到深紫#440088描边宽度更粗1.4 ~ 3.2用于表现烟花主体与外围光晕的层次。调色板的字段结构由引擎的IPalette接口约束详见 engine/src/Core/Interfaces/IPalette.ts它包含name调色板名称、background背景色、blendMode画布混合模式类型为GlobalCompositeOperation、colors一组或多组颜色每组可选fill填充色与stroke描边色描边色支持value颜色值与width宽度范围。快速使用清单使用 PurpleStroke 调色板的完整流程只有三步与 README 中的 Quick checklist 一致安装引擎安装tsparticles/engine或直接使用下面的 CDN bundle加载基础包与调色板加载一个基础运行时包例如tsparticles/basic并在调用tsParticles.load(...)之前调用loadPurpleStrokePalette注册调色板配置选项在 options 中同时提供调色板名称与一份最简粒子配置。需要特别注意的是本仓库palettes/fireworks/purpleStroke目录的实际 npm 包名见 package.json为tsparticles/palette-fireworks-purple-strokeREADME 中历史遗留的tsparticles/palette-purpleStroke与部分 CDN 文件名如tsparticles.palette-coloredSmokeAmber.min.js为旧命名残留实际使用时应以当前发布的包名为准。通过 CDN / 原生 JavaScript / jQuery 接入引入脚本在 HTML 页面中依次引入引擎基础包与调色板脚本以 jsDelivr CDN 为例版本号4表示使用 4.x 主版本script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-purpleStroke4/tsparticles.palette-purpleStroke.min.js/script说明调色板各包 CDN 文件名遵循tsparticles.name.min.js的命名约定具体文件名请以tsparticles/palette-fireworks-purple-stroke实际发布内容为准若文件名与文档不一致建议通过 npm 方式安装以确保稳定。初始化粒子实例脚本加载完成后即可用以下方式初始化tsParticles(async engine { await loadBasic(engine); await loadPurpleStrokePalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: purpleStroke, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段示例的要点loadBasic(engine)加载基础运行时能力粒子绘制、移动等对应仓库中的 bundles/basicloadPurpleStrokePalette(engine)在engine.load之前注册调色板这是顺序上的硬性要求palette: purpleStroke在 options 顶层声明要使用的调色板粒子配置数量 200、圆形、尺寸 10~15、移动速度 2与调色板配合形成紫色描边圆点缓缓飘散的烟花风格画面。自定义与覆盖README 特别强调调色板不锁定任何粒子选项。你可以像在任何标准 tsParticles 安装中一样通过显式定义相应属性来覆盖全部选项——例如把shape.type换成star、调整move.speed、修改size等调色板只提供颜色与混合模式基础粒子的形状、数量、运动等行为完全由你的 options 决定。配合框架组件库使用在 React、Vue2.x/3.x、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等拥有 tsParticles 官方组件库的框架中使用方法一致先查阅对应组件库文档然后在组件初始化前调用loadPurpleStrokePalette函数注册调色板再把palette: purpleStroke写进组件接收的 options 即可。仓库的 wrappers 目录即存放各框架的组件封装源码可作为进一步参考。引擎层原理调色板如何生效调色板并非魔法字符串它的整个生命周期都有明确的引擎实现支撑理解这条链路有助于排查调色板不生效之类的问题。第一步注册PluginManager.addPaletteloadPurpleStrokePalette的实现位于 palettes/fireworks/purpleStroke/src/index.tsconst paletteName fireworks-purple-stroke; export async function loadFireworksPurpleStrokePalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }它把调色板以fireworks-purple-stroke为键注册进引擎的PluginManager.palettes映射表见 engine/src/Core/Utils/PluginManager.ts 的addPalette。仓库还额外提供了懒加载入口 palettes/fireworks/purpleStroke/src/index.lazy.ts将options改为运行时import(./options.js)动态加载配合打包器的代码分割可以让调色板数据按需下载。第二步解析Options 的 #importPalette当 options 中出现palette字段时粒子选项在加载过程中会通过#importPalette方法见 engine/src/Options/Classes/Particles/ParticlesOptions.ts完成转换先从PluginManager.getPalette(palette)取出注册数据若找不到则直接返回因此未注册调色板时颜色不会生效随后把IPalette中的colors展开为paint绘制选项——fill映射为填充色配置、stroke.value映射为描边颜色、stroke.width映射为描边宽度范围最后把blendMode写入blend.mode并启用混合。这正好印证了 PurpleStroke 配色中两组stroke的含义它们是两个绘制变体paint variant引擎会在粒子绘制时使用对应的描边色与宽度区间从而在同一画面中呈现出不同粗细、不同深浅的紫色光晕层次。调色板目录与进一步阅读本调色板的完整源码、构建配置与类型声明可查看 palettes/fireworks/purpleStroke 目录引擎侧的调色板接口与注册/解析实现见 engine/src/Core/Interfaces/IPalette.ts 与 engine/src/Core/Utils/PluginManager.ts仓库中同属 fireworks 主题的调色板还有 palettes/fireworks 下的其他色板包可对比参考不同配色的组织方式调色板需要与基础运行时包配合使用相关 bundle 见 bundles/basic、bundles/fireworks 等。结语PurpleStroke 是一个开箱即得配色、自由决定行为的 tsParticles 调色板三行代码即可完成注册一个palette字段即可激活紫色彩色描边烟花风格而粒子的形状、数量、运动轨迹仍完全交由你掌控。理解loadPurpleStrokePalette → addPalette → #importPalette → paint/blend这条引擎链路后你不仅能熟练使用 PurpleStroke也能举一反三为任意 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），仅供参考