tsParticles Dust Haze 调色板实战指南用tsparticles/palette-dust-haze打造朦胧雾霭粒子背景【免费下载链接】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-dust-haze是 tsParticles 官方提供的 atmosphere 系列调色板插件之一它把黑色夜空背景下、由深褐到暖金渐变的悬浮尘雾颗粒这一套完整配色方案封装成可复用的调色板。调色板只负责定义颜色不包含粒子的行为逻辑因此你需要将它和运行时包如tsparticles/basic以及一份最小化的粒子配置组合使用。读完本文你将掌握通过 CDN 与包管理器两种方式接入该调色板、理解其背后的调色板注册与导入机制并学会在 React、Vue 等框架组件中直接复用它。调色板是什么只定义颜色不定义行为在 tsParticles 的插件体系中Palette调色板是一个相对独立的角色。官方文档给出过一个非常关键的定位说明一个调色板只定义颜色不定义完整的行为所以必须把它与运行时包和粒子选项搭配使用。这一点可以从源码中得到印证。调色板的本质是一份符合IPalette接口的数据对象该接口定义在 engine/src/Core/Interfaces/IPalette.tsexport interface IPalette { /** 背景颜色 */ background: string; /** Canvas 混合模式 */ blendMode: GlobalCompositeOperation; /** 调色板颜色支持单组或多组 */ colors: SingleOrMultipleIPaletteColors; /** 调色板名称 */ name: string; }其中colors又分为可选的两部分fill填充色见IPaletteColorsFill包含enable是否启用填充色、value单个或多个颜色值、可选的opacity透明度范围stroke描边色见IPaletteColorsStroke包含value、width描边宽度范围和可选的opacity。也就是说调色板可以控制背景色、画布混合模式和粒子的填充/描边颜色集合但粒子数量、形状、大小、运动方式等行为层面的配置仍然要由你写在options.particles中。Dust Haze 调色板的完整色板Dust Haze 的灵感是彩色烟雾/尘埃氛围。它提供了 6 个由深到浅的暖色粒子色外加 1 个固定背景色用途色值粒子色 1#443300深褐粒子色 2#775500棕褐粒子色 3#AA8833土金粒子色 4#CCAA55浅金粒子色 5#DDBB77麦金粒子色 6#EED099暖米金背景色#1a1200近黑深棕画布混合模式为source-over填充fill为启用状态。这组颜色在 palettes/atmosphere/dustHaze/src/options.ts 中有完整的 TypeScript 定义import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Dust Haze, background: #1a1200, blendMode: source-over, colors: { fill: { enable: true, value: [ #443300, #775500, #AA8833, #CCAA55, #DDBB77, #EED099, ], }, }, };快速上手清单在动手之前先明确三步走的基本流程安装或通过 CDN 引入tsparticles/engine加载一个基础运行时包例如tsparticles/basic并在tsParticles.load(...)之前调用loadDustHazePalette注册调色板在配置的palette字段中写入调色板名称并搭配一份最小化的粒子配置。通过 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-dustHaze4/tsparticles.palette-coloredSmokeAmber.min.js/script脚本加载完成后即可像下面这样初始化 tsParticles(async engine { await loadBasic(engine); await loadDustHazePalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: dustHaze, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段示例配置做了三件事loadBasic注册基础粒子功能、loadDustHazePalette注册调色板插件、palette: dustHaze在加载选项时把该调色板的颜色导入配置。number: { value: 200 }控制粒子数量为 200 个shape.type: circle使用圆形粒子size让粒子半径在 1015 之间随机move开启每秒 2 像素的匀速运动——配合 Dust Haze 的暖金色系就能形成尘埃缓慢悬浮飘动的视觉。自定义与覆盖调色板导入的只是一组默认颜色你完全可以像标准 tsParticles 安装一样在选项中覆盖任意属性。例如在palette: dustHaze之上再显式声明particles.color或调整background.color最终生效的配置会以你的显式声明为准。调色板的职责是提供一套开箱即用的颜色起点而不是限制你的发挥。通过 npm 包管理器使用调色板发布为独立的 npm 包tsparticles/palette-dust-haze。它的模块结构与版本信息定义在 palettes/atmosphere/dustHaze/package.json 中当前仓库对应版本为4.3.3同时提供 CommonJS、ESM、UMD 与浏览器专用构建npm install tsparticles/engine tsparticles/basic tsparticles/palette-dust-haze然后在代码中引入并注册import { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadDustHazePalette } from tsparticles/palette-dust-haze; await loadBasic(tsParticles); await loadDustHazePalette(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: dustHaze, }, });如果你希望进一步减小首屏加载体积可以利用包的./lazy导出路径参见 package.json 中的exports配置它对应 src/index.lazy.ts 的实现通过动态import(./options.js)将调色板数据延迟加载。在 React / Vue 等框架组件库中使用tsParticles 官方为 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 和 Web Components 提供了组件封装见 wrappers 目录。在这些框架中使用 Dust Haze 的方式与原生一致在组件初始化时调用loadDustHazePalette函数完成注册然后在传给组件的 options 中写入palette: dustHaze。具体组件库的 API 形式以对应封装仓库的文档为准但先注册调色板、再在 options 里引用名称这一核心调用契约是通用的。源码视角调色板是如何被注册与导入的loadDustHazePalette的实现非常简洁见 palettes/atmosphere/dustHaze/src/index.tsconst paletteName dust-haze; export async function loadDustHazePalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }它通过engine.pluginManager.register向引擎注册一个插件插件内部调用addPalette(dust-haze, options)把调色板数据放入管理器的palettesMap 中见 engine/src/Core/Utils/PluginManager.ts。注意这里注册的内部名称是连字符形式的dust-haze而 options 中对外使用的name是 Dust Haze。当你的 options 中出现palette: dustHaze时引擎会在加载阶段通过getPalette(name)从 Map 中取出调色板数据见 engine/src/Core/Utils/PluginManager.ts然后将其导入配置。这一过程分为两层顶层Options会把调色板的background背景色与blendMode混合模式导入全局配置见 engine/src/Options/Classes/Options.ts 附近的#importPalette方法粒子层ParticlesOptions会把调色板的colors.fill集合映射为粒子的填充颜色配置见 engine/src/Options/Classes/Particles/ParticlesOptions.ts 附近的#importPalette方法。正是顶层导入背景/混合模式 粒子层导入颜色集合的协作机制让一份只有颜色定义的IPalette数据就能对整体视觉效果产生决定性影响。也正因如此官方文档特别提醒palette选项必须在使用前完成调色板插件的注册如果你漏掉了await loadDustHazePalette(engine)这一步引擎将无法通过getPalette找到对应的调色板数据palette选项会静默失效。小结与扩展阅读tsparticles/palette-dust-haze用一个不足 20 行的数据对象为 tsParticles 提供了深褐到暖金、黑底尘埃的完整氛围配色。把它与tsparticles/basic这类运行时包组合几十行代码即可得到一个朦胧、悬浮、暖调质感的粒子背景把palette与其他粒子选项叠加你还可以在保持统一色系的前提下自由调整密度、大小、运动与形状。仓库中还提供了大量同系列调色板见 palettes 目录下的 atmosphere 等分类以及完整的调色板与预设目录文档 markdown/Options.md可作为继续探索的起点。【免费下载链接】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），仅供参考
