tsParticles Ice Palette 冰蓝烟火配色方案安装、加载与自定义实战指南【免费下载链接】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 的 Ice Palette冰蓝配色方案是tsparticles/palette-fireworks-ice包提供的预置调色板专为冰蓝色系烟花与粒子效果设计。本文将以palettes/fireworks/ice/README.md为骨架结合仓库源码讲解该配色方案的色彩构成、引擎内部的加载机制、三种接入方式CDN / npm / 懒加载以及自定义方法帮助你快速在网页中落地一套冷冽剔透的冰蓝粒子背景。配色方案是什么定义颜色而非行为使用 Ice Palette 前需要明确一个核心概念palette调色板只定义颜色不定义粒子行为。README 明确说明 A palette defines colors, not complete behavior, so pair it with a runtime package and particle options. 也就是说你需要安装tsparticles/engine或用下方 CDN bundle加载一个基础包例如tsparticles/basic并在tsParticles.load(...)之前调用loadIcePalette在 options 中应用该 palette 并配合一份最小的粒子配置。从源码角度可以更清楚地看到这一点。调色板的本体只是一份纯数据对象options.tsimport { type IPalette } from tsparticles/engine; export const options: IPalette { name: Fireworks - Ice, background: #010a14, blendMode: screen, colors: { fill: { enable: true, value: [ #FFFFFF, #E8F8FF, #AADDFF, #66BBFF, #2299FF, #0055CC, #001144, ], }, }, };IPalette接口定义在 engine/src/Core/Interfaces/IPalette.ts包含background背景色、blendModeCanvas 全局混合模式和colors可同时含 fill 填充色与 stroke 描边色。其中blendMode的类型是GlobalCompositeOperation说明该字段直接对应 Canvas 2D 的globalCompositeOperation。Ice 配色方案的色彩构成README 的 Colors 表格给出了该方案的全部颜色可归纳如下颜色色值用途纯白#FFFFFF粒子填充色最亮模拟冰晶高光淡冰蓝#E8F8FF粒子填充色浅蓝#AADDFF粒子填充色天蓝#66BBFF粒子填充色亮蓝#2299FF粒子填充色深蓝#0055CC粒子填充色墨蓝#001144粒子填充色最深模拟夜空暗部深蓝黑#010a14背景色方案的属性为Blend mode:screen屏幕混合、Fill:true启用填充。screen混合模式在 Canvas 中会让重叠区域变亮非常适合烟花、光效类效果——粒子交叠处会产生自然的发光叠加这正是冰蓝烟花剔透感的来源。从源码结构看colors.fill.value是一个字符串数组引擎会按比例从 7 个色值中为粒子取色从而形成从纯白到墨蓝的连续冰蓝渐变层次enable: true表示启用填充色当与描边搭配的 stroke 系 palette 相比ice 属于纯填充风格。三种接入方式方式一CDN / Vanilla JS / jQueryREADME 提供了最直接的 CDN 接入方式需要依次引入两个脚本基础运行时包和 palette 包script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-ice4/tsparticles.palette-coloredSmokeAmber.min.js/script注意第二个 script 的文件名是构建产物名tsparticles.palette-coloredSmokeAmber.min.js它导出的是loadIcePalette全局函数。当前仓库中该 palette 包的名字为tsparticles/palette-fireworks-ice见 package.jsonREADME 中tsparticles/palette-ice为发布别名引入时请以实际发布版本为准。加载脚本后即可初始化(async engine { await loadBasic(engine); await loadIcePalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: ice, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段代码的关键点await loadBasic(engine)必须先加载运行时基础功能形状、移动等await loadIcePalette(engine)将调色板注册进引擎options 顶层通过palette: ice声明使用该调色板engine.load({ id, options })在指定 DOM 容器id 为tsparticles中启动效果。方式二npm / 打包器ESM / CJS在使用 webpack、Vite、Rollup 等打包器的项目中直接安装并导入即可npm install tsparticles/engine tsparticles/basic tsparticles/palette-fireworks-iceimport { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadIcePalette } from tsparticles/palette-fireworks-ice; await loadBasic(tsParticles); await loadIcePalette(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: ice, }, });方式三懒加载lazy import如果你希望把调色板代码拆分为单独 chunk仅在需要时加载可以引入懒加载入口。仓库中 src/index.lazy.ts 会在回调中动态import(./options.js)从而按需拉取配色数据import { tsParticles } from tsparticles/engine/lazy; import { loadBasic } from tsparticles/basic; import { loadFireworksIcePalette } from tsparticles/palette-fireworks-ice/lazy; await loadBasic(tsParticles); await loadFireworksIcePalette(tsParticles);此外package.json 的exports字段palettes/fireworks/ice/package.json同时暴露了.同步入口与./lazy懒加载入口并分别提供 ESM、CJS、UMD 与浏览器构建可满足各类构建工具与运行环境。引擎内部palette 是如何被应用的理解加载机制有助于你排查配置问题。loadIcePalette的真实实现非常精简src/index.tsexport async function loadFireworksIcePalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }其中paletteName fireworks-ice调色板通过PluginManager.addPalette注册进palettesMapengine/src/Core/Utils/PluginManager.ts之后可由getPalette(name)取出。真正把调色板展开成完整选项的是引擎的 Options 类。在 engine/src/Options/Classes/Options.ts 的#importPalette方法中读取 palette 后会自动生成三部分配置this.load({ background: { color: paletteData.background, // 背景色 #010a14 }, blend: { enable: true, mode: paletteData.blendMode, // screen 混合模式 }, particles: { palette, // 粒子取色使用该 palette }, });也就是说palette: ice一行配置会自动展开为背景色、blend屏幕混合与粒子取色三部分——这也是为什么只用 palette 就能得到完整配色观感的原因。从源码结构看最终颜色会作用于粒子的填充IPaletteColorsFill.value即 README 中Fill: true所对应的行为。自定义在 palette 之上叠加任意选项README 特别强调Important ⚠️你可以像在任何标准 tsParticles 安装中一样通过定义属性覆盖 palette 中的所有选项。palette 只负责提供默认配色其余一切数量、形状、速度、尺寸、动效等都由你自己的 options 决定。例如把示例改造成更多、更小、更快的冰蓝星光const options { particles: { number: { value: 500 }, shape: { type: circle }, size: { value: { min: 2, max: 5 } }, opacity: { value: 0.8 }, move: { enable: true, speed: 4, direction: top, straight: true, }, }, background: { color: #000000 }, // 覆盖 palette 的背景色 palette: ice, };自定义时需要注意由于 palette 会展开 background 与 blend若你在 options 中同时显式定义background或blend会与 palette 的展开值产生覆盖关系请以最终渲染效果为准进行调整。在框架组件中使用对于 React、Vue2.x/3.x、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等拥有 tsParticles 组件库的框架README 建议在组件库文档中查看对应用法并调用loadIcePalette函数。基本模式是在初始化组件前先执行loadIcePalette(engine)再传入含palette: ice的 options与原生用法一致。小结Ice Palette 用 7 个从纯白到墨蓝的色值搭配screen混合模式在深蓝黑背景上呈现冷冽剔透的冰蓝烟花效果。接入流程可以概括为基础包 调色板 palette 配置三步先加载tsparticles/basic或完整 bundle再调用loadIcePalette注册调色板最后在 options 中声明palette: ice并补充粒子参数。从源码看palette 最终由引擎展开为背景色、blend 混合模式与粒子取色三部分因此你始终可以在其基础上自由覆盖任意粒子选项做出属于自己的冰蓝粒子世界。【免费下载链接】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 Ice Palette 冰蓝烟火配色方案：安装、加载与自定义实战指南
tsParticles Ice Palette 冰蓝烟火配色方案安装、加载与自定义实战指南【免费下载链接】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 的 Ice Palette冰蓝配色方案是tsparticles/palette-fireworks-ice包提供的预置调色板专为冰蓝色系烟花与粒子效果设计。本文将以palettes/fireworks/ice/README.md为骨架结合仓库源码讲解该配色方案的色彩构成、引擎内部的加载机制、三种接入方式CDN / npm / 懒加载以及自定义方法帮助你快速在网页中落地一套冷冽剔透的冰蓝粒子背景。配色方案是什么定义颜色而非行为使用 Ice Palette 前需要明确一个核心概念palette调色板只定义颜色不定义粒子行为。README 明确说明 A palette defines colors, not complete behavior, so pair it with a runtime package and particle options. 也就是说你需要安装tsparticles/engine或用下方 CDN bundle加载一个基础包例如tsparticles/basic并在tsParticles.load(...)之前调用loadIcePalette在 options 中应用该 palette 并配合一份最小的粒子配置。从源码角度可以更清楚地看到这一点。调色板的本体只是一份纯数据对象options.tsimport { type IPalette } from tsparticles/engine; export const options: IPalette { name: Fireworks - Ice, background: #010a14, blendMode: screen, colors: { fill: { enable: true, value: [ #FFFFFF, #E8F8FF, #AADDFF, #66BBFF, #2299FF, #0055CC, #001144, ], }, }, };IPalette接口定义在 engine/src/Core/Interfaces/IPalette.ts包含background背景色、blendModeCanvas 全局混合模式和colors可同时含 fill 填充色与 stroke 描边色。其中blendMode的类型是GlobalCompositeOperation说明该字段直接对应 Canvas 2D 的globalCompositeOperation。Ice 配色方案的色彩构成README 的 Colors 表格给出了该方案的全部颜色可归纳如下颜色色值用途纯白#FFFFFF粒子填充色最亮模拟冰晶高光淡冰蓝#E8F8FF粒子填充色浅蓝#AADDFF粒子填充色天蓝#66BBFF粒子填充色亮蓝#2299FF粒子填充色深蓝#0055CC粒子填充色墨蓝#001144粒子填充色最深模拟夜空暗部深蓝黑#010a14背景色方案的属性为Blend mode:screen屏幕混合、Fill:true启用填充。screen混合模式在 Canvas 中会让重叠区域变亮非常适合烟花、光效类效果——粒子交叠处会产生自然的发光叠加这正是冰蓝烟花剔透感的来源。从源码结构看colors.fill.value是一个字符串数组引擎会按比例从 7 个色值中为粒子取色从而形成从纯白到墨蓝的连续冰蓝渐变层次enable: true表示启用填充色当与描边搭配的 stroke 系 palette 相比ice 属于纯填充风格。三种接入方式方式一CDN / Vanilla JS / jQueryREADME 提供了最直接的 CDN 接入方式需要依次引入两个脚本基础运行时包和 palette 包script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-ice4/tsparticles.palette-coloredSmokeAmber.min.js/script注意第二个 script 的文件名是构建产物名tsparticles.palette-coloredSmokeAmber.min.js它导出的是loadIcePalette全局函数。当前仓库中该 palette 包的名字为tsparticles/palette-fireworks-ice见 package.jsonREADME 中tsparticles/palette-ice为发布别名引入时请以实际发布版本为准。加载脚本后即可初始化(async engine { await loadBasic(engine); await loadIcePalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: ice, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段代码的关键点await loadBasic(engine)必须先加载运行时基础功能形状、移动等await loadIcePalette(engine)将调色板注册进引擎options 顶层通过palette: ice声明使用该调色板engine.load({ id, options })在指定 DOM 容器id 为tsparticles中启动效果。方式二npm / 打包器ESM / CJS在使用 webpack、Vite、Rollup 等打包器的项目中直接安装并导入即可npm install tsparticles/engine tsparticles/basic tsparticles/palette-fireworks-iceimport { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadIcePalette } from tsparticles/palette-fireworks-ice; await loadBasic(tsParticles); await loadIcePalette(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: ice, }, });方式三懒加载lazy import如果你希望把调色板代码拆分为单独 chunk仅在需要时加载可以引入懒加载入口。仓库中 src/index.lazy.ts 会在回调中动态import(./options.js)从而按需拉取配色数据import { tsParticles } from tsparticles/engine/lazy; import { loadBasic } from tsparticles/basic; import { loadFireworksIcePalette } from tsparticles/palette-fireworks-ice/lazy; await loadBasic(tsParticles); await loadFireworksIcePalette(tsParticles);此外package.json 的exports字段palettes/fireworks/ice/package.json同时暴露了.同步入口与./lazy懒加载入口并分别提供 ESM、CJS、UMD 与浏览器构建可满足各类构建工具与运行环境。引擎内部palette 是如何被应用的理解加载机制有助于你排查配置问题。loadIcePalette的真实实现非常精简src/index.tsexport async function loadFireworksIcePalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }其中paletteName fireworks-ice调色板通过PluginManager.addPalette注册进palettesMapengine/src/Core/Utils/PluginManager.ts之后可由getPalette(name)取出。真正把调色板展开成完整选项的是引擎的 Options 类。在 engine/src/Options/Classes/Options.ts 的#importPalette方法中读取 palette 后会自动生成三部分配置this.load({ background: { color: paletteData.background, // 背景色 #010a14 }, blend: { enable: true, mode: paletteData.blendMode, // screen 混合模式 }, particles: { palette, // 粒子取色使用该 palette }, });也就是说palette: ice一行配置会自动展开为背景色、blend屏幕混合与粒子取色三部分——这也是为什么只用 palette 就能得到完整配色观感的原因。从源码结构看最终颜色会作用于粒子的填充IPaletteColorsFill.value即 README 中Fill: true所对应的行为。自定义在 palette 之上叠加任意选项README 特别强调Important ⚠️你可以像在任何标准 tsParticles 安装中一样通过定义属性覆盖 palette 中的所有选项。palette 只负责提供默认配色其余一切数量、形状、速度、尺寸、动效等都由你自己的 options 决定。例如把示例改造成更多、更小、更快的冰蓝星光const options { particles: { number: { value: 500 }, shape: { type: circle }, size: { value: { min: 2, max: 5 } }, opacity: { value: 0.8 }, move: { enable: true, speed: 4, direction: top, straight: true, }, }, background: { color: #000000 }, // 覆盖 palette 的背景色 palette: ice, };自定义时需要注意由于 palette 会展开 background 与 blend若你在 options 中同时显式定义background或blend会与 palette 的展开值产生覆盖关系请以最终渲染效果为准进行调整。在框架组件中使用对于 React、Vue2.x/3.x、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等拥有 tsParticles 组件库的框架README 建议在组件库文档中查看对应用法并调用loadIcePalette函数。基本模式是在初始化组件前先执行loadIcePalette(engine)再传入含palette: ice的 options与原生用法一致。小结Ice Palette 用 7 个从纯白到墨蓝的色值搭配screen混合模式在深蓝黑背景上呈现冷冽剔透的冰蓝烟花效果。接入流程可以概括为基础包 调色板 palette 配置三步先加载tsparticles/basic或完整 bundle再调用loadIcePalette注册调色板最后在 options 中声明palette: ice并补充粒子参数。从源码看palette 最终由引擎展开为背景色、blend 混合模式与粒子取色三部分因此你始终可以在其基础上自由覆盖任意粒子选项做出属于自己的冰蓝粒子世界。【免费下载链接】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），仅供参考