tsParticles SkinAndOrganic 调色板从 12 色暖色盘到网页粒子背景的完整接入指南【免费下载链接】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 的 SkinAndOrganic皮肤与有机调色板是 Earth 系列下的一套暖色系粒子配色方案它以肤色、砖红、大地棕等自然有机色调为核心配合浅米色背景与source-over混合模式适合营造温暖、柔和的粒子背景氛围。本文以 palettes/earth/skinAndOrganic/README.md 为骨架结合仓库内源码与引擎实现完整讲解该调色板的色彩构成、加载方式、配置示例以及底层工作机理帮助你快速把该调色板接入网页项目。调色板概览一套只定义颜色、不定义行为的选项包和 tsParticles 的其他调色板一样SkinAndOrganic 的核心定位是只提供色彩不提供完整的粒子行为。它定义了一个可以被引擎按名称引用的颜色集合fill 颜色、背景色、混合模式而粒子的数量、形状、运动、大小等行为仍需由使用者搭配基础运行包与粒子配置来完成。这一点在 README 的 Quick checklist 中有明确说明其接入步骤为安装tsparticles/engine或直接使用下方 CDN 打包文件加载一个基础包例如tsparticles/basic并在tsParticles.load(...)之前调用loadSkinAndOrganicPalette在配置项中应用该调色板并配合一份最小的粒子配置。调色板定义的只是颜色需要与运行时包和粒子选项搭配使用。色彩构成12 色填充 浅米色背景根据 README 的 Colors 表格SkinAndOrganic 提供 12 个填充色与 1 个背景色色值色值色值色值色值#FFDDCC#FFBBAA#FF9988#FF7766#EE5544#CC3322#AA2211#882211#FFCCAA#DDAA88#BB8866#886644———Background背景色#f8f0e8Blend mode混合模式source-overFill填充true这些色值在仓库源码 palettes/earth/skinAndOrganic/src/options.ts 中得到了完整印证import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Skin Organic, background: #f8f0e8, blendMode: source-over, colors: { fill: { enable: true, value: [ #FFDDCC, #FFBBAA, #FF9988, #FF7766, #EE5544, #CC3322, #AA2211, #882211, #FFCCAA, #DDAA88, #BB8866, #886644, ], }, }, };从色值分布可以看出这套配色从浅粉白#FFDDCC过渡到橙红#FF9988、#FF7766、砖红#CC3322、深红棕#AA2211、#882211再到大地棕#DDAA88、#BB8866、#886644整体呈现暖色渐变、层次自然的感觉适合模拟皮肤、大地、木质等有机质感。IPalette接口本身还支持 stroke描边配置定义于 engine/src/Core/Interfaces/IPalette.ts包含background、blendMode、colors、name四个字段其中colors可以是单组或多组SingleOrMultipleIPaletteColors每组可包含fill与可选的strokefill支持enable、可选opacity和颜色valuestroke则额外支持width。接入方式一CDN / Vanilla JS / jQuery对于不使用构建工具的场景README 给出了通过 jsDelivr 加载两个脚本的 CDN 方案script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-skinAndOrganic4/tsparticles.palette-coloredSmokeAmber.min.js/script需要注意的是README 中第二个脚本的tsparticles.palette-coloredSmokeAmber.min.js文件名沿用了模板复制时的命名而当前仓库package.jsonpalettes/earth/skinAndOrganic/package.json显示本包的实际名称为tsparticles/palette-skin-and-organic因此在实际引用时应以tsparticles/palette-skin-and-organic为基准核对 CDN 产物文件名。加载脚本后即可设置粒子(async engine { await loadBasic(engine); await loadSkinAndOrganicPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: skinAndOrganic, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段示例的关键点loadBasic(engine)先加载基础运行能力粒子创建、移动、绘制等loadSkinAndOrganicPalette(engine)注册调色板必须在load之前调用配置项中通过顶层palette: skinAndOrganic引用该调色板number、shape、size、move等字段定义了粒子的数量、形状、大小与运动行为——这些正是调色板之外需要自己补充的部分。自定义覆盖README 特别强调该调色板中的所有选项都可以像标准 tsParticles 安装一样通过显式定义对应属性进行覆盖。也就是说palette只是提供默认颜色来源你仍然可以在particles中直接写color、background等字段来覆盖调色板导入的默认值实现个性化调整。接入方式二框架组件库如果使用的是 React.js、Vue.js2.x 与 3.x、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 或 Web Components 等带有 tsParticles 组件库的框架只需在组件库文档中查看对应接入方式并在初始化前调用loadSkinAndOrganicPalette函数即可。仓库根目录下的 wrappers 目录集中存放了上述各框架的官方封装实现可供参考。源码级原理调色板如何被注册与解析注册环节pluginManager.addPaletteloadSkinAndOrganicPalette的实现位于 palettes/earth/skinAndOrganic/src/index.tsimport { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName skin-and-organic; export async function loadSkinAndOrganicPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }可以看到调色板实际上被注册在引擎的pluginManager中内部维护一个palettes: Mapstring, IPaletteaddPalette(name, palette)即向该 Map 写入键值对见 engine/src/Core/Utils/PluginManager.ts。同时仓库还提供了懒加载变体 palettes/earth/skinAndOrganic/src/index.lazy.ts其差异在于将options的导入改为动态import(./options.js)以支持按需加载而 palettes/earth/skinAndOrganic/src/browser.ts 则把loadSkinAndOrganicPalette挂载到全局对象上供 CDN 直接调用。消费环节options 解析与导入调色板被引用后引擎在加载配置时会执行导入逻辑分别在两层完成解析顶层Options的#importPalette负责导入背景色与混合模式通过pluginManager.getPalette(palette)取到IPalette后将background映射为配置的背景色将blendMode映射为画布混合模式见 engine/src/Options/Classes/Options.ts粒子级ParticlesOptions的#importPalette负责把colors中的fill/stroke映射为粒子绘制的 paint 默认值包括enable、opacity、width等见 engine/src/Options/Classes/Particles/ParticlesOptions.ts。这一设计解释了 README 中调色板只定义颜色、不定义行为的原因它本质上是一份被命名注册的默认色值来源在配置解析阶段被展开进标准选项树之后粒子的所有行为仍然由常规的 particles 配置决定。效果预览与示例仓库为每个调色板都提供了 1920x1080 的样例截图SkinAndOrganic 的效果预览位于 palettes/earth/skinAndOrganic/images/sample.png。图中粒子以大小不一的圆形散布在浅米色#f8f0e8背景上颜色覆盖浅粉、暖橙、砖红、深棕等色阶整体氛围温暖柔和视觉上带有自然有机的质感。如需在本地复现该效果可将上文 CDN 示例中的options保存为 JSON通过 tsParticles 官方演示页面的自定义配置入口加载也可以直接使用本仓库中的调色板源码配合tsparticles/engine构建自己的最小示例。相关资源调色板与预设目录仓库根目录 palettes 下按earth等主题分类存放了全部调色板如 caustics、desertSand、mudAndDirt、oilSlick、rockAndGravel、rustAndCorrosion 等每个调色板结构与 SkinAndOrganic 一致引擎核心文档engine/README.md 与 engine/src 目录中的 Core、Options、Utils 等源码模块基础包说明bundles/basic 提供了上文示例中用到的tsparticles/basic。小结SkinAndOrganic 是 tsParticles 生态中一套即插即用的暖色系粒子配色方案12 个从浅粉到深棕的填充色、浅米色背景与source-over混合模式配合loadSkinAndOrganicPalette注册函数和顶层palette配置项即可快速接入。理解其颜色与行为解耦的设计思路后你可以在任何标准 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 SkinAndOrganic 调色板：从 12 色暖色盘到网页粒子背景的完整接入指南
tsParticles SkinAndOrganic 调色板从 12 色暖色盘到网页粒子背景的完整接入指南【免费下载链接】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 的 SkinAndOrganic皮肤与有机调色板是 Earth 系列下的一套暖色系粒子配色方案它以肤色、砖红、大地棕等自然有机色调为核心配合浅米色背景与source-over混合模式适合营造温暖、柔和的粒子背景氛围。本文以 palettes/earth/skinAndOrganic/README.md 为骨架结合仓库内源码与引擎实现完整讲解该调色板的色彩构成、加载方式、配置示例以及底层工作机理帮助你快速把该调色板接入网页项目。调色板概览一套只定义颜色、不定义行为的选项包和 tsParticles 的其他调色板一样SkinAndOrganic 的核心定位是只提供色彩不提供完整的粒子行为。它定义了一个可以被引擎按名称引用的颜色集合fill 颜色、背景色、混合模式而粒子的数量、形状、运动、大小等行为仍需由使用者搭配基础运行包与粒子配置来完成。这一点在 README 的 Quick checklist 中有明确说明其接入步骤为安装tsparticles/engine或直接使用下方 CDN 打包文件加载一个基础包例如tsparticles/basic并在tsParticles.load(...)之前调用loadSkinAndOrganicPalette在配置项中应用该调色板并配合一份最小的粒子配置。调色板定义的只是颜色需要与运行时包和粒子选项搭配使用。色彩构成12 色填充 浅米色背景根据 README 的 Colors 表格SkinAndOrganic 提供 12 个填充色与 1 个背景色色值色值色值色值色值#FFDDCC#FFBBAA#FF9988#FF7766#EE5544#CC3322#AA2211#882211#FFCCAA#DDAA88#BB8866#886644———Background背景色#f8f0e8Blend mode混合模式source-overFill填充true这些色值在仓库源码 palettes/earth/skinAndOrganic/src/options.ts 中得到了完整印证import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Skin Organic, background: #f8f0e8, blendMode: source-over, colors: { fill: { enable: true, value: [ #FFDDCC, #FFBBAA, #FF9988, #FF7766, #EE5544, #CC3322, #AA2211, #882211, #FFCCAA, #DDAA88, #BB8866, #886644, ], }, }, };从色值分布可以看出这套配色从浅粉白#FFDDCC过渡到橙红#FF9988、#FF7766、砖红#CC3322、深红棕#AA2211、#882211再到大地棕#DDAA88、#BB8866、#886644整体呈现暖色渐变、层次自然的感觉适合模拟皮肤、大地、木质等有机质感。IPalette接口本身还支持 stroke描边配置定义于 engine/src/Core/Interfaces/IPalette.ts包含background、blendMode、colors、name四个字段其中colors可以是单组或多组SingleOrMultipleIPaletteColors每组可包含fill与可选的strokefill支持enable、可选opacity和颜色valuestroke则额外支持width。接入方式一CDN / Vanilla JS / jQuery对于不使用构建工具的场景README 给出了通过 jsDelivr 加载两个脚本的 CDN 方案script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-skinAndOrganic4/tsparticles.palette-coloredSmokeAmber.min.js/script需要注意的是README 中第二个脚本的tsparticles.palette-coloredSmokeAmber.min.js文件名沿用了模板复制时的命名而当前仓库package.jsonpalettes/earth/skinAndOrganic/package.json显示本包的实际名称为tsparticles/palette-skin-and-organic因此在实际引用时应以tsparticles/palette-skin-and-organic为基准核对 CDN 产物文件名。加载脚本后即可设置粒子(async engine { await loadBasic(engine); await loadSkinAndOrganicPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: skinAndOrganic, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段示例的关键点loadBasic(engine)先加载基础运行能力粒子创建、移动、绘制等loadSkinAndOrganicPalette(engine)注册调色板必须在load之前调用配置项中通过顶层palette: skinAndOrganic引用该调色板number、shape、size、move等字段定义了粒子的数量、形状、大小与运动行为——这些正是调色板之外需要自己补充的部分。自定义覆盖README 特别强调该调色板中的所有选项都可以像标准 tsParticles 安装一样通过显式定义对应属性进行覆盖。也就是说palette只是提供默认颜色来源你仍然可以在particles中直接写color、background等字段来覆盖调色板导入的默认值实现个性化调整。接入方式二框架组件库如果使用的是 React.js、Vue.js2.x 与 3.x、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 或 Web Components 等带有 tsParticles 组件库的框架只需在组件库文档中查看对应接入方式并在初始化前调用loadSkinAndOrganicPalette函数即可。仓库根目录下的 wrappers 目录集中存放了上述各框架的官方封装实现可供参考。源码级原理调色板如何被注册与解析注册环节pluginManager.addPaletteloadSkinAndOrganicPalette的实现位于 palettes/earth/skinAndOrganic/src/index.tsimport { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName skin-and-organic; export async function loadSkinAndOrganicPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }可以看到调色板实际上被注册在引擎的pluginManager中内部维护一个palettes: Mapstring, IPaletteaddPalette(name, palette)即向该 Map 写入键值对见 engine/src/Core/Utils/PluginManager.ts。同时仓库还提供了懒加载变体 palettes/earth/skinAndOrganic/src/index.lazy.ts其差异在于将options的导入改为动态import(./options.js)以支持按需加载而 palettes/earth/skinAndOrganic/src/browser.ts 则把loadSkinAndOrganicPalette挂载到全局对象上供 CDN 直接调用。消费环节options 解析与导入调色板被引用后引擎在加载配置时会执行导入逻辑分别在两层完成解析顶层Options的#importPalette负责导入背景色与混合模式通过pluginManager.getPalette(palette)取到IPalette后将background映射为配置的背景色将blendMode映射为画布混合模式见 engine/src/Options/Classes/Options.ts粒子级ParticlesOptions的#importPalette负责把colors中的fill/stroke映射为粒子绘制的 paint 默认值包括enable、opacity、width等见 engine/src/Options/Classes/Particles/ParticlesOptions.ts。这一设计解释了 README 中调色板只定义颜色、不定义行为的原因它本质上是一份被命名注册的默认色值来源在配置解析阶段被展开进标准选项树之后粒子的所有行为仍然由常规的 particles 配置决定。效果预览与示例仓库为每个调色板都提供了 1920x1080 的样例截图SkinAndOrganic 的效果预览位于 palettes/earth/skinAndOrganic/images/sample.png。图中粒子以大小不一的圆形散布在浅米色#f8f0e8背景上颜色覆盖浅粉、暖橙、砖红、深棕等色阶整体氛围温暖柔和视觉上带有自然有机的质感。如需在本地复现该效果可将上文 CDN 示例中的options保存为 JSON通过 tsParticles 官方演示页面的自定义配置入口加载也可以直接使用本仓库中的调色板源码配合tsparticles/engine构建自己的最小示例。相关资源调色板与预设目录仓库根目录 palettes 下按earth等主题分类存放了全部调色板如 caustics、desertSand、mudAndDirt、oilSlick、rockAndGravel、rustAndCorrosion 等每个调色板结构与 SkinAndOrganic 一致引擎核心文档engine/README.md 与 engine/src 目录中的 Core、Options、Utils 等源码模块基础包说明bundles/basic 提供了上文示例中用到的tsparticles/basic。小结SkinAndOrganic 是 tsParticles 生态中一套即插即用的暖色系粒子配色方案12 个从浅粉到深棕的填充色、浅米色背景与source-over混合模式配合loadSkinAndOrganicPalette注册函数和顶层palette配置项即可快速接入。理解其颜色与行为解耦的设计思路后你可以在任何标准 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），仅供参考