tsParticles pastel sunset 调色板tsparticles/palette-pastel-sunset 的颜色定义、注册机制与接入方法【免费下载链接】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负责为粒子动画提供统一的背景色、混合模式与填充色集合。本文以仓库中palettes/pastel/sunset子包为研究对象完整梳理 pastel sunset 调色板包含的具体颜色值、它在引擎中通过pluginManager.addPalette注册的源码链路以及如何配合tsparticles/engine与运行时基础包如tsparticles/basic在页面中实际应用并自定义这套配色。调色板包概述palettes/pastel/sunset是 monorepo 中的一个独立 npm 子包包名为tsparticles/palette-pastel-sunset见 package.json其唯一运行时依赖是工作区内的tsparticles/engine属于纯数据 注册函数式的轻量包不包含任何粒子行为逻辑。官方 READMEREADME.md给出的使用步骤可以概括为三步安装tsparticles/engine或改用 CDN bundle加载一个基础运行时包例如tsparticles/basic并在调用tsParticles.load(...)之前先调用调色板的load函数在粒子选项里应用该调色板并给出一份最简的粒子配置。需要注意的前提是调色板只定义颜色不定义完整行为因此必须与运行时包和粒子选项搭配使用才能看到效果。颜色构成源码中的真实配色调色板的实际颜色定义在 src/options.ts 中它导出一个符合引擎IPalette接口的对象import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Pastel Sunset, background: #FFF3E6, blendMode: source-over, colors: { fill: { enable: true, value: [ #FFD4B3, #FFCCBA, #FFD9B3, #FFCAB3, #FFE4BA, #FFC9BA, ], }, }, };从源码看这套 pastel sunset 配色由三部分组成属性值说明background#FFF3E6画布背景色偏暖的奶米白blendModesource-overCanvas 默认源覆盖混合模式colors.fill.enabletrue启用填充色colors.fill.value6 种淡暖色粒子填充色从中随机/循环取值6 种填充色均为低饱和度的暖橙-米粉色调#FFD4B3、#FFCCBA、#FFD9B3、#FFCAB3、#FFE4BA、#FFC9BA。而 README.md 中的 “Colors” 色卡表则展示了一组更大的预览色板包括深棕橙渐变#1A1000、#3A2200、#6B3D00、#A65A00、#D98A1A、#FFC266、#FFA500、浅米色系#FFF3E6、#FFEFD7、#FFD4B3、#FFCCBA、#FFD9B3、#FFCAB3、#FFE4BA、#FFC9BA以及一组中性灰阶与深色#090500、#000000、#FFFFFF、#F5F5F5、#1E1E1E、#252525、#E0E0A0A0原文为#A0A0A0、#404040、#1D3557。这里需要说明一个事实边界色卡表是文档层面的展示集合真正参与粒子渲染的颜色以src/options.ts中的 6 个fill.value为准同时 README 底部 “Background” 一行标注的#1A1000与源码中background: #FFF3E6并不一致README 内容带有明显的模板生成痕迹实际背景色请以源码文件 src/options.ts 为准。注册机制loadPastelSunsetPalette 的源码链路标准入口调色板对外暴露的加载函数定义在 src/index.tsimport { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName pastel-sunset; export async function loadPastelSunsetPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }关键点有两个注册键名是pastel-sunset。这正是后续粒子选项里palette字段需要填的值注册动作通过engine.pluginManager.register(...)延迟执行确保在引擎初始化完成后才写入调色板。addPalette的实现位于引擎侧 PluginManager.ts逻辑非常直接——把调色板对象以名字为 key 存入内部palettesMapaddPalette(name: string, palette: IPalette): void { this.palettes.set(name, palette); }惰性lazy入口src/index.lazy.ts 提供同名的 lazy 版本区别在于options通过await import(./options.js)动态引入export async function loadPastelSunsetPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(async e { const { options } await import(./options.js); e.pluginManager.addPalette(paletteName, options); }); }从源码结构看lazy 入口把颜色数据拆到独立的 chunk 中适合对打包体积敏感、希望按需加载调色板数据的场景。package.json 的exports字段中同时暴露了.与./lazy两个子路径并分别映射到 ESM、CJS、UMD、browser 与类型声明产物。浏览器全局入口src/browser.ts 是 UMD/CDN 场景的入口它会把加载函数挂到全局对象上globalObject.loadPastelSunsetPalette loadPastelSunsetPalette;因此在 CDN 环境下脚本加载完成后可以直接调用全局函数loadPastelSunsetPalette(engine)。IPalette 接口约束调色板对象必须符合引擎定义在 IPalette.ts 的接口export interface IPalette { background: string; // 背景色 blendMode: GlobalCompositeOperation; // 画布混合模式 colors: SingleOrMultipleIPaletteColors; // 颜色组可单组或多组 name: string; // 调色板名称 }其中IPaletteColors同时支持fill填充色含enable、opacity、value和stroke描边色含value、width两个可选段且colors本身支持“单组或多组”结构。pastel sunset 只使用了fill段未定义描边色也未启用opacity范围值——意味着粒子将以纯色、不透明度默认值渲染。实际接入方式npm 方式vanilla JS / TypeScriptnpm install tsparticles/engine tsparticles/basic tsparticles/palette-pastel-sunset然后在初始化时按“基础包 → 调色板 → 加载实例”的顺序注册import { tsParticles, loadBasic } from tsparticles/basic; import { loadPastelSunsetPalette } from tsparticles/palette-pastel-sunset; (async () { await loadBasic(tsParticles.engine); await loadPastelSunsetPalette(tsParticles.engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: pastel-sunset, // 必须与注册键名一致 }; await tsParticles.load({ id: tsparticles, options }); })();若使用 lazy 入口只需把导入来源换成tsparticles/palette-pastel-sunset/lazy函数名与调用方式不变。CDN 方式script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-pastel-sunset4/tsparticles.palette-pastel-sunset.umd.min.js/script需要提醒仓库中 README.md 的 CDN 片段沿用了模板包名tsparticles.palette-coloredSmokeAmber.min.js函数名写作loadSunsetPalette这些与其自身package.jsontsparticles/palette-pastel-sunset、loadPastelSunsetPalette不符。接入 CDN 时应以package.json声明的包名与 src/browser.ts 暴露的全局函数名为准并核对 jsDelivr 上实际产物的文件名。框架组件库如果使用 React、Vue、Angular、Svelte 等组件封装思路一致先确保引擎中注册了loadPastelSunsetPalette再在组件 props 中传入粒子选项含palette: pastel-sunset。自定义与覆盖README 明确说明调色板应用后所有粒子选项仍可按标准 tsParticles 配置方式覆盖。结合IPalette接口常见的微调方向包括换背景在实例选项中单独设置background覆盖#FFF3E6改混合模式如需要发光叠加效果可在引擎层面调整blendMode调色板默认是source-over改填充色直接修改particles.color相关选项或在自定义调色板对象中扩展fill.value数组加描边IPaletteColors支持stroke段可在自建调色板中补充stroke.value与stroke.widthpastel sunset 默认未提供。小结pastel sunset 是 tsParticles 调色板体系中的一个标准子包src/options.ts提供 6 色暖调填充色与#FFF3E6背景src/index.ts/src/index.lazy.ts分别以标准与惰性方式调用pluginManager.addPalette(pastel-sunset, options)完成注册src/browser.ts面向 CDN 场景暴露全局函数。理解了 “数据IPalette— 注册addPalette— 选项引用palette 键名” 这条链路后同样的方法可以迁移到仓库palettes/目录下的其他调色包子包。【免费下载链接】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 pastel sunset 调色板：@tsparticles/palette-pastel-sunset 的颜色定义、注册机制与接入方法
tsParticles pastel sunset 调色板tsparticles/palette-pastel-sunset 的颜色定义、注册机制与接入方法【免费下载链接】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负责为粒子动画提供统一的背景色、混合模式与填充色集合。本文以仓库中palettes/pastel/sunset子包为研究对象完整梳理 pastel sunset 调色板包含的具体颜色值、它在引擎中通过pluginManager.addPalette注册的源码链路以及如何配合tsparticles/engine与运行时基础包如tsparticles/basic在页面中实际应用并自定义这套配色。调色板包概述palettes/pastel/sunset是 monorepo 中的一个独立 npm 子包包名为tsparticles/palette-pastel-sunset见 package.json其唯一运行时依赖是工作区内的tsparticles/engine属于纯数据 注册函数式的轻量包不包含任何粒子行为逻辑。官方 READMEREADME.md给出的使用步骤可以概括为三步安装tsparticles/engine或改用 CDN bundle加载一个基础运行时包例如tsparticles/basic并在调用tsParticles.load(...)之前先调用调色板的load函数在粒子选项里应用该调色板并给出一份最简的粒子配置。需要注意的前提是调色板只定义颜色不定义完整行为因此必须与运行时包和粒子选项搭配使用才能看到效果。颜色构成源码中的真实配色调色板的实际颜色定义在 src/options.ts 中它导出一个符合引擎IPalette接口的对象import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Pastel Sunset, background: #FFF3E6, blendMode: source-over, colors: { fill: { enable: true, value: [ #FFD4B3, #FFCCBA, #FFD9B3, #FFCAB3, #FFE4BA, #FFC9BA, ], }, }, };从源码看这套 pastel sunset 配色由三部分组成属性值说明background#FFF3E6画布背景色偏暖的奶米白blendModesource-overCanvas 默认源覆盖混合模式colors.fill.enabletrue启用填充色colors.fill.value6 种淡暖色粒子填充色从中随机/循环取值6 种填充色均为低饱和度的暖橙-米粉色调#FFD4B3、#FFCCBA、#FFD9B3、#FFCAB3、#FFE4BA、#FFC9BA。而 README.md 中的 “Colors” 色卡表则展示了一组更大的预览色板包括深棕橙渐变#1A1000、#3A2200、#6B3D00、#A65A00、#D98A1A、#FFC266、#FFA500、浅米色系#FFF3E6、#FFEFD7、#FFD4B3、#FFCCBA、#FFD9B3、#FFCAB3、#FFE4BA、#FFC9BA以及一组中性灰阶与深色#090500、#000000、#FFFFFF、#F5F5F5、#1E1E1E、#252525、#E0E0A0A0原文为#A0A0A0、#404040、#1D3557。这里需要说明一个事实边界色卡表是文档层面的展示集合真正参与粒子渲染的颜色以src/options.ts中的 6 个fill.value为准同时 README 底部 “Background” 一行标注的#1A1000与源码中background: #FFF3E6并不一致README 内容带有明显的模板生成痕迹实际背景色请以源码文件 src/options.ts 为准。注册机制loadPastelSunsetPalette 的源码链路标准入口调色板对外暴露的加载函数定义在 src/index.tsimport { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName pastel-sunset; export async function loadPastelSunsetPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }关键点有两个注册键名是pastel-sunset。这正是后续粒子选项里palette字段需要填的值注册动作通过engine.pluginManager.register(...)延迟执行确保在引擎初始化完成后才写入调色板。addPalette的实现位于引擎侧 PluginManager.ts逻辑非常直接——把调色板对象以名字为 key 存入内部palettesMapaddPalette(name: string, palette: IPalette): void { this.palettes.set(name, palette); }惰性lazy入口src/index.lazy.ts 提供同名的 lazy 版本区别在于options通过await import(./options.js)动态引入export async function loadPastelSunsetPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(async e { const { options } await import(./options.js); e.pluginManager.addPalette(paletteName, options); }); }从源码结构看lazy 入口把颜色数据拆到独立的 chunk 中适合对打包体积敏感、希望按需加载调色板数据的场景。package.json 的exports字段中同时暴露了.与./lazy两个子路径并分别映射到 ESM、CJS、UMD、browser 与类型声明产物。浏览器全局入口src/browser.ts 是 UMD/CDN 场景的入口它会把加载函数挂到全局对象上globalObject.loadPastelSunsetPalette loadPastelSunsetPalette;因此在 CDN 环境下脚本加载完成后可以直接调用全局函数loadPastelSunsetPalette(engine)。IPalette 接口约束调色板对象必须符合引擎定义在 IPalette.ts 的接口export interface IPalette { background: string; // 背景色 blendMode: GlobalCompositeOperation; // 画布混合模式 colors: SingleOrMultipleIPaletteColors; // 颜色组可单组或多组 name: string; // 调色板名称 }其中IPaletteColors同时支持fill填充色含enable、opacity、value和stroke描边色含value、width两个可选段且colors本身支持“单组或多组”结构。pastel sunset 只使用了fill段未定义描边色也未启用opacity范围值——意味着粒子将以纯色、不透明度默认值渲染。实际接入方式npm 方式vanilla JS / TypeScriptnpm install tsparticles/engine tsparticles/basic tsparticles/palette-pastel-sunset然后在初始化时按“基础包 → 调色板 → 加载实例”的顺序注册import { tsParticles, loadBasic } from tsparticles/basic; import { loadPastelSunsetPalette } from tsparticles/palette-pastel-sunset; (async () { await loadBasic(tsParticles.engine); await loadPastelSunsetPalette(tsParticles.engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: pastel-sunset, // 必须与注册键名一致 }; await tsParticles.load({ id: tsparticles, options }); })();若使用 lazy 入口只需把导入来源换成tsparticles/palette-pastel-sunset/lazy函数名与调用方式不变。CDN 方式script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-pastel-sunset4/tsparticles.palette-pastel-sunset.umd.min.js/script需要提醒仓库中 README.md 的 CDN 片段沿用了模板包名tsparticles.palette-coloredSmokeAmber.min.js函数名写作loadSunsetPalette这些与其自身package.jsontsparticles/palette-pastel-sunset、loadPastelSunsetPalette不符。接入 CDN 时应以package.json声明的包名与 src/browser.ts 暴露的全局函数名为准并核对 jsDelivr 上实际产物的文件名。框架组件库如果使用 React、Vue、Angular、Svelte 等组件封装思路一致先确保引擎中注册了loadPastelSunsetPalette再在组件 props 中传入粒子选项含palette: pastel-sunset。自定义与覆盖README 明确说明调色板应用后所有粒子选项仍可按标准 tsParticles 配置方式覆盖。结合IPalette接口常见的微调方向包括换背景在实例选项中单独设置background覆盖#FFF3E6改混合模式如需要发光叠加效果可在引擎层面调整blendMode调色板默认是source-over改填充色直接修改particles.color相关选项或在自定义调色板对象中扩展fill.value数组加描边IPaletteColors支持stroke段可在自建调色板中补充stroke.value与stroke.widthpastel sunset 默认未提供。小结pastel sunset 是 tsParticles 调色板体系中的一个标准子包src/options.ts提供 6 色暖调填充色与#FFF3E6背景src/index.ts/src/index.lazy.ts分别以标准与惰性方式调用pluginManager.addPalette(pastel-sunset, options)完成注册src/browser.ts面向 CDN 场景暴露全局函数。理解了 “数据IPalette— 注册addPalette— 选项引用palette 键名” 这条链路后同样的方法可以迁移到仓库palettes/目录下的其他调色包子包。【免费下载链接】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），仅供参考