tsParticles Bell Peppers 调色板实战指南从安装加载到源码原理【免费下载链接】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/tsparticlestsparticles/palette-bell-peppers是 tsParticles 官方生态中的一款食物主题调色板它以甜椒Bell Peppers为配色灵感提供一组红、橙、黄、绿的高饱和粒子填充色并内置深色背景与叠加混合模式。本文以 palettes/food/bell-peppers/README.md 为骨架结合该包的 TypeScript 源码与 engine 的调色板机制完整讲解其安装、加载、配置与自定义方法并深入到IPalette接口与PluginManager的注册流程让你不仅能开箱即用还能掌握 tsParticles 调色板体系的底层原理。一、这个调色板是什么在 tsParticles 中调色板Palette只负责定义颜色不包含完整的粒子行为。它是一组可复用的颜色配置被引擎注册后可以通过一行palette: bell-peppers选项自动应用到粒子的填充色、描边色与背景上。Bell Peppers 调色板包名tsparticles/palette-bell-peppers当前仓库版本 4.3.3见 package.json的定位就是为粒子场景提供甜椒色系以鲜红、橙、黄、绿为主配合深色背景突出粒子本身的色彩。在 src/options.ts 中可以看到它的真实定义import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Bell Peppers, background: #08110a, blendMode: overlay, colors: { fill: { enable: true, value: [ #E53935, // red #FB8C00, // orange #FDD835, // yellow #43A047, // green #2E7D32, ], }, }, };也就是说运行时真正生效的调色板是配置项值含义nameBell Peppers调色板显示名称background#08110a画布背景色近黑色的深墨绿blendModeoverlayCanvas 全局混合模式让粒子叠加出通透的高光感colors.fill.enabletrue启用填充色colors.fill.value5 个十六进制色值粒子填充色候选池运行时随机选取二、README 色卡与源码的差异说明原 README 中附带了一张 5 行共 24 色的色卡表格以及Background: #1A1000、Blend mode: source-over、Fill: true的标注色卡README 原文#1A1000#3A2200#6B3D00#A65A00#D98A1A#FFC266#090500#08110A#E53935#FB8C00#FDD835#43A047#2E7D32#FFA500#FFEFD7#000000#FFFFFF#F5F5F5#1E1E1E#252525#E0E0E0#A0A0A0#404040#1D3557Background:#1A1000Blend mode:source-overFill:true需要特别说明的是这张表与当前源码并不完全一致。README 中同时残留了 colored smoke amber 的字样第 7 行的介绍、第 155 行 CDN 脚本名以及 package.dist.json 中jsdelivr字段可以推断这份 README 的色卡段落是从其他调色板模板复制后未完全更新。实际运行时以 src/options.ts 为准背景为#08110a、混合模式为overlay、填充色为 5 个甜椒色。这一点在使用时务必留意不要被 README 表格误导。三、快速上手清单原 README 给出的三步快速清单完整展开如下安装tsparticles/engine或直接引入 CDN bundle加载一个基础运行时包如tsparticles/basic并在tsParticles.load(...)之前调用loadBellPeppersPalette(engine)在 options 中同时配置palette: bell-peppers和一份最简粒子参数。核心提醒调色板只定义颜色不定义行为所以必须配合运行时包与粒子 options 一起使用否则仅注册调色板不会产生任何粒子效果。四、安装方式方式一npm 模块安装npm install tsparticles/engine tsparticles/basic tsparticles/palette-bell-peppers该包的入口结构见 package.json 的exports字段同时提供.默认入口import对应 ESM、require对应 CJS、browser对应浏览器构建./lazy懒加载入口适用于按需加载场景见下文懒加载一节。包本身只依赖tsparticles/engine且声明了sideEffects: false方便打包器做 tree-shaking。方式二CDN / Vanilla JS / jQuery原 README 提供的 CDN 方式是引入tsparticles/basic4与tsparticles/palette-bell-peppers4两个 bundlescript srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-bell-peppers4/tsparticles.palette-coloredSmokeAmber.min.js/script⚠️注意上面第二行脚本名中的palette-coloredSmokeAmber是 README 从其他调色板复制残留的错误文件名实际发布包的真实 bundle 文件名请以 npm 包内容为准当前仓库源码构建产物不在此仓库内。如果 CDN 文件名不确定更稳妥的做法是使用 npm 安装 模块导入的方式。五、使用示例Vanilla JS脚本加载完成后按如下方式初始化(async engine { await loadBasic(engine); await loadBellPeppersPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: bell-peppers, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);要点拆解loadBasic(engine)负责注册最基础的粒子能力shape、move、size 等对应tsparticles/basic包loadBellPeppersPalette(engine)将bell-peppers这个名字注册进引擎的调色板管理器options 中的palette: bell-peppers字符串会触发引擎内部按名字查找并导入调色板number.value: 200表示 200 个粒子size用{ min: 10, max: 15 }表达随机区间move.speed: 2控制移动速度——这些是配合调色板展示效果的最简参数。六、自定义覆盖Customization调色板只决定颜色所有粒子 options 都可以像标准 tsParticles 安装一样被覆盖。例如你完全可以在上面的 options 中把形状改成star、把大小改成{ min: 5, max: 30 }或叠加links、interactivity等更多模块——palette字段与这些常规配置正交、互不冲突。如果你希望更进一步可以在加载后手动修改调色板本身。引擎侧通过engine.pluginManager.addPalette(name, palette)注册、getPalette(name)读取见 PluginManager.ts这意味着你可以在loadBellPeppersPalette(engine)之后用同样的 API 重新注册一个同名调色板来整体替换颜色方案。七、在框架组件库中使用tsParticles 为 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等提供了官方组件库见仓库 wrappers 目录。在这些框架中使用 Bell Peppers 调色板的流程与 Vanilla 一致在组件初始化钩子中调用loadBellPeppersPalette(engine)将palette: bell-peppers写入组件传入的 options。具体 API 形态以对应组件库文档为准但先加载调色板、再在 options 中引用名字的原则是通用的。八、懒加载lazy入口除了默认入口包还提供了懒加载版本 src/index.lazy.tsimport { type Engine } from tsparticles/engine/lazy; const paletteName bell-peppers; export async function loadBellPeppersPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(async e { const { options } await import(./options.js); e.pluginManager.addPalette(paletteName, options); }); }与 src/index.ts 的立即加载版本相比懒加载版通过await import(./options.js)把颜色配置做成了动态按需加载只有真正用到这个调色板时才会下载对应的颜色数据适合对首屏体积敏感的场景。打包时通过tsparticles/palette-bell-peppers/lazy子路径引入即可。九、源码原理调色板如何被引擎消费1.IPalette接口定义engine 侧定义了调色板的标准结构见 engine/src/Core/Interfaces/IPalette.ts/** 填充色配置 */ export interface IPaletteColorsFill { enable: boolean; // 是否启用填充色 opacity?: RangeValue; // 填充色透明度可传区间 value: SingleOrMultiplestring; // 颜色值单个或多个 } /** 描边色配置 */ export interface IPaletteColorsStroke { opacity?: RangeValue; // 描边透明度 value: SingleOrMultiplestring; // 描边颜色 width: RangeValue; // 描边宽度 } /** 颜色集合填充与描边均为可选 */ export interface IPaletteColors { fill?: IPaletteColorsFill; stroke?: IPaletteColorsStroke; } /** 调色板定义 */ export interface IPalette { background: string; // 背景色 blendMode: GlobalCompositeOperation; // Canvas 混合模式 colors: SingleOrMultipleIPaletteColors; // 一组或多组颜色 name: string; // 调色板名 }值得注意的扩展点SingleOrMultipleIPaletteColors意味着colors既可以是单个对象也可以是数组多组颜色按序或按权重应用opacity、width都支持RangeValue固定值或{ min, max }区间。Bell Peppers 当前只用了fill分支未启用stroke。2. 注册与解析链路整个链路分为两步注册loadBellPeppersPalette通过engine.pluginManager.register(...)注册回调回调内部调用e.pluginManager.addPalette(paletteName, options)把bell-peppers名字映射到颜色对象存入PluginManager的palettesMap见 PluginManager.ts消费当 options 中出现palette: bell-peppers时engine 的 Options.ts 会在加载配置时调用#importPalette通过pluginManager.getPalette(name)取回颜色数据并应用到背景、混合模式与粒子颜色上。同时 ParticlesOptions.ts 也支持在粒子级指定palette实现不同粒子使用不同调色板的细粒度控制。3. 浏览器全局版入口browser.ts 会把loadBellPeppersPalette挂到globalThis即window上供 CDN 方式直接调用同时export * from ./index.js保留模块化导出能力。十、常见问题与注意事项忘记加载调色板如果调用了tsParticles.load却未先执行loadBellPeppersPalette(engine)palette: bell-peppers会因getPalette找不到名字而被静默忽略效果上表现为颜色不生效依赖tsparticles/basic等运行时包调色板不包含 shape/move/size 等能力至少需要一个基础包basic、slim、full或all见 bundles 目录README 色卡与源码不一致以 src/options.ts 为准背景#08110a、混合模式overlay、5 个填充色README 中的#1A1000背景与source-over模式属于模板残留CDN 脚本名存疑README 中第二个script的tsparticles.palette-coloredSmokeAmber.min.js是复制残留实际文件名以发布的 npm 包为准想微调颜色调色板是普通数据对象你完全可以不加载本包而是仿照 src/options.ts 的结构用engine.pluginManager.addPalette(my-peppers, {...})自定义一个属于自己的甜椒色板。十一、进一步探索同主题的更多食物色板tsparticles/palette-*系列位于 palettes/food 目录下apple、avocado、cherry、pizza、sushi、watermelon 等调色板接口与插件机制源码IPalette.ts、PluginManager.tsoptions 中palette字段的解析Options.ts各框架封装组件wrappers 目录。掌握了调色板只定义颜色、通过loadXxxPalette注册、通过 options 引用名字这一整套机制后你不仅能熟练使用 Bell Peppers也能照葫芦画瓢地为自己的项目定制任意色系的 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），仅供参考 tsParticles Bell Peppers 调色板实战指南：从安装加载到源码原理
tsParticles Bell Peppers 调色板实战指南从安装加载到源码原理【免费下载链接】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/tsparticlestsparticles/palette-bell-peppers是 tsParticles 官方生态中的一款食物主题调色板它以甜椒Bell Peppers为配色灵感提供一组红、橙、黄、绿的高饱和粒子填充色并内置深色背景与叠加混合模式。本文以 palettes/food/bell-peppers/README.md 为骨架结合该包的 TypeScript 源码与 engine 的调色板机制完整讲解其安装、加载、配置与自定义方法并深入到IPalette接口与PluginManager的注册流程让你不仅能开箱即用还能掌握 tsParticles 调色板体系的底层原理。一、这个调色板是什么在 tsParticles 中调色板Palette只负责定义颜色不包含完整的粒子行为。它是一组可复用的颜色配置被引擎注册后可以通过一行palette: bell-peppers选项自动应用到粒子的填充色、描边色与背景上。Bell Peppers 调色板包名tsparticles/palette-bell-peppers当前仓库版本 4.3.3见 package.json的定位就是为粒子场景提供甜椒色系以鲜红、橙、黄、绿为主配合深色背景突出粒子本身的色彩。在 src/options.ts 中可以看到它的真实定义import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Bell Peppers, background: #08110a, blendMode: overlay, colors: { fill: { enable: true, value: [ #E53935, // red #FB8C00, // orange #FDD835, // yellow #43A047, // green #2E7D32, ], }, }, };也就是说运行时真正生效的调色板是配置项值含义nameBell Peppers调色板显示名称background#08110a画布背景色近黑色的深墨绿blendModeoverlayCanvas 全局混合模式让粒子叠加出通透的高光感colors.fill.enabletrue启用填充色colors.fill.value5 个十六进制色值粒子填充色候选池运行时随机选取二、README 色卡与源码的差异说明原 README 中附带了一张 5 行共 24 色的色卡表格以及Background: #1A1000、Blend mode: source-over、Fill: true的标注色卡README 原文#1A1000#3A2200#6B3D00#A65A00#D98A1A#FFC266#090500#08110A#E53935#FB8C00#FDD835#43A047#2E7D32#FFA500#FFEFD7#000000#FFFFFF#F5F5F5#1E1E1E#252525#E0E0E0#A0A0A0#404040#1D3557Background:#1A1000Blend mode:source-overFill:true需要特别说明的是这张表与当前源码并不完全一致。README 中同时残留了 colored smoke amber 的字样第 7 行的介绍、第 155 行 CDN 脚本名以及 package.dist.json 中jsdelivr字段可以推断这份 README 的色卡段落是从其他调色板模板复制后未完全更新。实际运行时以 src/options.ts 为准背景为#08110a、混合模式为overlay、填充色为 5 个甜椒色。这一点在使用时务必留意不要被 README 表格误导。三、快速上手清单原 README 给出的三步快速清单完整展开如下安装tsparticles/engine或直接引入 CDN bundle加载一个基础运行时包如tsparticles/basic并在tsParticles.load(...)之前调用loadBellPeppersPalette(engine)在 options 中同时配置palette: bell-peppers和一份最简粒子参数。核心提醒调色板只定义颜色不定义行为所以必须配合运行时包与粒子 options 一起使用否则仅注册调色板不会产生任何粒子效果。四、安装方式方式一npm 模块安装npm install tsparticles/engine tsparticles/basic tsparticles/palette-bell-peppers该包的入口结构见 package.json 的exports字段同时提供.默认入口import对应 ESM、require对应 CJS、browser对应浏览器构建./lazy懒加载入口适用于按需加载场景见下文懒加载一节。包本身只依赖tsparticles/engine且声明了sideEffects: false方便打包器做 tree-shaking。方式二CDN / Vanilla JS / jQuery原 README 提供的 CDN 方式是引入tsparticles/basic4与tsparticles/palette-bell-peppers4两个 bundlescript srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-bell-peppers4/tsparticles.palette-coloredSmokeAmber.min.js/script⚠️注意上面第二行脚本名中的palette-coloredSmokeAmber是 README 从其他调色板复制残留的错误文件名实际发布包的真实 bundle 文件名请以 npm 包内容为准当前仓库源码构建产物不在此仓库内。如果 CDN 文件名不确定更稳妥的做法是使用 npm 安装 模块导入的方式。五、使用示例Vanilla JS脚本加载完成后按如下方式初始化(async engine { await loadBasic(engine); await loadBellPeppersPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: bell-peppers, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);要点拆解loadBasic(engine)负责注册最基础的粒子能力shape、move、size 等对应tsparticles/basic包loadBellPeppersPalette(engine)将bell-peppers这个名字注册进引擎的调色板管理器options 中的palette: bell-peppers字符串会触发引擎内部按名字查找并导入调色板number.value: 200表示 200 个粒子size用{ min: 10, max: 15 }表达随机区间move.speed: 2控制移动速度——这些是配合调色板展示效果的最简参数。六、自定义覆盖Customization调色板只决定颜色所有粒子 options 都可以像标准 tsParticles 安装一样被覆盖。例如你完全可以在上面的 options 中把形状改成star、把大小改成{ min: 5, max: 30 }或叠加links、interactivity等更多模块——palette字段与这些常规配置正交、互不冲突。如果你希望更进一步可以在加载后手动修改调色板本身。引擎侧通过engine.pluginManager.addPalette(name, palette)注册、getPalette(name)读取见 PluginManager.ts这意味着你可以在loadBellPeppersPalette(engine)之后用同样的 API 重新注册一个同名调色板来整体替换颜色方案。七、在框架组件库中使用tsParticles 为 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等提供了官方组件库见仓库 wrappers 目录。在这些框架中使用 Bell Peppers 调色板的流程与 Vanilla 一致在组件初始化钩子中调用loadBellPeppersPalette(engine)将palette: bell-peppers写入组件传入的 options。具体 API 形态以对应组件库文档为准但先加载调色板、再在 options 中引用名字的原则是通用的。八、懒加载lazy入口除了默认入口包还提供了懒加载版本 src/index.lazy.tsimport { type Engine } from tsparticles/engine/lazy; const paletteName bell-peppers; export async function loadBellPeppersPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(async e { const { options } await import(./options.js); e.pluginManager.addPalette(paletteName, options); }); }与 src/index.ts 的立即加载版本相比懒加载版通过await import(./options.js)把颜色配置做成了动态按需加载只有真正用到这个调色板时才会下载对应的颜色数据适合对首屏体积敏感的场景。打包时通过tsparticles/palette-bell-peppers/lazy子路径引入即可。九、源码原理调色板如何被引擎消费1.IPalette接口定义engine 侧定义了调色板的标准结构见 engine/src/Core/Interfaces/IPalette.ts/** 填充色配置 */ export interface IPaletteColorsFill { enable: boolean; // 是否启用填充色 opacity?: RangeValue; // 填充色透明度可传区间 value: SingleOrMultiplestring; // 颜色值单个或多个 } /** 描边色配置 */ export interface IPaletteColorsStroke { opacity?: RangeValue; // 描边透明度 value: SingleOrMultiplestring; // 描边颜色 width: RangeValue; // 描边宽度 } /** 颜色集合填充与描边均为可选 */ export interface IPaletteColors { fill?: IPaletteColorsFill; stroke?: IPaletteColorsStroke; } /** 调色板定义 */ export interface IPalette { background: string; // 背景色 blendMode: GlobalCompositeOperation; // Canvas 混合模式 colors: SingleOrMultipleIPaletteColors; // 一组或多组颜色 name: string; // 调色板名 }值得注意的扩展点SingleOrMultipleIPaletteColors意味着colors既可以是单个对象也可以是数组多组颜色按序或按权重应用opacity、width都支持RangeValue固定值或{ min, max }区间。Bell Peppers 当前只用了fill分支未启用stroke。2. 注册与解析链路整个链路分为两步注册loadBellPeppersPalette通过engine.pluginManager.register(...)注册回调回调内部调用e.pluginManager.addPalette(paletteName, options)把bell-peppers名字映射到颜色对象存入PluginManager的palettesMap见 PluginManager.ts消费当 options 中出现palette: bell-peppers时engine 的 Options.ts 会在加载配置时调用#importPalette通过pluginManager.getPalette(name)取回颜色数据并应用到背景、混合模式与粒子颜色上。同时 ParticlesOptions.ts 也支持在粒子级指定palette实现不同粒子使用不同调色板的细粒度控制。3. 浏览器全局版入口browser.ts 会把loadBellPeppersPalette挂到globalThis即window上供 CDN 方式直接调用同时export * from ./index.js保留模块化导出能力。十、常见问题与注意事项忘记加载调色板如果调用了tsParticles.load却未先执行loadBellPeppersPalette(engine)palette: bell-peppers会因getPalette找不到名字而被静默忽略效果上表现为颜色不生效依赖tsparticles/basic等运行时包调色板不包含 shape/move/size 等能力至少需要一个基础包basic、slim、full或all见 bundles 目录README 色卡与源码不一致以 src/options.ts 为准背景#08110a、混合模式overlay、5 个填充色README 中的#1A1000背景与source-over模式属于模板残留CDN 脚本名存疑README 中第二个script的tsparticles.palette-coloredSmokeAmber.min.js是复制残留实际文件名以发布的 npm 包为准想微调颜色调色板是普通数据对象你完全可以不加载本包而是仿照 src/options.ts 的结构用engine.pluginManager.addPalette(my-peppers, {...})自定义一个属于自己的甜椒色板。十一、进一步探索同主题的更多食物色板tsparticles/palette-*系列位于 palettes/food 目录下apple、avocado、cherry、pizza、sushi、watermelon 等调色板接口与插件机制源码IPalette.ts、PluginManager.tsoptions 中palette字段的解析Options.ts各框架封装组件wrappers 目录。掌握了调色板只定义颜色、通过loadXxxPalette注册、通过 options 引用名字这一整套机制后你不仅能熟练使用 Bell Peppers也能照葫芦画瓢地为自己的项目定制任意色系的 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），仅供参考