拓冰网站定制 
tsParticles PrismScatter 棱镜散射调色板实战指南从色板解析到粒子效果落地【免费下载链接】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/palette-prism-scatter是 tsParticles 生态中一款以棱镜散射为视觉主题的颜色调色板Palette它在深黑背景上铺开红、橙、黄、绿、蓝、靛、紫七种高饱和光谱色配合screen混合模式与细描边营造出类似光线经过三棱镜后散射弥散的粒子氛围。本文以 palettes/spectrum/prismScatter/README.md 为骨架完整讲解该调色板的色板构成、安装引入、配置方式与自定义方法并结合仓库内调色板注册源码与引擎的调色板加载机制帮助你快速在网页背景中落地这一效果并理解其底层工作原理。调色板是什么颜色是定义不是完整行为在深入 PrismScatter 之前需要先厘清 tsParticles 中调色板Palette这一概念。官方 README 明确强调A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.即调色板只定义颜色不定义完整行为。它不会替你决定粒子数量、形状、运动方式或生命周期——这些仍然由你提供的particles选项负责。调色板的作用是提供一组经过设计的配色方案让你无需手写一堆颜色值即可获得视觉统一的效果。PrismScatter 正是这样的一个配色包它属于palettes/spectrum光谱系列目录npm 包名为tsparticles/palette-prism-scatter见 package.json当前仓库内版本为4.3.3仅依赖tsparticles/engine。PrismScatter 色板全解析颜色构成与背景根据 README 的 Colors 表格PrismScatter 调色板由 7 种前景色与 1 种背景色构成类型色值视觉定位前景色#FF0022红色前景色#FF6600橙色前景色#FFEE00黄色前景色#00FF44绿色前景色#00AAFF青色天空蓝前景色#0000FF蓝色前景色#8800FF紫色背景色#020202近黑深色背景这 7 种颜色从红到紫的排布正对应可见光谱经棱镜折射后的色序这正是 Prism Scatter棱镜散射 名称的由来。README 同时记录了该调色板的两个关键渲染属性Blend mode混合模式为screen这意味着粒子颜色与背景叠加时采用滤色逻辑——暗色区域几乎不受影响而亮色粒子会互相提亮、叠加出更亮的光感非常适合营造发光、霓虹、光谱弥散的视觉效果。源码视角IPalette 的真实结构色板的实际数据定义位于 options.ts它导出一个符合引擎IPalette接口的对象export const options: IPalette { name: Prism Scatter, background: #020202, blendMode: screen, colors: [ /* 三组颜色配置 */ ], };IPalette接口本身定义在引擎侧 engine/src/Core/Interfaces/IPalette.ts包含四个字段name调色板名称background背景色字符串blendMode画布全局混合模式类型为GlobalCompositeOperationcolors颜色配置可为单个或一组IPaletteColors对象。而每个IPaletteColors可包含fill填充与stroke描边两组子配置。IPaletteColorsFill提供enable是否启用填充、opacity透明度区间与value单个或多个颜色值IPaletteColorsStroke提供opacity、value与必需的width描边宽度区间。value的类型是SingleOrMultiplestring意味着你可以传入单个颜色也可以传入颜色数组——引擎会从数组中随机取样。PrismScatter 正是充分利用了这些字段定义了三组颜色配置纯填充组填充启用取 7 种光谱色随机之一纯描边组不填充描边颜色为#FFFFFF与#F3F8FF冷白宽度在0.6 ~ 1.2之间随机填充 描边组同时启用填充7 种光谱色与描边#00C8FF、#0000FF、#8800FF、#FF0022宽度1.4 ~ 2.8。正是因为这三组配置的存在画面中会同时出现实心粒子、细线描边粒子以及填充 彩色描边的复合粒子颗粒层次比单一配色丰富得多。需要注意README 颜色表格底部记录的 Fill: false 与当前源码中 fill 已启用enable: true存在出入实际渲染效果以 options.ts 中三组配置为准。快速接入清单按照 README 的 Quick checklist接入 PrismScatter 只需三步安装tsparticles/engine或直接使用 CDN bundle加载一个运行时基础包例如tsparticles/basic并在tsParticles.load(...)之前调用loadPrismScatterPalette注册调色板在 options 中应用调色板并编写一份最小粒子配置。需要再次强调调色板只提供颜色粒子行为仍需你自行配置。安装与引入方式CDN / Vanilla JS / jQuery在原生 HTML 页面或 jQuery 项目中通过 jsDelivr 引入基础包与调色板脚本即可script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-prismScatter4/tsparticles.palette-coloredSmokeAmber.min.js/script其中第一个脚本提供引擎与基础粒子能力第二个脚本注册 PrismScatter 调色板。需要说明的是npm 上的正式包名为tsparticles/palette-prism-scatter见 package.json而 README 中的 CDN 文件名沿用了调色板项目早期的命名习惯package.dist.json 的jsdelivr字段给出了打包产物对应的实际分发文件名如果你从 npm 拉取包可以以该字段为准。无论文件名如何加载后全局都会暴露loadPrismScatterPalette函数——这一点由 browser.ts 中的全局对象挂载逻辑保证。npm / 模块化引入在 Vite、Webpack 等现代构建环境中更推荐使用 npm 安装后按需导入npm install tsparticles/engine tsparticles/basic tsparticles/palette-prism-scatter核心用法加载调色板并编写选项脚本加载完成后即可初始化 tsParticles。下面是 README 提供的完整示例(async engine { await loadBasic(engine); await loadPrismScatterPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: prismScatter, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段代码的关键点有三处先注册、后加载loadBasic(engine)与loadPrismScatterPalette(engine)必须在engine.load(...)之前完成否则引擎在解析 options 中的palette字段时会找不到对应注册项。palette: prismScatter是关键开关它是引擎顶层选项之一。从 Options.ts 的源码可以看到当data.palette存在时引擎会调用#importPalette从PluginManager中取出同名调色板并自动展开为三部分配置背景色background.color、混合模式blend的enable: true与mode以及particles.palette字段。粒子行为完全由你掌控示例中number: 200控制粒子数量为 200shape: circle指定圆形size在10 ~ 15之间随机move.enable: true配合speed: 2让粒子缓慢漂移。修改这些值即可改变整体观感。注册名称的细节源码中的 paletteName细心的读者可能注意到示例中的选项写的是palette: prismScatter而 index.ts 源码中注册的键是prism-scatterconst paletteName prism-scatter; export async function loadPrismScatterPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }PluginManager.addPalette的实现见 engine/src/Core/Utils/PluginManager.ts只是把名称与配置存入palettesMap而getPalette按名称精确查找。README 示例与注册键在大小写/连字符上不完全一致实际使用中请以源码注册键prism-scatter为准避免#importPalette因查找不到而静默跳过Options.ts中if (!paletteData) return;的容错逻辑不会报错但颜色不会生效。懒加载Lazy版本对于需要控制首屏加载体积的场景可以导入懒加载入口。仓库提供了 index.lazy.ts它同样导出loadPrismScatterPalette但将options的导入推迟到注册回调内部执行动态import(./options.js)从而让调色板数据与主包分离、按需加载。对应的包导出路径为tsparticles/palette-prism-scatter/lazy构建产物由 rollup.config.js 生成模块名为palette-prismScatter。自定义一切选项皆可覆盖README 对自定义给出了一条重要说明原文以 ⚠️ 强调You can override all the options defining the properties like in any standardtsParticlesinstallation.也就是说调色板只是为你填充了一组默认值你完全可以用标准的 tsParticles 选项语法覆盖其中任意属性。例如想让粒子更密集把particles.number.value提高到 300想保留调色板的颜色但改变形态将shape.type换成square、star或任意已加载的形状想调整运动节奏修改move.speed或增加move.direction、move.outModes等运动选项想换背景直接在 options 中写background: { color: #111111 }覆盖调色板自带的#020202。覆盖的粒度与普通 tsParticles 配置完全一致这意味着你可以在开箱即用的光谱配色与完全自定义的粒子行为之间自由组合。在框架组件中使用tsParticles 官方为 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 与 Web Components 等提供了一整套组件库对应仓库wrappers/目录下的各子项目。在这些框架中使用 PrismScatter 的思路与原生环境一致通过对应框架组件库安装并引入 tsParticles 组件在初始化回调中调用loadPrismScatterPalette注册调色板在组件的 options 中填写palette字段与粒子配置。README 提示可前往对应组件库的文档查阅具体调用方式。由于调色板注册与引擎加载是跨框架通用的插件机制只要保证注册发生在 load 之前任何组件库都能复用这套流程。小结PrismScatter是 tsParticles 的棱镜散射配色调色板黑底#020202 红到紫 7 种光谱色 screen混合模式定义于 options.ts它只负责颜色粒子数量、形状、运动等行为必须由你的particles选项提供接入三步走安装引擎与基础包 → 调用loadPrismScatterPalette注册 → 在 options 中设置palette并配置粒子引擎收到palette字段后会经由 Options.ts 的#importPalette自动展开背景色、混合模式与粒子配色所有标准 tsParticles 选项均可覆盖调色板默认值便于在光谱配色基础上做深度定制。如果你想进一步探索可继续阅读仓库内其他系列调色板见palettes/目录并参考 engine/src/Core/Interfaces/IPalette.ts 了解自定义调色板的完整数据结构——照着该接口写一份options、再用addPalette注册你就能打造属于自己的调色板。【免费下载链接】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 PrismScatter 棱镜散射调色板实战指南：从色板解析到粒子效果落地
tsParticles PrismScatter 棱镜散射调色板实战指南从色板解析到粒子效果落地【免费下载链接】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/palette-prism-scatter是 tsParticles 生态中一款以棱镜散射为视觉主题的颜色调色板Palette它在深黑背景上铺开红、橙、黄、绿、蓝、靛、紫七种高饱和光谱色配合screen混合模式与细描边营造出类似光线经过三棱镜后散射弥散的粒子氛围。本文以 palettes/spectrum/prismScatter/README.md 为骨架完整讲解该调色板的色板构成、安装引入、配置方式与自定义方法并结合仓库内调色板注册源码与引擎的调色板加载机制帮助你快速在网页背景中落地这一效果并理解其底层工作原理。调色板是什么颜色是定义不是完整行为在深入 PrismScatter 之前需要先厘清 tsParticles 中调色板Palette这一概念。官方 README 明确强调A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.即调色板只定义颜色不定义完整行为。它不会替你决定粒子数量、形状、运动方式或生命周期——这些仍然由你提供的particles选项负责。调色板的作用是提供一组经过设计的配色方案让你无需手写一堆颜色值即可获得视觉统一的效果。PrismScatter 正是这样的一个配色包它属于palettes/spectrum光谱系列目录npm 包名为tsparticles/palette-prism-scatter见 package.json当前仓库内版本为4.3.3仅依赖tsparticles/engine。PrismScatter 色板全解析颜色构成与背景根据 README 的 Colors 表格PrismScatter 调色板由 7 种前景色与 1 种背景色构成类型色值视觉定位前景色#FF0022红色前景色#FF6600橙色前景色#FFEE00黄色前景色#00FF44绿色前景色#00AAFF青色天空蓝前景色#0000FF蓝色前景色#8800FF紫色背景色#020202近黑深色背景这 7 种颜色从红到紫的排布正对应可见光谱经棱镜折射后的色序这正是 Prism Scatter棱镜散射 名称的由来。README 同时记录了该调色板的两个关键渲染属性Blend mode混合模式为screen这意味着粒子颜色与背景叠加时采用滤色逻辑——暗色区域几乎不受影响而亮色粒子会互相提亮、叠加出更亮的光感非常适合营造发光、霓虹、光谱弥散的视觉效果。源码视角IPalette 的真实结构色板的实际数据定义位于 options.ts它导出一个符合引擎IPalette接口的对象export const options: IPalette { name: Prism Scatter, background: #020202, blendMode: screen, colors: [ /* 三组颜色配置 */ ], };IPalette接口本身定义在引擎侧 engine/src/Core/Interfaces/IPalette.ts包含四个字段name调色板名称background背景色字符串blendMode画布全局混合模式类型为GlobalCompositeOperationcolors颜色配置可为单个或一组IPaletteColors对象。而每个IPaletteColors可包含fill填充与stroke描边两组子配置。IPaletteColorsFill提供enable是否启用填充、opacity透明度区间与value单个或多个颜色值IPaletteColorsStroke提供opacity、value与必需的width描边宽度区间。value的类型是SingleOrMultiplestring意味着你可以传入单个颜色也可以传入颜色数组——引擎会从数组中随机取样。PrismScatter 正是充分利用了这些字段定义了三组颜色配置纯填充组填充启用取 7 种光谱色随机之一纯描边组不填充描边颜色为#FFFFFF与#F3F8FF冷白宽度在0.6 ~ 1.2之间随机填充 描边组同时启用填充7 种光谱色与描边#00C8FF、#0000FF、#8800FF、#FF0022宽度1.4 ~ 2.8。正是因为这三组配置的存在画面中会同时出现实心粒子、细线描边粒子以及填充 彩色描边的复合粒子颗粒层次比单一配色丰富得多。需要注意README 颜色表格底部记录的 Fill: false 与当前源码中 fill 已启用enable: true存在出入实际渲染效果以 options.ts 中三组配置为准。快速接入清单按照 README 的 Quick checklist接入 PrismScatter 只需三步安装tsparticles/engine或直接使用 CDN bundle加载一个运行时基础包例如tsparticles/basic并在tsParticles.load(...)之前调用loadPrismScatterPalette注册调色板在 options 中应用调色板并编写一份最小粒子配置。需要再次强调调色板只提供颜色粒子行为仍需你自行配置。安装与引入方式CDN / Vanilla JS / jQuery在原生 HTML 页面或 jQuery 项目中通过 jsDelivr 引入基础包与调色板脚本即可script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-prismScatter4/tsparticles.palette-coloredSmokeAmber.min.js/script其中第一个脚本提供引擎与基础粒子能力第二个脚本注册 PrismScatter 调色板。需要说明的是npm 上的正式包名为tsparticles/palette-prism-scatter见 package.json而 README 中的 CDN 文件名沿用了调色板项目早期的命名习惯package.dist.json 的jsdelivr字段给出了打包产物对应的实际分发文件名如果你从 npm 拉取包可以以该字段为准。无论文件名如何加载后全局都会暴露loadPrismScatterPalette函数——这一点由 browser.ts 中的全局对象挂载逻辑保证。npm / 模块化引入在 Vite、Webpack 等现代构建环境中更推荐使用 npm 安装后按需导入npm install tsparticles/engine tsparticles/basic tsparticles/palette-prism-scatter核心用法加载调色板并编写选项脚本加载完成后即可初始化 tsParticles。下面是 README 提供的完整示例(async engine { await loadBasic(engine); await loadPrismScatterPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: prismScatter, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段代码的关键点有三处先注册、后加载loadBasic(engine)与loadPrismScatterPalette(engine)必须在engine.load(...)之前完成否则引擎在解析 options 中的palette字段时会找不到对应注册项。palette: prismScatter是关键开关它是引擎顶层选项之一。从 Options.ts 的源码可以看到当data.palette存在时引擎会调用#importPalette从PluginManager中取出同名调色板并自动展开为三部分配置背景色background.color、混合模式blend的enable: true与mode以及particles.palette字段。粒子行为完全由你掌控示例中number: 200控制粒子数量为 200shape: circle指定圆形size在10 ~ 15之间随机move.enable: true配合speed: 2让粒子缓慢漂移。修改这些值即可改变整体观感。注册名称的细节源码中的 paletteName细心的读者可能注意到示例中的选项写的是palette: prismScatter而 index.ts 源码中注册的键是prism-scatterconst paletteName prism-scatter; export async function loadPrismScatterPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }PluginManager.addPalette的实现见 engine/src/Core/Utils/PluginManager.ts只是把名称与配置存入palettesMap而getPalette按名称精确查找。README 示例与注册键在大小写/连字符上不完全一致实际使用中请以源码注册键prism-scatter为准避免#importPalette因查找不到而静默跳过Options.ts中if (!paletteData) return;的容错逻辑不会报错但颜色不会生效。懒加载Lazy版本对于需要控制首屏加载体积的场景可以导入懒加载入口。仓库提供了 index.lazy.ts它同样导出loadPrismScatterPalette但将options的导入推迟到注册回调内部执行动态import(./options.js)从而让调色板数据与主包分离、按需加载。对应的包导出路径为tsparticles/palette-prism-scatter/lazy构建产物由 rollup.config.js 生成模块名为palette-prismScatter。自定义一切选项皆可覆盖README 对自定义给出了一条重要说明原文以 ⚠️ 强调You can override all the options defining the properties like in any standardtsParticlesinstallation.也就是说调色板只是为你填充了一组默认值你完全可以用标准的 tsParticles 选项语法覆盖其中任意属性。例如想让粒子更密集把particles.number.value提高到 300想保留调色板的颜色但改变形态将shape.type换成square、star或任意已加载的形状想调整运动节奏修改move.speed或增加move.direction、move.outModes等运动选项想换背景直接在 options 中写background: { color: #111111 }覆盖调色板自带的#020202。覆盖的粒度与普通 tsParticles 配置完全一致这意味着你可以在开箱即用的光谱配色与完全自定义的粒子行为之间自由组合。在框架组件中使用tsParticles 官方为 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 与 Web Components 等提供了一整套组件库对应仓库wrappers/目录下的各子项目。在这些框架中使用 PrismScatter 的思路与原生环境一致通过对应框架组件库安装并引入 tsParticles 组件在初始化回调中调用loadPrismScatterPalette注册调色板在组件的 options 中填写palette字段与粒子配置。README 提示可前往对应组件库的文档查阅具体调用方式。由于调色板注册与引擎加载是跨框架通用的插件机制只要保证注册发生在 load 之前任何组件库都能复用这套流程。小结PrismScatter是 tsParticles 的棱镜散射配色调色板黑底#020202 红到紫 7 种光谱色 screen混合模式定义于 options.ts它只负责颜色粒子数量、形状、运动等行为必须由你的particles选项提供接入三步走安装引擎与基础包 → 调用loadPrismScatterPalette注册 → 在 options 中设置palette并配置粒子引擎收到palette字段后会经由 Options.ts 的#importPalette自动展开背景色、混合模式与粒子配色所有标准 tsParticles 选项均可覆盖调色板默认值便于在光谱配色基础上做深度定制。如果你想进一步探索可继续阅读仓库内其他系列调色板见palettes/目录并参考 engine/src/Core/Interfaces/IPalette.ts 了解自定义调色板的完整数据结构——照着该接口写一份options、再用addPalette注册你就能打造属于自己的调色板。【免费下载链接】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），仅供参考