tsParticles BlueStroke 调色板实战指南用 firework 蓝色描边配色快速搭建粒子背景【免费下载链接】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/tsparticlesBlueStroke蓝色描边是 tsParticles 官方调色板之一它不定义粒子的运动行为而是提供一组以深蓝夜空为底色、蓝白相间描边色为主的完整配色方案用于快速为粒子效果注入烟花/星光般的视觉基调。本文将基于仓库中的 palettes/fireworks/blueStroke/README.md 及其配套源码带你掌握调色板的加载方式、配置语法、底层实现原理与自定义方法读完即可在自己的项目中直接落地一套蓝色描边粒子背景。BlueStroke 调色板是什么BlueStroke 属于 tsParticles 的fireworks烟花调色板系列包名为tsparticles/palette-fireworks-blue-stroke版本号见 package.json 中的version字段。它的设计目标是给出烟花绽放时蓝色轨迹的配色感觉近黑的深蓝背景#000011配合由白色到深蓝的描边色阶。需要特别强调的是调色板只定义颜色不定义完整行为。正如 README 的 Quick checklist 所提示的palette 需要与一个运行时基础包如tsparticles/basic以及你自己的粒子 options 搭配使用形状、数量、运动速度等行为参数仍需自行配置。调色板的完整数据定义BlueStroke 的实际配色数据定义在 palettes/fireworks/blueStroke/src/options.ts 中其结构完全对应引擎的IPalette接口定义见 engine/src/Core/Interfaces/IPalette.ts字段类型BlueStroke 实际取值说明namestringFireworks - Blue Stroke调色板的显示名称backgroundstring#000011画布背景色近黑的深蓝blendModeGlobalCompositeOperationscreenCanvas 混合模式screen滤色能让叠加的粒子产生发光叠加效果colors单个或数组两组stroke配置颜色组可包含fill填充与stroke描边其中每组stroke又包含value一组按权重使用的候选颜色。BlueStroke 提供了两组第一组#FFFFFF、#CCDDFF、#88AAFF、#4477FF、#1144DD描边宽度区间0.6 ~ 1.8第二组#CCDDFF、#88AAFF、#4477FF、#002299描边宽度区间1.4 ~ 3.2。width描边宽度范围RangeValue支持min/max。从数据可以看到该调色板只有stroke描边而没有fill填充粒子呈现为空心描边的光点配合screen混合模式在深色背景下会呈现出类似烟花轨迹的发光质感。快速开始三步走README 给出了使用调色板的标准流程结合仓库源码可以归纳为三步安装引擎安装tsparticles/engine或直接在页面中引入 CDN 打包产物加载基础包并注册调色板加载一个基础包如tsparticles/basic并在调用tsParticles.load(...)之前执行loadFireworksBlueStrokePalette(engine)README 中写作loadBlueStrokePalette而仓库源码中实际导出的函数名是loadFireworksBlueStrokePalette见下文源码解析在 options 中应用调色板设置palette: fireworks-blue-stroke并补充一份最简粒子配置。源码中调色板的注册键定义在 palettes/fireworks/blueStroke/src/index.ts 的paletteName常量中const paletteName fireworks-blue-stroke; export async function loadFireworksBlueStrokePalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }因此在options.palette中应填写fireworks-blue-strokeREADME 示例中出现的blueStroke与源码注册键存在差异以源码为准。CDN / Vanilla JS / jQuery 用法在不使用构建工具的场景下README 提供了通过 CDN 引入的方式先加载基础包再加载调色板脚本script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-blueStroke4/tsparticles.palette-blueStroke.min.js/script说明README 原文第二行脚本文件名为tsparticles.palette-coloredSmokeAmber.min.js而根据本仓库 rollup.config.js 中的moduleName: palette-blueStroke可以推断实际的 bundle 文件名应为tsparticles.palette-blueStroke.min.js请以实际发布的 CDN 文件为准。脚本加载完成后即可初始化tsParticles(async engine { await loadBasic(engine); await loadFireworksBlueStrokePalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: fireworks-blue-stroke, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段配置的含义是生成 200 个圆形粒子半径在 10~15 之间随机以速度 2 缓慢移动整体配色交给fireworks-blue-stroke调色板自动应用。调色板会自动设置背景色#000011与screen混合模式因此无需再手动配置background与blend。浏览器全局变量引入浏览器 bundle 后除了导出函数外browser.ts 还会将loadFireworksBlueStrokePalette挂载到globalThis上globalObject.loadFireworksBlueStrokePalette loadFireworksBlueStrokePalette;这意味着在纯script标签场景下可以直接通过window.loadFireworksBlueStrokePalette(tsParticles)调用无需处理 ES Module 导入。npm 安装与框架组件库用法在模块化项目中推荐通过 npm/pnpm 安装。以 pnpm 为例仓库使用 pnpm workspace 管理见根目录pnpm-workspace.yamlpnpm add tsparticles/engine tsparticles/basic tsparticles/palette-fireworks-blue-stroke安装后导入方式与 CDN 一致且 package.json 的exports字段提供了完整的模块入口矩阵ESM/CJS/UMD/浏览器并额外暴露了./lazy子路径用于懒加载版本。对于 React、Vue、Angular、Svelte 等框架README 的建议是使用对应的 tsParticles 组件库如react-particles、tsparticles/vue3等在组件初始化逻辑中调用loadFireworksBlueStrokePalette函数即可配置语法与原生用法一致。懒加载版本若希望减小首屏体积可以使用懒加载入口 index.lazy.ts。它与常规版本的区别在于调色板数据options.js通过动态import()按需加载仅在注册执行时才真正拉取import { type Engine } from tsparticles/engine/lazy; export async function loadFireworksBlueStrokePalette(engine: Engine): Promisevoid { await engine.pluginManager.register(async e { const { options } await import(./options.js); e.pluginManager.addPalette(paletteName, options); }); }对应的导入路径为tsparticles/palette-fireworks-blue-stroke/lazy。自定义覆盖CustomizationREADME 特别强调所有标准 tsParticles 选项都可以照常覆盖。调色板只是为particles.palette提供了一份默认配色建议你完全可以在 options 中继续声明particles.color、particles.paint、background、blend等属性它们在加载时会与调色板数据合并以你的显式配置为准。例如在不改动画的前提下将粒子改成纯白填充、增大描边const options { particles: { number: { value: 300 }, shape: { type: circle }, size: { value: { min: 6, max: 12 } }, move: { enable: true, speed: 1.5 }, palette: fireworks-blue-stroke, paint: { fill: { enable: true, color: { value: #FFFFFF }, opacity: 0.9 }, stroke: { enable: true, color: { value: #4477FF }, width: 2 }, }, }, };底层原理调色板如何被引擎应用要理解palette选项为何能一键生效需要看引擎的两个importPalette实现全局选项层Options.ts在 engine/src/Options/Classes/Options.ts 中当检测到顶层options.palette时引擎会通过PluginManager.getPalette(name)查询已注册的调色板并自动补全三部分配置this.load({ background: { color: paletteData.background }, blend: { enable: true, mode: paletteData.blendMode }, particles: { palette }, });即调色板自动设置了背景色、启用了混合模式并把palette继续下发给粒子层。粒子选项层ParticlesOptions.ts在 engine/src/Options/Classes/Particles/ParticlesOptions.ts 中粒子层再次调用#importPalette将调色板的colors数组转换为粒子绘制属性paint填充/描边与blend选项。对 BlueStroke 而言两组stroke配置会被展开成两组候选的描边绘制变体供粒子随机采用这正是样例图中粒子描边粗细不一、颜色深浅交错的原因。注册机制PluginManager调色板的注册依赖引擎的插件管理器 engine/src/Core/Utils/PluginManager.tsaddPalette(name: string, palette: IPalette): void { this.palettes.set(name, palette); }PluginManager内部维护palettes: Mapstring, IPalette加载函数通过engine.pluginManager.register(...)注册 loader并在初始化时统一执行。因此必须保证loadFireworksBlueStrokePalette(engine)在tsParticles.load(...)之前调用否则调色板尚未注册、palette选项将无法命中。小结BlueStroke 调色板用不到 40 行的数据定义options.ts借助引擎内置的调色板机制为深蓝夜空 蓝白描边光点这一视觉风格提供了开箱即用的方案。核心要点可归纳为调色板只负责配色需搭配基础包如tsparticles/basic与粒子行为配置使用加载函数名为loadFireworksBlueStrokePalette注册键与palette选项值为fireworks-blue-stroke可通过 npmtsparticles/palette-fireworks-blue-stroke含./lazy懒加载入口或 CDN bundle 引入所有标准选项仍可覆盖调色板默认值实现深度定制。【免费下载链接】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），仅供参考 tsParticles BlueStroke 调色板实战指南：用 firework 蓝色描边配色快速搭建粒子背景
tsParticles BlueStroke 调色板实战指南用 firework 蓝色描边配色快速搭建粒子背景【免费下载链接】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/tsparticlesBlueStroke蓝色描边是 tsParticles 官方调色板之一它不定义粒子的运动行为而是提供一组以深蓝夜空为底色、蓝白相间描边色为主的完整配色方案用于快速为粒子效果注入烟花/星光般的视觉基调。本文将基于仓库中的 palettes/fireworks/blueStroke/README.md 及其配套源码带你掌握调色板的加载方式、配置语法、底层实现原理与自定义方法读完即可在自己的项目中直接落地一套蓝色描边粒子背景。BlueStroke 调色板是什么BlueStroke 属于 tsParticles 的fireworks烟花调色板系列包名为tsparticles/palette-fireworks-blue-stroke版本号见 package.json 中的version字段。它的设计目标是给出烟花绽放时蓝色轨迹的配色感觉近黑的深蓝背景#000011配合由白色到深蓝的描边色阶。需要特别强调的是调色板只定义颜色不定义完整行为。正如 README 的 Quick checklist 所提示的palette 需要与一个运行时基础包如tsparticles/basic以及你自己的粒子 options 搭配使用形状、数量、运动速度等行为参数仍需自行配置。调色板的完整数据定义BlueStroke 的实际配色数据定义在 palettes/fireworks/blueStroke/src/options.ts 中其结构完全对应引擎的IPalette接口定义见 engine/src/Core/Interfaces/IPalette.ts字段类型BlueStroke 实际取值说明namestringFireworks - Blue Stroke调色板的显示名称backgroundstring#000011画布背景色近黑的深蓝blendModeGlobalCompositeOperationscreenCanvas 混合模式screen滤色能让叠加的粒子产生发光叠加效果colors单个或数组两组stroke配置颜色组可包含fill填充与stroke描边其中每组stroke又包含value一组按权重使用的候选颜色。BlueStroke 提供了两组第一组#FFFFFF、#CCDDFF、#88AAFF、#4477FF、#1144DD描边宽度区间0.6 ~ 1.8第二组#CCDDFF、#88AAFF、#4477FF、#002299描边宽度区间1.4 ~ 3.2。width描边宽度范围RangeValue支持min/max。从数据可以看到该调色板只有stroke描边而没有fill填充粒子呈现为空心描边的光点配合screen混合模式在深色背景下会呈现出类似烟花轨迹的发光质感。快速开始三步走README 给出了使用调色板的标准流程结合仓库源码可以归纳为三步安装引擎安装tsparticles/engine或直接在页面中引入 CDN 打包产物加载基础包并注册调色板加载一个基础包如tsparticles/basic并在调用tsParticles.load(...)之前执行loadFireworksBlueStrokePalette(engine)README 中写作loadBlueStrokePalette而仓库源码中实际导出的函数名是loadFireworksBlueStrokePalette见下文源码解析在 options 中应用调色板设置palette: fireworks-blue-stroke并补充一份最简粒子配置。源码中调色板的注册键定义在 palettes/fireworks/blueStroke/src/index.ts 的paletteName常量中const paletteName fireworks-blue-stroke; export async function loadFireworksBlueStrokePalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }因此在options.palette中应填写fireworks-blue-strokeREADME 示例中出现的blueStroke与源码注册键存在差异以源码为准。CDN / Vanilla JS / jQuery 用法在不使用构建工具的场景下README 提供了通过 CDN 引入的方式先加载基础包再加载调色板脚本script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-blueStroke4/tsparticles.palette-blueStroke.min.js/script说明README 原文第二行脚本文件名为tsparticles.palette-coloredSmokeAmber.min.js而根据本仓库 rollup.config.js 中的moduleName: palette-blueStroke可以推断实际的 bundle 文件名应为tsparticles.palette-blueStroke.min.js请以实际发布的 CDN 文件为准。脚本加载完成后即可初始化tsParticles(async engine { await loadBasic(engine); await loadFireworksBlueStrokePalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: fireworks-blue-stroke, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段配置的含义是生成 200 个圆形粒子半径在 10~15 之间随机以速度 2 缓慢移动整体配色交给fireworks-blue-stroke调色板自动应用。调色板会自动设置背景色#000011与screen混合模式因此无需再手动配置background与blend。浏览器全局变量引入浏览器 bundle 后除了导出函数外browser.ts 还会将loadFireworksBlueStrokePalette挂载到globalThis上globalObject.loadFireworksBlueStrokePalette loadFireworksBlueStrokePalette;这意味着在纯script标签场景下可以直接通过window.loadFireworksBlueStrokePalette(tsParticles)调用无需处理 ES Module 导入。npm 安装与框架组件库用法在模块化项目中推荐通过 npm/pnpm 安装。以 pnpm 为例仓库使用 pnpm workspace 管理见根目录pnpm-workspace.yamlpnpm add tsparticles/engine tsparticles/basic tsparticles/palette-fireworks-blue-stroke安装后导入方式与 CDN 一致且 package.json 的exports字段提供了完整的模块入口矩阵ESM/CJS/UMD/浏览器并额外暴露了./lazy子路径用于懒加载版本。对于 React、Vue、Angular、Svelte 等框架README 的建议是使用对应的 tsParticles 组件库如react-particles、tsparticles/vue3等在组件初始化逻辑中调用loadFireworksBlueStrokePalette函数即可配置语法与原生用法一致。懒加载版本若希望减小首屏体积可以使用懒加载入口 index.lazy.ts。它与常规版本的区别在于调色板数据options.js通过动态import()按需加载仅在注册执行时才真正拉取import { type Engine } from tsparticles/engine/lazy; export async function loadFireworksBlueStrokePalette(engine: Engine): Promisevoid { await engine.pluginManager.register(async e { const { options } await import(./options.js); e.pluginManager.addPalette(paletteName, options); }); }对应的导入路径为tsparticles/palette-fireworks-blue-stroke/lazy。自定义覆盖CustomizationREADME 特别强调所有标准 tsParticles 选项都可以照常覆盖。调色板只是为particles.palette提供了一份默认配色建议你完全可以在 options 中继续声明particles.color、particles.paint、background、blend等属性它们在加载时会与调色板数据合并以你的显式配置为准。例如在不改动画的前提下将粒子改成纯白填充、增大描边const options { particles: { number: { value: 300 }, shape: { type: circle }, size: { value: { min: 6, max: 12 } }, move: { enable: true, speed: 1.5 }, palette: fireworks-blue-stroke, paint: { fill: { enable: true, color: { value: #FFFFFF }, opacity: 0.9 }, stroke: { enable: true, color: { value: #4477FF }, width: 2 }, }, }, };底层原理调色板如何被引擎应用要理解palette选项为何能一键生效需要看引擎的两个importPalette实现全局选项层Options.ts在 engine/src/Options/Classes/Options.ts 中当检测到顶层options.palette时引擎会通过PluginManager.getPalette(name)查询已注册的调色板并自动补全三部分配置this.load({ background: { color: paletteData.background }, blend: { enable: true, mode: paletteData.blendMode }, particles: { palette }, });即调色板自动设置了背景色、启用了混合模式并把palette继续下发给粒子层。粒子选项层ParticlesOptions.ts在 engine/src/Options/Classes/Particles/ParticlesOptions.ts 中粒子层再次调用#importPalette将调色板的colors数组转换为粒子绘制属性paint填充/描边与blend选项。对 BlueStroke 而言两组stroke配置会被展开成两组候选的描边绘制变体供粒子随机采用这正是样例图中粒子描边粗细不一、颜色深浅交错的原因。注册机制PluginManager调色板的注册依赖引擎的插件管理器 engine/src/Core/Utils/PluginManager.tsaddPalette(name: string, palette: IPalette): void { this.palettes.set(name, palette); }PluginManager内部维护palettes: Mapstring, IPalette加载函数通过engine.pluginManager.register(...)注册 loader并在初始化时统一执行。因此必须保证loadFireworksBlueStrokePalette(engine)在tsParticles.load(...)之前调用否则调色板尚未注册、palette选项将无法命中。小结BlueStroke 调色板用不到 40 行的数据定义options.ts借助引擎内置的调色板机制为深蓝夜空 蓝白描边光点这一视觉风格提供了开箱即用的方案。核心要点可归纳为调色板只负责配色需搭配基础包如tsparticles/basic与粒子行为配置使用加载函数名为loadFireworksBlueStrokePalette注册键与palette选项值为fireworks-blue-stroke可通过 npmtsparticles/palette-fireworks-blue-stroke含./lazy懒加载入口或 CDN bundle 引入所有标准选项仍可覆盖调色板默认值实现深度定制。【免费下载链接】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），仅供参考