tsParticles RustAndCorrosion 调色板实战指南为粒子特效注入锈蚀与腐化的工业质感【免费下载链接】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本文是一份围绕 tsParticlestsparticles/palette-rust-and-corrosion调色板展开的专项使用指南。该调色板位于仓库 palettes/earth/rustAndCorrosion 目录属于 tsParticles「地球earth」主题下的调色板系列与 caustics、desertSand、mudAndDirt、oilSlick、rockAndGravel、skinAndOrganic 等并列。读完本文你将掌握该调色板的色板构成、底层注册机制以及如何在 CDN / Vanilla JS / jQuery 和各类框架组件中加载使用为网站背景打造锈迹斑斑的工业风粒子效果。上图展示了 RustAndCorrosion 调色板的实际渲染效果1920×1080 示例图位于 images/sample.png。RustAndCorrosion 调色板是什么RustAndCorrosion 是 tsParticles 官方提供的一款「颜色调色板Palette」。与预设Preset不同调色板只定义颜色不定义粒子的完整行为——粒子数量、形状、运动方式等仍需要由你通过粒子配置particles options来指定或者与tsparticles/basic之类的运行时包配合使用。正如官方文档所述A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.这一设计让调色板可以灵活叠加到任意粒子配置之上你既可以基于basic包快速看到效果也可以在自有的完整配置里仅借用它来统一着色。色板构成与颜色一览RustAndCorrosion 的官方 README 给出了完整的色板定义这里完整继承如下色块色值用途#1A0800深黑褐粒子填充色之一#441400深棕粒子填充色之一#883300赭石棕粒子填充色之一#AA4400橙棕粒子填充色之一#CC6622铁锈橙粒子填充色之一#EE8833亮橙粒子填充色之一#DDAA66沙黄粒子填充色之一#100800近黑暖棕背景色Background附加属性Blend mode混合模式source-overFill填充true这一组色值呈现出从深褐到橙黄的渐变模拟金属氧化、锈蚀与腐化的视觉效果非常适合工业风、蒸汽朋克、末日废土或复古机械类网站背景。从源码可以精确印证上述定义。调色板的完整配置位于 palettes/earth/rustAndCorrosion/src/options.ts内容如下import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Rust Corrosion, background: #100800, blendMode: source-over, colors: { fill: { enable: true, value: [ #1A0800, #441400, #883300, #AA4400, #CC6622, #EE8833, #DDAA66, ], }, }, };注意源码中的注册名是rust-and-corrosion见 src/index.ts而使用时的palette选项值为rustAndCorrosion——README 示例中即采用驼峰写法两者通过 tsParticles 内部机制对应实际以选项中的字符串为准。调色板的底层工作原理RustAndCorrosion 不是硬编码在粒子配置里的写死色值而是以「插件注册」的方式挂载到引擎。从源码看加载函数只有十几行// palettes/earth/rustAndCorrosion/src/index.ts import { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName rust-and-corrosion; export async function loadRustAndCorrosionPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }关键调用链如下loadRustAndCorrosionPalette(engine)调用engine.pluginManager.register(...)注册插件插件注册后通过pluginManager.addPalette(name, options)把色板存入引擎的palettes映射表Mapstring, IPalette见 engine/src/Core/Utils/PluginManager.ts当你在 options 中写入palette: rustAndCorrosion时引擎在加载配置时会通过getPalette(name)查表并自动完成两件事见 engine/src/Options/Classes/Options.ts 与 engine/src/Options/Classes/Particles/ParticlesOptions.ts将调色板的background写入画布背景将调色板的blendMode应用于粒子绘制将调色板的colors转换为粒子的paint配置fill/stroke 颜色及其透明度作为粒子着色的默认值。因此只要注册了调色板并在 options 中指定palette字段你甚至无需再手动编写particles.color等颜色相关配置粒子会自动从调色板取色。IPalette接口的完整字段定义位于 engine/src/Core/Interfaces/IPalette.ts包括background: string—— 背景色blendMode: GlobalCompositeOperation—— 画布混合模式colors: SingleOrMultipleIPaletteColors—— 支持一组或多组颜色每组可含fill填充色含enable、opacity、value与stroke描边色含opacity、value、widthname: string—— 调色板名称。这也说明调色板体系是通用机制其他官方调色板如 earth 目录下的 caustics、oilSlick 等均遵循同一接口与注册流程。快速检查清单官方文档给出三步上手流程本文完整保留并补充细节安装引擎安装tsparticles/engine或直接使用下方的 CDN bundle加载基础包并注册调色板加载一个基础包例如tsparticles/basic并在tsParticles.load(...)之前调用loadRustAndCorrosionPalette应用调色板与最小粒子配置在 options 中写入palette: rustAndCorrosion并配合粒子数量、形状、尺寸、运动等最小配置。再次强调调色板只负责颜色完整的粒子行为需要运行时包与粒子配置共同提供。安装与使用方式一CDN / Vanilla JS / jQuery在 HTML 中依次引入基础包与调色板脚本script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-rustAndCorrosion4/tsparticles.palette-coloredSmokeAmber.min.js/script注意调色板脚本的 URL 文件名沿用了历史命名tsparticles.palette-coloredSmokeAmber.min.js与 npm 包名tsparticles/palette-rust-and-corrosion不完全一致引用时请以官方发布的 CDN 文件名为准。脚本加载完成后即可初始化tsParticles(async engine { await loadBasic(engine); await loadRustAndCorrosionPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: rustAndCorrosion, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);上述配置的含义loadBasic(engine)加载基础粒子运行时圆形等基础形状、基础运动能力loadRustAndCorrosionPalette(engine)注册色板particles.number.value: 200—— 同时存在 200 个粒子particles.shape.type: circle—— 粒子形状为圆形particles.size.value: { min: 10, max: 15 }—— 粒子尺寸在 1015 之间随机particles.move.enable: true, speed: 2—— 粒子以速度 2 运动palette: rustAndCorrosion—— 应用色板粒子自动按上述 7 色填充背景自动设为#100800混合模式为source-over。方式二npm 包安装模块化项目若使用打包工具Vite / Webpack / Rollup 等可安装引擎与调色板包npm install tsparticles/engine tsparticles/basic tsparticles/palette-rust-and-corrosion包名、版本与导出结构可参考 palettes/earth/rustAndCorrosion/package.json当前仓库内版本为4.3.3同时提供 ESMimport、CJSrequire、UMD 与浏览器构建并额外暴露./lazy子路径用于按需加载。构建脚本统一通过tsparticles/cli-command-build的tsparticles-build执行打包配置见 rollup.config.js。模块化项目中的等价写法import { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadRustAndCorrosionPalette } from tsparticles/palette-rust-and-corrosion; (async () { await loadBasic(tsParticles); await loadRustAndCorrosionPalette(tsParticles); await tsParticles.load({ id: tsparticles, options: { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2 }, }, palette: rustAndCorrosion, }, }); })();若希望减小首屏加载体积也可以使用 src/index.lazy.ts 暴露的懒加载入口tsparticles/palette-rust-and-corrosion/lazy它会在插件注册时才动态import(./options.js)载入色板数据。自定义与覆盖重要提示 ⚠️调色板提供的是默认颜色你依然可以在 options 中像标准 tsParticles 安装那样覆盖任意属性。例如const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2 }, color: { value: #AA4400 }, // 手动覆盖仅使用铁锈橙 }, background: { color: #000000 }, // 覆盖调色板背景 palette: rustAndCorrosion, };这样便能在保留调色板整体氛围的同时针对个别场景如品牌色、深色背景适配做精细化调整。方式三带 tsParticles 组件库的框架React、Vue2.x / 3.x、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等官方组件库位于仓库 wrappers 目录均支持在组件初始化前调用loadRustAndCorrosionPalette函数。具体调用方式请查阅对应组件库文档先加载组件库并安装其依赖的 tsParticles 包再在组件挂载前注册该调色板最后在组件配置中传入包含palette: rustAndCorrosion的 options 即可。从源码验证浏览器全局变量对于 CDN 场景src/browser.ts 会把loadRustAndCorrosionPalette挂载到globalThiswindow 对象因此前面示例中才能在浏览器全局作用域直接调用该函数globalObject.loadRustAndCorrosionPalette loadRustAndCorrosionPalette;小结RustAndCorrosion 调色板通过 tsParticles 的插件注册机制将「锈蚀橙」色系、暖黑背景与source-over混合模式一键应用到粒子特效中。使用它的完整链路是安装引擎与基础包 → 注册loadRustAndCorrosionPalette→ 在 options 中设置palette: rustAndCorrosion并补充粒子配置。它只负责颜色不限制行为因此可以无缝嵌入任何粒子配置或框架组件中。相关的官方调色板目录可进一步参考 palettes 根目录其中 earth 下还有多款同主题调色板可供组合探索。【免费下载链接】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），仅供参考