tsParticles FogMorning 调色板实战指南用晨雾色系打造柔和的粒子背景【免费下载链接】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 的tsparticles/palette-fog-morning是一个专注于清晨薄雾氛围的色彩调色板它为粒子提供了一组低饱和度的浅灰蓝 / 白配色并内置了匹配的背景色与混合模式适合用作网站、登录页或展示页的柔和动效背景。本文将基于该调色板的官方文档与仓库源码介绍其配色构成、加载方式、CDN 与模块化用法、自定义覆盖方法以及它在引擎内部的解析原理帮助你快速把它接入自己的 tsParticles 项目。什么是 FogMorning 调色板调色板palette与预设preset不同调色板只定义颜色不规定粒子数量、运动方式、形状等完整行为。因此在使用fogMorning时你必须同时准备一个运行时包例如tsparticles/basic和一份基础的粒子配置才能让粒子真正动起来。这一点在文档的 Quick checklist 中写得很明确安装tsparticles/engine或直接使用下面的 CDN bundle加载一个基础包如tsparticles/basic并在调用tsParticles.load(...)之前先调用loadFogMorningPalette在配置中把palette设为fogMorning并附上最小化的粒子配置。从源码看该调色板包名为tsparticles/palette-fog-morning见 palettes/atmosphere/fogMorning/package.json它只依赖tsparticles/engine是一个典型的轻量插件式包。调色板配色构成官方 README 中通过色板表格完整列出了这套配色全部为十六进制色值用途色值粒子填充色fill#E8EEF5、#D4DCE8、#C0CCDC、#AABBD0、#FFFFFF、#F0F4FA背景色background#d4dce8混合模式blend modesource-over填充fill开关true这份配色在源码中的真实定义位于 palettes/atmosphere/fogMorning/src/options.ts其中 6 种粒子填充色#E8EEF5、#D4DCE8、#C0CCDC、#AABBD0、#FFFFFF、#F0F4FA均为浅灰蓝到白色的渐变序列配合浅灰蓝背景#d4dce8整体呈现清晨雾气朦胧、宁静柔和的视觉感受。从示例图palettes/atmosphere/fogMorning/images/sample.png可以看到画面中的粒子以白、浅蓝、灰蓝为主大小错落、带有柔化晕染效果契合晨雾主题。调色板的完整数据结构定义在引擎的 engine/src/Core/Interfaces/IPalette.tsbackground背景颜色会通过Options#importPalette写入background.colorblendMode画布混合模式GlobalCompositeOperation写入blend.modecolors颜色集合可以是一个或多个IPaletteColors每个颜色集合可包含fill填充与可选的stroke描边其中fill支持enable、opacity透明度范围和value单个或多个颜色值。FogMorning 的options.ts恰好只使用了fill通道并开启enable: true没有定义描边因此粒子呈现为纯填充的圆形色块。加载与使用方法方式一CDN / Vanilla JS / jQuery官方文档给出的是通过 jsDelivr 加载基础包与调色板包的 HTML 方式script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-fogMorning4/tsparticles.palette-coloredSmokeAmber.min.js/script然后像下面这样初始化引擎(async engine { await loadBasic(engine); await loadFogMorningPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: fogMorning, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);上面的配置可以拆解为三层含义loadBasic(engine)加载基础运行时提供圆形circle形状、匀速运动等最核心的能力loadFogMorningPalette(engine)向引擎注册名为fog-morning的调色板源码见 palettes/atmosphere/fogMorning/src/index.tsoptions.palette: fogMorning触发调色板导入引擎会自动套用背景色、混合模式与粒子颜色。关于fogMorning与fog-morning这两个名字调色板在源码中以fog-morning为键注册const paletteName fog-morning而在用户配置的palette字段中写fogMorning。引擎解析时会先查找调色板再套用背景与混合模式具体实现可查看 engine/src/Options/Classes/Options.ts 中的importPalette方法。方式二模块化引入ESM / 打包器对于 Vite、Webpack、Rollup 等打包器项目可以直接通过 npm 安装并按需引入注册函数同时暴露了普通入口与懒加载入口npm install tsparticles/engine tsparticles/basic tsparticles/palette-fog-morningimport { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadFogMorningPalette } from tsparticles/palette-fog-morning; async function init() { await loadBasic(tsParticles); await loadFogMorningPalette(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: fogMorning, }, }); } init();tsparticles/palette-fog-morning的package.json暴露了./lazy子路径见 palettes/atmosphere/fogMorning/package.json对应的 src/index.lazy.ts 使用动态import()延迟加载颜色数据适合对首屏体积敏感的场景。方式三React / Vue / Angular 等组件库如果使用 tsParticles 的框架组件库如tsparticles/react、tsparticles/vue3等官方文档的指引是查阅对应组件库仓库的文档并在组件初始化时调用loadFogMorningPalette函数。其本质与 Vanilla 用法一致——只需在tsParticles.load之前完成调色板注册即可。自定义与覆盖官方文档特别强调调色板中的所有选项都可以像标准 tsParticles 配置一样被覆盖。调色板只是提供默认颜色你在options中显式声明的任何属性都会优先生效。例如希望把粒子数量提高到 300、并让粒子更大更慢只需要在原有配置上追加即可const options { particles: { number: { value: 300 }, shape: { type: circle }, size: { value: { min: 15, max: 25 } }, move: { enable: true, speed: 1.5 }, color: { value: #FFFFFF }, // 覆盖调色板默认颜色 }, background: { color: #eef2f7 }, // 覆盖调色板默认背景 palette: fogMorning, };从引擎源码 engine/src/Options/Classes/Options.ts 的importPalette实现可以看出调色板导入实际执行的是this.load({ background: { color: paletteData.background }, blend: { enable: true, mode: paletteData.blendMode }, particles: { palette }, });即在解析palette字段时把调色板的背景色、混合模式写入对应选项并继续在粒子选项解析阶段套用调色板颜色见 engine/src/Options/Classes/Particles/ParticlesOptions.ts。由于这本质上是先加载默认值、再由你的显式配置叠加覆盖所以任何标准属性particles.color、background、blend等都能按需定制。引擎层的工作原理为了更清晰地理解调色板如何生效可以梳理引擎侧的关键调用链注册loadFogMorningPalette(engine)调用engine.pluginManager.register(...)在回调中通过pluginManager.addPalette(paletteName, options)把调色板存入Map见 engine/src/Core/Utils/PluginManager.ts查找配置解析时Options#importPalette通过pluginManager.getPalette(palette)按名称取出调色板数据套用importPalette将调色板的background写入background.colorblendMode写入blend.mode并开启 blend同时在粒子选项中标记palette着色粒子颜色解析阶段ParticlesOptions#importPalette读取调色板的colors把填充色值这里是 6 种雾蓝色展开为粒子的可选颜色支持fill.enable、opacity等配置。这里需要注意一个前提调色板本身不注册任何形状、运动或交互能力圆形粒子与匀速运动来自tsparticles/basic。如果你使用更精简的运行时请确保其中包含你所需形状的 drawer如 circle shape否则粒子可能无法按预期渲染。相关资源调色板源码与配置palettes/atmosphere/fogMorning/src/options.ts、palettes/atmosphere/fogMorning/src/index.ts引擎调色板接口定义engine/src/Core/Interfaces/IPalette.ts调色板注册与查询engine/src/Core/Utils/PluginManager.ts选项解析与套用engine/src/Options/Classes/Options.ts、engine/src/Options/Classes/Particles/ParticlesOptions.ts基础运行时 bundlebundles/basic【免费下载链接】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），仅供参考