tsParticles SmokeWarm 调色板使用指南暖色烟雾粒子效果实战【免费下载链接】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 的SmokeWarm暖色烟雾调色板是一组预定义的暖棕色系色彩方案用于快速为粒子效果营造暖色烟雾般的朦胧氛围。本文将围绕该调色板讲解它的完整色板构成、CDN 与模块化两种接入方式、以及它在引擎内部从loadSmokeWarmPalette到paint/blend的完整落地链路帮助你掌握在任意 tsParticles 项目中一行配置换一套配色的正确姿势。SmokeWarm 调色板示例深色背景上分布着由浅米白到深棕过渡的圆形粒子呈现暖色烟雾/尘埃的朦胧质感示例图位于 palettes/atmospheric/smokeWarm/images/sample.png。SmokeWarm 调色板是什么SmokeWarm 是 tsParticles 的 atmospheric大气系调色板之一位于 palettes/atmospheric/smokeWarm同目录下还包含 smokeCold冷色烟雾、heatHaze、sunriseGold、thunderstorm 等主题。它的定位是colored smoke amber——用一组从深棕到浅米白的暖色渐变来模拟烟雾、尘埃或温暖光效。理解调色板需要先明确一个核心概念调色板只定义颜色不定义完整行为。README 的 Quick checklist 明确写道A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.也就是说调色板解决的是粒子用什么颜色、背景是什么色、如何混合这一层问题而粒子的数量、形状、大小、运动方式等行为仍然需要配合运行时包如tsparticles/basic和粒子配置项来共同决定。色板构成五色暖棕渐变 深色背景SmokeWarm 调色板的完整定义位于 palettes/atmospheric/smokeWarm/src/options.ts其数据结构遵循引擎定义的IPalette接口import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Smoke - Warm, background: #1a1208, blendMode: source-over, colors: { fill: { enable: true, value: [ #443322, #665544, #887766, #BBAA99, #DDCCBB, ], }, }, };对照 engine/src/Core/Interfaces/IPalette.ts 中IPalette接口的定义可以逐字段理解字段值含义nameSmoke - Warm调色板的人类可读名称background#1a1208画布背景色接近深棕黑blendModesource-overCanvas 合成模式GlobalCompositeOperation默认普通覆盖混合colors.fill.enabletrue启用填充色colors.fill.value5 个十六进制色值填充色取值粒子绘制时按SingleOrMultiplestring机制从中取色具体色值整理如下其中fill可填的opacity字段在 SmokeWarm 中未使用属于可选参数色值色相倾向在渐变中的位置#443322深咖啡棕渐变最深端#665544中暖棕中间偏深#887766灰调暖棕中间#BBAA99浅暖米色中间偏浅#DDCCBB浅米白渐变最浅端背景#1a1208深棕黑画布底色从源码结构看5 个色值同属一个fill组引擎在绘制粒子时会以SingleOrMultiple的方式从这一组颜色中取色因此画面会呈现从浅到深的自然过渡而不是单一纯色这正是烟雾层次感的主要来源。快速上手三步接入README 给出的 Quick checklist 是标准的三步流程安装tsparticles/engine或直接使用下面的 CDN 完整包加载一个基础运行时包例如tsparticles/basic并在tsParticles.load(...)之前调用loadSmokeWarmPalette在配置项中应用调色板palette: smokeWarm并配合一份最小的粒子配置。方式一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-smokeWarm4/tsparticles.palette-coloredSmokeAmber.min.js/script脚本加载完成后即可初始化引擎(async engine { await loadBasic(engine); await loadSmokeWarmPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: smokeWarm, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段代码的关键点在于palette: smokeWarm是顶层配置引擎在加载配置时会自动把调色板定义的背景色、混合模式与粒子颜色合并进最终选项详见下文原理分析。注意README 中给出的 CDN 文件名tsparticles.palette-coloredSmokeAmber.min.js与发布配置 palettes/atmospheric/smokeWarm/package.dist.json 中jsdelivr/unpkg字段声明的实际文件名tsparticles.palette-colored-smoke-amber.min.js存在差异。实际部署到 CDN 的文件名应以package.dist.json的jsdelivr字段为准若直接照抄 README 中的链接导致 404请改用下划线连字符版本的文件名或直接采用下面的 npm 模块化方式。方式二npm 模块化安装ESM / CommonJS调色板作为独立 npm 包发布包名为tsparticles/palette-smoke-warm对应版本 4.3.3见 palettes/atmospheric/smokeWarm/package.json。它唯一的运行时依赖是tsparticles/engine。npm install tsparticles/engine tsparticles/basic tsparticles/palette-smoke-warm在代码中按需导入并注册import { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadSmokeWarmPalette } from tsparticles/palette-smoke-warm; await loadBasic(tsParticles); await loadSmokeWarmPalette(tsParticles); await tsParticles.load({ id: tsparticles, options: { palette: smokeWarm, particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2 }, }, }, });如果希望进一步优化首屏体积可以改用懒加载入口tsparticles/palette-smoke-warm/lazy对应 palettes/atmospheric/smokeWarm/src/index.lazy.ts。该入口只在注册回调内部通过动态import(./options.js)按需拉取调色板定义适合配合引擎的lazy入口tsparticles/engine/lazy使用。为什么必须先调用 loadSmokeWarmPalette引擎注册链路loadSmokeWarmPalette的实现位于 palettes/atmospheric/smokeWarm/src/index.ts它做的唯一一件事就是把调色板注册进引擎的插件管理器import { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName smoke-warm; export async function loadSmokeWarmPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }注意这里注册的键名是smoke-warm连字符而 README 配置示例里写的是palette: smokeWarm驼峰。两者之所以能对应是因为引擎在 engine/src/Options/Classes/Options.ts 的#importPalette中通过getPalette查询并在 engine/src/Core/Utils/PluginManager.ts 与 engine/src/Core/Utils/PluginManager.ts 维护了一张Mapstring, IPalette命名查找时会做规范化处理。也就是说addPalette与getPalette构成了注册表机制先注册、后引用所以必须在tsParticles.load(...)之前完成加载。在 CDN 场景下src/browser.ts见 palettes/atmospheric/smokeWarm/src/browser.ts还会把loadSmokeWarmPalette挂载到globalThis上这也是为何浏览器脚本里可以直接调用该函数。调色板是如何变成粒子样式的paint 与 blend 机制这是调色板最核心的落地逻辑值得深入展开。当配置里出现palette字段时引擎会在两个层面处理第一层顶层 Options背景与混合模式在 engine/src/Options/Classes/Options.ts 的#importPalette中引擎把调色板的background和blendMode映射为配置this.load({ background: { color: paletteData.background, }, blend: { enable: true, mode: paletteData.blendMode, }, particles: { palette, }, });即背景色写入background.colorblendMode写入blend.mode并开启混合。第二层ParticlesOptions粒子颜色 → paint 配置在 engine/src/Options/Classes/Particles/ParticlesOptions.ts 的#importPalette中colors会被转换成paint绘制配置fill组被转换为paint.fillenable原样保留value转为fill.color.value可选opacity转为fill.opacity如果存在stroke组SmokeWarm 未定义则转换为paint.stroke含颜色、透明度与线宽同时写入blend: { enable: true, mode: paletteData.blendMode }。正是这一步让粒子的填充色真正取到#443322到#DDCCBB这一组暖色值。而paint与blend的运行能力来自基础包查看 bundles/basic/src/index.ts 可以看到loadBasic会注册loadBlendPlugin、loadPaintUpdater、loadCircleShape、loadMovePlugin、loadOpacityUpdater、loadSizeUpdater、loadOutModesUpdater以及 HEX/HSL/RGB 三个颜色插件——这些正是让调色板颜色 混合模式得以在画布上生效的运行时依赖也解释了为什么 README 要求先加载tsparticles/basic。自定义调色板之上仍可覆盖任意选项README 特别强调了一个重要特性You can override all the options defining the properties like in any standard tsParticles installation.调色板本质上只是预填充了部分配置的快捷方式它不会锁定你的配置。你依然可以在 options 里覆盖任意字段例如const options { particles: { number: { value: 400 }, shape: { type: circle }, size: { value: { min: 5, max: 20 } }, move: { enable: true, speed: 3, direction: top, }, opacity: { value: 0.8 }, }, palette: smokeWarm, background: { color: #000000 }, // 覆盖调色板默认的 #1a1208 };结合上文的分析可以这样理解palette只是把颜色相关的配置灌进最终 options随后标准加载流程Options.doLoad见 engine/src/Options/Classes/Options.ts会继续加载background、particles等显式配置后者对同名属性形成覆盖。因此你可以保留 SmokeWarm 的配色同时自由调整数量、大小、速度、方向、透明度乃至替换背景色实现用它的颜色、配自己的行为。在框架组件库中使用tsParticles 为 React、Vue 2/3、Angular、Svelte、Preact、Inferno、Solid、Riot、Web Components 等提供了官方组件库见 wrappers 目录。使用方式与原生一致在组件初始化回调中调用loadSmokeWarmPalette(engine)然后在配置里设置palette: smokeWarm即可。具体初始化写法以各组件库的文档为准核心只有一点——先注册调色板再加载配置。常见问题与注意事项必须先注册再加载忘记调用loadSmokeWarmPalette时getPalette会返回undefinedpalette配置将被静默忽略#importPalette中有if (!paletteData) return;的保护效果就退化为普通粒子不会报错容易排查不到原因。调色板 ≠ 预设Preset预设preset会携带完整的粒子行为配置而调色板只负责颜色与混合。若想一键获得完整效果可进一步参考 presets 目录中的现成预设若只想换配色用调色板即可。版本一致性调色板包依赖的tsparticles/engine版本为 4.3.3见 package.dist.json建议保持引擎、基础包与调色板包同属一个大版本v4避免接口不兼容。CDN 文件名差异README 中的 CDN 链接文件名与实际发布配置package.dist.json的jsdelivr/unpkg字段不一致时以发布配置为准或改用 npm 方式引入。小结SmokeWarm 调色板为 tsParticles 提供了一套即插即用的暖色烟雾配色5 个暖棕色填充色 深棕黑背景 source-over混合模式。通过loadSmokeWarmPalette注册、palette: smokeWarm引用引擎会自动完成背景、混合模式与粒子paint颜色的装配且所有字段仍可自由覆盖。把这一机制与 bundles/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），仅供参考 tsParticles SmokeWarm 调色板使用指南：暖色烟雾粒子效果实战
tsParticles SmokeWarm 调色板使用指南暖色烟雾粒子效果实战【免费下载链接】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 的SmokeWarm暖色烟雾调色板是一组预定义的暖棕色系色彩方案用于快速为粒子效果营造暖色烟雾般的朦胧氛围。本文将围绕该调色板讲解它的完整色板构成、CDN 与模块化两种接入方式、以及它在引擎内部从loadSmokeWarmPalette到paint/blend的完整落地链路帮助你掌握在任意 tsParticles 项目中一行配置换一套配色的正确姿势。SmokeWarm 调色板示例深色背景上分布着由浅米白到深棕过渡的圆形粒子呈现暖色烟雾/尘埃的朦胧质感示例图位于 palettes/atmospheric/smokeWarm/images/sample.png。SmokeWarm 调色板是什么SmokeWarm 是 tsParticles 的 atmospheric大气系调色板之一位于 palettes/atmospheric/smokeWarm同目录下还包含 smokeCold冷色烟雾、heatHaze、sunriseGold、thunderstorm 等主题。它的定位是colored smoke amber——用一组从深棕到浅米白的暖色渐变来模拟烟雾、尘埃或温暖光效。理解调色板需要先明确一个核心概念调色板只定义颜色不定义完整行为。README 的 Quick checklist 明确写道A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.也就是说调色板解决的是粒子用什么颜色、背景是什么色、如何混合这一层问题而粒子的数量、形状、大小、运动方式等行为仍然需要配合运行时包如tsparticles/basic和粒子配置项来共同决定。色板构成五色暖棕渐变 深色背景SmokeWarm 调色板的完整定义位于 palettes/atmospheric/smokeWarm/src/options.ts其数据结构遵循引擎定义的IPalette接口import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Smoke - Warm, background: #1a1208, blendMode: source-over, colors: { fill: { enable: true, value: [ #443322, #665544, #887766, #BBAA99, #DDCCBB, ], }, }, };对照 engine/src/Core/Interfaces/IPalette.ts 中IPalette接口的定义可以逐字段理解字段值含义nameSmoke - Warm调色板的人类可读名称background#1a1208画布背景色接近深棕黑blendModesource-overCanvas 合成模式GlobalCompositeOperation默认普通覆盖混合colors.fill.enabletrue启用填充色colors.fill.value5 个十六进制色值填充色取值粒子绘制时按SingleOrMultiplestring机制从中取色具体色值整理如下其中fill可填的opacity字段在 SmokeWarm 中未使用属于可选参数色值色相倾向在渐变中的位置#443322深咖啡棕渐变最深端#665544中暖棕中间偏深#887766灰调暖棕中间#BBAA99浅暖米色中间偏浅#DDCCBB浅米白渐变最浅端背景#1a1208深棕黑画布底色从源码结构看5 个色值同属一个fill组引擎在绘制粒子时会以SingleOrMultiple的方式从这一组颜色中取色因此画面会呈现从浅到深的自然过渡而不是单一纯色这正是烟雾层次感的主要来源。快速上手三步接入README 给出的 Quick checklist 是标准的三步流程安装tsparticles/engine或直接使用下面的 CDN 完整包加载一个基础运行时包例如tsparticles/basic并在tsParticles.load(...)之前调用loadSmokeWarmPalette在配置项中应用调色板palette: smokeWarm并配合一份最小的粒子配置。方式一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-smokeWarm4/tsparticles.palette-coloredSmokeAmber.min.js/script脚本加载完成后即可初始化引擎(async engine { await loadBasic(engine); await loadSmokeWarmPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: smokeWarm, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段代码的关键点在于palette: smokeWarm是顶层配置引擎在加载配置时会自动把调色板定义的背景色、混合模式与粒子颜色合并进最终选项详见下文原理分析。注意README 中给出的 CDN 文件名tsparticles.palette-coloredSmokeAmber.min.js与发布配置 palettes/atmospheric/smokeWarm/package.dist.json 中jsdelivr/unpkg字段声明的实际文件名tsparticles.palette-colored-smoke-amber.min.js存在差异。实际部署到 CDN 的文件名应以package.dist.json的jsdelivr字段为准若直接照抄 README 中的链接导致 404请改用下划线连字符版本的文件名或直接采用下面的 npm 模块化方式。方式二npm 模块化安装ESM / CommonJS调色板作为独立 npm 包发布包名为tsparticles/palette-smoke-warm对应版本 4.3.3见 palettes/atmospheric/smokeWarm/package.json。它唯一的运行时依赖是tsparticles/engine。npm install tsparticles/engine tsparticles/basic tsparticles/palette-smoke-warm在代码中按需导入并注册import { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadSmokeWarmPalette } from tsparticles/palette-smoke-warm; await loadBasic(tsParticles); await loadSmokeWarmPalette(tsParticles); await tsParticles.load({ id: tsparticles, options: { palette: smokeWarm, particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2 }, }, }, });如果希望进一步优化首屏体积可以改用懒加载入口tsparticles/palette-smoke-warm/lazy对应 palettes/atmospheric/smokeWarm/src/index.lazy.ts。该入口只在注册回调内部通过动态import(./options.js)按需拉取调色板定义适合配合引擎的lazy入口tsparticles/engine/lazy使用。为什么必须先调用 loadSmokeWarmPalette引擎注册链路loadSmokeWarmPalette的实现位于 palettes/atmospheric/smokeWarm/src/index.ts它做的唯一一件事就是把调色板注册进引擎的插件管理器import { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName smoke-warm; export async function loadSmokeWarmPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }注意这里注册的键名是smoke-warm连字符而 README 配置示例里写的是palette: smokeWarm驼峰。两者之所以能对应是因为引擎在 engine/src/Options/Classes/Options.ts 的#importPalette中通过getPalette查询并在 engine/src/Core/Utils/PluginManager.ts 与 engine/src/Core/Utils/PluginManager.ts 维护了一张Mapstring, IPalette命名查找时会做规范化处理。也就是说addPalette与getPalette构成了注册表机制先注册、后引用所以必须在tsParticles.load(...)之前完成加载。在 CDN 场景下src/browser.ts见 palettes/atmospheric/smokeWarm/src/browser.ts还会把loadSmokeWarmPalette挂载到globalThis上这也是为何浏览器脚本里可以直接调用该函数。调色板是如何变成粒子样式的paint 与 blend 机制这是调色板最核心的落地逻辑值得深入展开。当配置里出现palette字段时引擎会在两个层面处理第一层顶层 Options背景与混合模式在 engine/src/Options/Classes/Options.ts 的#importPalette中引擎把调色板的background和blendMode映射为配置this.load({ background: { color: paletteData.background, }, blend: { enable: true, mode: paletteData.blendMode, }, particles: { palette, }, });即背景色写入background.colorblendMode写入blend.mode并开启混合。第二层ParticlesOptions粒子颜色 → paint 配置在 engine/src/Options/Classes/Particles/ParticlesOptions.ts 的#importPalette中colors会被转换成paint绘制配置fill组被转换为paint.fillenable原样保留value转为fill.color.value可选opacity转为fill.opacity如果存在stroke组SmokeWarm 未定义则转换为paint.stroke含颜色、透明度与线宽同时写入blend: { enable: true, mode: paletteData.blendMode }。正是这一步让粒子的填充色真正取到#443322到#DDCCBB这一组暖色值。而paint与blend的运行能力来自基础包查看 bundles/basic/src/index.ts 可以看到loadBasic会注册loadBlendPlugin、loadPaintUpdater、loadCircleShape、loadMovePlugin、loadOpacityUpdater、loadSizeUpdater、loadOutModesUpdater以及 HEX/HSL/RGB 三个颜色插件——这些正是让调色板颜色 混合模式得以在画布上生效的运行时依赖也解释了为什么 README 要求先加载tsparticles/basic。自定义调色板之上仍可覆盖任意选项README 特别强调了一个重要特性You can override all the options defining the properties like in any standard tsParticles installation.调色板本质上只是预填充了部分配置的快捷方式它不会锁定你的配置。你依然可以在 options 里覆盖任意字段例如const options { particles: { number: { value: 400 }, shape: { type: circle }, size: { value: { min: 5, max: 20 } }, move: { enable: true, speed: 3, direction: top, }, opacity: { value: 0.8 }, }, palette: smokeWarm, background: { color: #000000 }, // 覆盖调色板默认的 #1a1208 };结合上文的分析可以这样理解palette只是把颜色相关的配置灌进最终 options随后标准加载流程Options.doLoad见 engine/src/Options/Classes/Options.ts会继续加载background、particles等显式配置后者对同名属性形成覆盖。因此你可以保留 SmokeWarm 的配色同时自由调整数量、大小、速度、方向、透明度乃至替换背景色实现用它的颜色、配自己的行为。在框架组件库中使用tsParticles 为 React、Vue 2/3、Angular、Svelte、Preact、Inferno、Solid、Riot、Web Components 等提供了官方组件库见 wrappers 目录。使用方式与原生一致在组件初始化回调中调用loadSmokeWarmPalette(engine)然后在配置里设置palette: smokeWarm即可。具体初始化写法以各组件库的文档为准核心只有一点——先注册调色板再加载配置。常见问题与注意事项必须先注册再加载忘记调用loadSmokeWarmPalette时getPalette会返回undefinedpalette配置将被静默忽略#importPalette中有if (!paletteData) return;的保护效果就退化为普通粒子不会报错容易排查不到原因。调色板 ≠ 预设Preset预设preset会携带完整的粒子行为配置而调色板只负责颜色与混合。若想一键获得完整效果可进一步参考 presets 目录中的现成预设若只想换配色用调色板即可。版本一致性调色板包依赖的tsparticles/engine版本为 4.3.3见 package.dist.json建议保持引擎、基础包与调色板包同属一个大版本v4避免接口不兼容。CDN 文件名差异README 中的 CDN 链接文件名与实际发布配置package.dist.json的jsdelivr/unpkg字段不一致时以发布配置为准或改用 npm 方式引入。小结SmokeWarm 调色板为 tsParticles 提供了一套即插即用的暖色烟雾配色5 个暖棕色填充色 深棕黑背景 source-over混合模式。通过loadSmokeWarmPalette注册、palette: smokeWarm引用引擎会自动完成背景、混合模式与粒子paint颜色的装配且所有字段仍可自由覆盖。把这一机制与 bundles/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），仅供参考