tsParticles Colored Smoke Rainbow 调色板安装、配置与源码机制解析【免费下载链接】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本指南围绕 tsParticles 官方调色板tsparticles/palette-colored-smoke-rainbowColored Smoke – Rainbow展开介绍如何通过 CDN 或 npm 快速接入这组彩虹色烟雾配色并在粒子配置中通过palette: coloredSmokeRainbow一键应用。文中同时深入解读该调色板在tsparticles/engine中的注册与加载机制IPalette、PluginManager、Options.#importPalette帮助读者理解调色板只定义颜色、不定义行为的设计边界并掌握覆盖默认配色的扩展方法。tsParticles Colored Smoke Rainbow 调色板粒子效果示例一、什么是 Colored Smoke Rainbow 调色板Colored Smoke Rainbow 是 tsParticles 众多官方调色板palette之一位于仓库的 palettes/atmosphere/coloredSmokeRainbow 目录下。它的定位非常明确只提供一组颜色定义不包含任何粒子行为逻辑——即文档中所强调的 A palette defines colors, not complete behavior, so pair it with a runtime package and particle options。调色板本身是一份标准的IPalette结构描述其完整定义记录在 engine/src/Core/Interfaces/IPalette.ts字段类型说明namestring调色板名称用于标识backgroundstring画布背景色blendModeGlobalCompositeOperation画布合成混合模式colorsSingleOrMultipleIPaletteColors颜色集合可含fill填充与stroke描边两组配置其中IPaletteColorsFill支持enable开关、opacity不透明度可为范围值与value单个或多个颜色值IPaletteColorsStroke额外包含width描边宽度。Colored Smoke Rainbow 只使用了fill分支。二、颜色组成七色虹彩 黑色背景在 src/options.ts 中可以看到该调色板的真实定义名称为Colored Smoke - Rainbow背景色为#050505混合模式为source-over填充色开启共 7 种颜色。对应文档中的颜色表如下颜色值说明#CC0000红#CC6600橙#CCCC00黄#00CC00绿#0000CC蓝#6600CC靛紫#CC00CC品红#050505背景色Backgroundsource-over混合模式Blend mode且Fill: true注意这 7 种颜色在源码中以数组形式保存在colors.fill.value中粒子在渲染时会从该颜色池中取值因此画面呈现出红、橙、黄、绿、蓝、紫交错的彩虹效果。三、快速上手三步接入清单官方文档给出的快速检查清单Quick checklist如下三步即可完成接入安装运行时基础包安装tsparticles/engine或直接使用下方 CDN 全量 bundle加载基础功能包并注册调色板例如加载tsparticles/basic并在tsParticles.load(...)之前调用loadColoredSmokeRainbowPalette(engine)在配置中应用调色板在 options 中设置palette: coloredSmokeRainbow并搭配一份最简粒子配置。需要特别强调的是调色板只负责颜色从哪里来粒子的数量、形状、大小、运动等行为仍由你自行配置这也是palette defines colors, not complete behavior的含义。四、CDN / Vanilla JS / jQuery 使用方式如果项目通过script标签直接引入纯 HTML、Vanilla JS 或 jQuery按文档指引引入两个脚本即可script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-coloredSmokeRainbow4/tsparticles.palette-coloredSmokeAmber.min.js/script脚本加载完成后即可用如下方式初始化tsParticles(async engine { await loadBasic(engine); await loadColoredSmokeRainbowPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: coloredSmokeRainbow, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这份最小配置中number.value: 200控制粒子总数shape.type: circle指定圆形粒子size.value: { min: 10, max: 15 }让粒子尺寸在 1015 之间随机move.speed: 2设定匀速漂移速度palette: coloredSmokeRainbow是应用调色板的关键键引擎会根据该名称查找已注册的调色板并自动套用背景色、混合模式与颜色池。五、npm 模块化安装与 Lazy 加载在模块化工程中推荐直接安装 npm 包。从 package.json 可以看到该包的正式名称为tsparticles/palette-colored-smoke-rainbow当前仓库内版本为 4.3.3其exports同时暴露了标准入口与./lazy入口npm install tsparticles/engine tsparticles/basic tsparticles/palette-colored-smoke-rainbowESM 使用方式import { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadColoredSmokeRainbowPalette } from tsparticles/palette-colored-smoke-rainbow; await loadBasic(tsParticles); await loadColoredSmokeRainbowPalette(tsParticles);如果希望把调色板定义延迟到运行时按需加载可以改用tsparticles/palette-colored-smoke-rainbow/lazy入口。从 src/index.lazy.ts 的实现可以看出lazy 版本会在注册回调内通过await import(./options.js)动态加载颜色定义从而减小首屏包体。六、源码解析调色板是如何注册与生效的6.1 注册入口loadColoredSmokeRainbowPalette标准入口 src/index.ts 的实现非常简洁const paletteName colored-smoke-rainbow; export async function loadColoredSmokeRainbowPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }它通过engine.pluginManager.register(...)将调色板以colored-smoke-rainbow为键注册进插件管理器。而浏览器环境下src/browser.ts 会把该函数挂到globalThis.loadColoredSmokeRainbowPalette上这就是 CDN 场景下可以直接调用它的原因。6.2 存储与查询PluginManager在引擎的 PluginManager 中调色板被存储在一个Mapstring, IPalette中第 58 行readonly palettes。两个核心方法addPalette(name, palette)第 163 行将调色板写入 MapgetPalette(name)第 247 行按名称取出调色板。6.3 配置解析Options.#importPalette当你在 options 中写下palette: coloredSmokeRainbow时引擎的 Options 类 会调用#importPalette(palette)其内部逻辑为通过pluginManager.getPalette(palette)查找调色板找不到则直接返回找到后把paletteData.background应用到background.color把paletteData.blendMode应用到blend.mode并开启blend.enable将particles.palette指向该调色板名称供粒子取色使用。可以看到调色板机制本质上是配置注入背景色、混合模式、颜色池三项被自动合并进你的粒子选项无需手工逐一填写。七、自定义与扩展调色板只是起点。官方文档明确指出所有 options 都可以像标准 tsParticles 安装那样通过定义对应属性来覆盖override。例如你可以在使用调色板的同时自行覆盖粒子数量、形状、运动轨迹甚至手动指定particles.color来局部替换取色逻辑const options { particles: { number: { value: 300 }, shape: { type: star }, // 覆盖形状 size: { value: { min: 5, max: 20 } }, move: { enable: true, speed: 3, direction: top, // 改为向上飘动模拟烟雾升腾 }, }, palette: coloredSmokeRainbow, // 颜色仍来自调色板 };如果需要全新的配色也可以仿照 src/options.ts 的结构自行构造IPalette对象并通过engine.pluginManager.addPalette(自定义名称, 自定义调色板)注册从而完全掌控背景色、混合模式与颜色池。八、框架组件集成在 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 与 Web Components 等框架中tsParticles 均有对应的组件库。集成方式与原生场景一致在对应组件库的文档指引下调用loadColoredSmokeRainbowPalette函数完成注册然后在组件的 options 中设置palette: coloredSmokeRainbow即可。仓库中 wrappers 目录下保存了各框架组件的实现源码可作为集成时的参考。九、相关资源与进一步探索调色板包源码palettes/atmosphere/coloredSmokeRainbow含src/options.ts、src/index.ts、src/index.lazy.ts、src/browser.ts调色板类型定义engine/src/Core/Interfaces/IPalette.ts调色板注册与查询engine/src/Core/Utils/PluginManager.ts调色板配置注入逻辑engine/src/Options/Classes/Options.ts#L142-L161更多预设与调色板仓库根目录下的 presets 与 palettes 目录收录了全部官方配色与预设例如palettes/atmosphere下还有fire、water、space等不同主题的同系列调色板可对照阅读。【免费下载链接】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 Colored Smoke Rainbow 调色板安装、配置与源码机制解析【免费下载链接】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本指南围绕 tsParticles 官方调色板tsparticles/palette-colored-smoke-rainbowColored Smoke – Rainbow展开介绍如何通过 CDN 或 npm 快速接入这组彩虹色烟雾配色并在粒子配置中通过palette: coloredSmokeRainbow一键应用。文中同时深入解读该调色板在tsparticles/engine中的注册与加载机制IPalette、PluginManager、Options.#importPalette帮助读者理解调色板只定义颜色、不定义行为的设计边界并掌握覆盖默认配色的扩展方法。tsParticles Colored Smoke Rainbow 调色板粒子效果示例一、什么是 Colored Smoke Rainbow 调色板Colored Smoke Rainbow 是 tsParticles 众多官方调色板palette之一位于仓库的 palettes/atmosphere/coloredSmokeRainbow 目录下。它的定位非常明确只提供一组颜色定义不包含任何粒子行为逻辑——即文档中所强调的 A palette defines colors, not complete behavior, so pair it with a runtime package and particle options。调色板本身是一份标准的IPalette结构描述其完整定义记录在 engine/src/Core/Interfaces/IPalette.ts字段类型说明namestring调色板名称用于标识backgroundstring画布背景色blendModeGlobalCompositeOperation画布合成混合模式colorsSingleOrMultipleIPaletteColors颜色集合可含fill填充与stroke描边两组配置其中IPaletteColorsFill支持enable开关、opacity不透明度可为范围值与value单个或多个颜色值IPaletteColorsStroke额外包含width描边宽度。Colored Smoke Rainbow 只使用了fill分支。二、颜色组成七色虹彩 黑色背景在 src/options.ts 中可以看到该调色板的真实定义名称为Colored Smoke - Rainbow背景色为#050505混合模式为source-over填充色开启共 7 种颜色。对应文档中的颜色表如下颜色值说明#CC0000红#CC6600橙#CCCC00黄#00CC00绿#0000CC蓝#6600CC靛紫#CC00CC品红#050505背景色Backgroundsource-over混合模式Blend mode且Fill: true注意这 7 种颜色在源码中以数组形式保存在colors.fill.value中粒子在渲染时会从该颜色池中取值因此画面呈现出红、橙、黄、绿、蓝、紫交错的彩虹效果。三、快速上手三步接入清单官方文档给出的快速检查清单Quick checklist如下三步即可完成接入安装运行时基础包安装tsparticles/engine或直接使用下方 CDN 全量 bundle加载基础功能包并注册调色板例如加载tsparticles/basic并在tsParticles.load(...)之前调用loadColoredSmokeRainbowPalette(engine)在配置中应用调色板在 options 中设置palette: coloredSmokeRainbow并搭配一份最简粒子配置。需要特别强调的是调色板只负责颜色从哪里来粒子的数量、形状、大小、运动等行为仍由你自行配置这也是palette defines colors, not complete behavior的含义。四、CDN / Vanilla JS / jQuery 使用方式如果项目通过script标签直接引入纯 HTML、Vanilla JS 或 jQuery按文档指引引入两个脚本即可script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-coloredSmokeRainbow4/tsparticles.palette-coloredSmokeAmber.min.js/script脚本加载完成后即可用如下方式初始化tsParticles(async engine { await loadBasic(engine); await loadColoredSmokeRainbowPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: coloredSmokeRainbow, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这份最小配置中number.value: 200控制粒子总数shape.type: circle指定圆形粒子size.value: { min: 10, max: 15 }让粒子尺寸在 1015 之间随机move.speed: 2设定匀速漂移速度palette: coloredSmokeRainbow是应用调色板的关键键引擎会根据该名称查找已注册的调色板并自动套用背景色、混合模式与颜色池。五、npm 模块化安装与 Lazy 加载在模块化工程中推荐直接安装 npm 包。从 package.json 可以看到该包的正式名称为tsparticles/palette-colored-smoke-rainbow当前仓库内版本为 4.3.3其exports同时暴露了标准入口与./lazy入口npm install tsparticles/engine tsparticles/basic tsparticles/palette-colored-smoke-rainbowESM 使用方式import { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadColoredSmokeRainbowPalette } from tsparticles/palette-colored-smoke-rainbow; await loadBasic(tsParticles); await loadColoredSmokeRainbowPalette(tsParticles);如果希望把调色板定义延迟到运行时按需加载可以改用tsparticles/palette-colored-smoke-rainbow/lazy入口。从 src/index.lazy.ts 的实现可以看出lazy 版本会在注册回调内通过await import(./options.js)动态加载颜色定义从而减小首屏包体。六、源码解析调色板是如何注册与生效的6.1 注册入口loadColoredSmokeRainbowPalette标准入口 src/index.ts 的实现非常简洁const paletteName colored-smoke-rainbow; export async function loadColoredSmokeRainbowPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }它通过engine.pluginManager.register(...)将调色板以colored-smoke-rainbow为键注册进插件管理器。而浏览器环境下src/browser.ts 会把该函数挂到globalThis.loadColoredSmokeRainbowPalette上这就是 CDN 场景下可以直接调用它的原因。6.2 存储与查询PluginManager在引擎的 PluginManager 中调色板被存储在一个Mapstring, IPalette中第 58 行readonly palettes。两个核心方法addPalette(name, palette)第 163 行将调色板写入 MapgetPalette(name)第 247 行按名称取出调色板。6.3 配置解析Options.#importPalette当你在 options 中写下palette: coloredSmokeRainbow时引擎的 Options 类 会调用#importPalette(palette)其内部逻辑为通过pluginManager.getPalette(palette)查找调色板找不到则直接返回找到后把paletteData.background应用到background.color把paletteData.blendMode应用到blend.mode并开启blend.enable将particles.palette指向该调色板名称供粒子取色使用。可以看到调色板机制本质上是配置注入背景色、混合模式、颜色池三项被自动合并进你的粒子选项无需手工逐一填写。七、自定义与扩展调色板只是起点。官方文档明确指出所有 options 都可以像标准 tsParticles 安装那样通过定义对应属性来覆盖override。例如你可以在使用调色板的同时自行覆盖粒子数量、形状、运动轨迹甚至手动指定particles.color来局部替换取色逻辑const options { particles: { number: { value: 300 }, shape: { type: star }, // 覆盖形状 size: { value: { min: 5, max: 20 } }, move: { enable: true, speed: 3, direction: top, // 改为向上飘动模拟烟雾升腾 }, }, palette: coloredSmokeRainbow, // 颜色仍来自调色板 };如果需要全新的配色也可以仿照 src/options.ts 的结构自行构造IPalette对象并通过engine.pluginManager.addPalette(自定义名称, 自定义调色板)注册从而完全掌控背景色、混合模式与颜色池。八、框架组件集成在 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 与 Web Components 等框架中tsParticles 均有对应的组件库。集成方式与原生场景一致在对应组件库的文档指引下调用loadColoredSmokeRainbowPalette函数完成注册然后在组件的 options 中设置palette: coloredSmokeRainbow即可。仓库中 wrappers 目录下保存了各框架组件的实现源码可作为集成时的参考。九、相关资源与进一步探索调色板包源码palettes/atmosphere/coloredSmokeRainbow含src/options.ts、src/index.ts、src/index.lazy.ts、src/browser.ts调色板类型定义engine/src/Core/Interfaces/IPalette.ts调色板注册与查询engine/src/Core/Utils/PluginManager.ts调色板配置注入逻辑engine/src/Options/Classes/Options.ts#L142-L161更多预设与调色板仓库根目录下的 presets 与 palettes 目录收录了全部官方配色与预设例如palettes/atmosphere下还有fire、water、space等不同主题的同系列调色板可对照阅读。【免费下载链接】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），仅供参考
