tsParticles Shockwave 调色板一行配置打造黑底暖橙冲击波粒子特效【免费下载链接】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导读Shockwave 调色板tsparticles/palette-shockwave是 tsParticles 仓库 palettes/atmospheric 系列中用于营造冲击波 / 火花迸发视觉风格的色彩方案包。它只负责定义一组色彩数据背景、混合模式、填充与描边颜色不包含任何粒子行为逻辑因此可以配合任何基础运行时包使用。读完本文你将掌握Shockwave 调色板的确切颜色构成与源码级数据、通过 CDN 或 npm 加载它的完整步骤、如何在 Vanilla JS 与各类框架组件中启用它以及它的工作原理引擎如何通过palette配置项自动展开背景、混合模式与粒子颜色。什么是 Shockwave 调色板在 tsParticles 的插件体系中调色板palette与预设preset是两种不同层级的复用单元预设是一整套可直接运行的完整粒子配置例如 presets/fireworks、presets/snow而调色板只定义颜色不定义行为。正如 shockwave/README.md 明确指出的A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.调色板只定义颜色不定义完整行为因此需要与运行时包和粒子选项搭配使用。Shockwave 调色板注册名称为shockwave设计意图是模拟爆炸冲击波与火星四溅的暖色视觉黑色背景、屏幕screen混合模式配合从亮白到深橙的渐变填充色与描边色。仓库内的 package.json 显示其包名为tsparticles/palette-shockwave当前版本 4.3.3仅依赖tsparticles/engine。颜色构成与源码数据文档 Colors 章节 给出了 5 个前景色与 1 个背景色以及混合模式与填充开关。这些信息在源码 options.ts 中有更完整、更精确的表达。官方色板总览角色色值说明前景色 1#FFFFFF亮白冲击波高光核心前景色 2#FFEECC淡奶油橙中间过渡前景色 3#FFAA44亮橙主色前景色 4#FF5500橙红冲击波外围前景色 5#AA2200深棕红火星暗部背景色#000000纯黑背景混合模式screen屏幕混合提亮叠加区域填充FillfalseREADME 表格表格标注源码中则按分层分别启用填充注意README 颜色表格中Fill: false是概览性的说明实际源码按三层颜色组分别配置填充与描边详见下文源码解析。以源码为准。源码级颜色数据options.tsoptions.ts 中导出一个IPalette类型的options常量其结构为export const options: IPalette { name: Shockwave, background: #000000, blendMode: screen, colors: [ { fill: { enable: true, opacity: 0.75, value: [#FFFFFF, #FFEECC, #FFAA44, #FF5500], }, }, { stroke: { value: [#FFFFFF, #FFEECC], width: { min: 0.8, max: 1.8, }, }, }, { fill: { enable: true, opacity: 0.6, value: [#FFEECC, #FFAA44, #FF5500, #AA2200], }, stroke: { value: [#FFAA44, #FF5500, #AA2200], width: { min: 2, max: 4, }, }, }, ], };这组数据揭示了 Shockwave 的实际配色逻辑分为三层高光填充层#FFFFFF、#FFEECC、#FFAA44、#FF5500四种暖色以 0.75 透明度填充构成冲击波明亮的内核与主光晕细描边层#FFFFFF、#FFEECC作为描边色宽度在 0.81.8 之间随机勾勒高光边缘暗部填充 粗描边层#FFEECC#AA2200以 0.6 透明度填充同时用#FFAA44#AA2200以 24 的更粗宽度描边塑造火星与冲击波外沿的层次。字段含义与引擎侧 IPalette 接口 一一对应background: string—— 画布背景色blendMode: GlobalCompositeOperation—— Canvas 全局混合模式此处为screencolors—— 一组或多组颜色配置每组可含fill填充与stroke描边IPaletteColorsFillenable开关、opacity支持 [min, max] 范围值、value支持单值或数组IPaletteColorsStrokeopacity、value以及必需的width范围值。工作原理palette 选项如何被引擎消费Shockwave 调色板能一行配置生效的关键在引擎侧。查看 Options.ts 的源码顶层配置新增了palette?: string选项第 55-56 行当配置中携带palette时第 100-103 行引擎调用私有方法#importPalette#importPalette第 142-161 行通过pluginManager.getPalette(palette)按名称查找已注册的调色板找到后自动执行this.load(...)将调色板展开为三部分this.load({ background: { color: paletteData.background }, // 应用背景色 #000000 blend: { enable: true, mode: paletteData.blendMode }, // 开启 screen 混合 particles: { palette }, // 粒子应用该调色板 });也就是说设置palette: shockwave等价于手写一份包含背景色、blend 混合模式与粒子配色在内的完整配置。调色板的注册与查找则由 PluginManager 承担addPalette(name, palette)第 163-165 行把调色板存入palettes: Mapstring, IPalettegetPalette(name)第 247-249 行按名称取出注册器register(...loaders)第 337-349 行限定只能在tsParticles.load()之前调用否则抛出Register plugins can only be done before calling tsParticles.load()。加载函数 index.ts 的实现正是遵循这一机制export async function loadShockwavePalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }这里paletteName为字符串shockwave即配置中palette: shockwave所对应的名称。另外 index.lazy.ts 提供了按需动态import(./options.js)的懒加载版本可用于减小首屏包体browser.ts 则把loadShockwavePalette挂到globalThis支撑 CDN 全局调用。快速使用清单按照 README Quick checklist 的步骤启用 Shockwave 调色板只需三步安装tsparticles/engine或直接使用下面的 CDN 打包文件加载一个基础运行时包例如tsparticles/basic并在tsParticles.load(...)之前调用loadShockwavePalette在粒子配置中指定palette: shockwave并配上一份最简粒子选项。tsparticles/basic是官方提供的精简运行时包其入口 bundles/basic/src/index.ts 会统一注册 blend 插件、六/HSL/RGB 三种颜色插件、move 插件、circle 形状以及 paint、opacity、outModes、size 四个 updater——足以渲染 Shockwave 示例中的圆形粒子动画。使用方式一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-shockwave4/tsparticles.palette-coloredSmokeAmber.min.js/script提示第二个脚本的文件名沿用了调色板早期的coloredSmokeAmber命名这是历史遗留实际加载的仍是 Shockwave 调色板当前包名为tsparticles/palette-shockwave见 package.json。脚本加载完成后按如下方式初始化(async engine { await loadBasic(engine); await loadShockwavePalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: shockwave, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);参数说明particles.number.value: 200—— 画面中同时存在的粒子数量particles.shape.type: circle—— 圆形粒子由 basic 包中的 circle 形状提供particles.size.value: { min: 10, max: 15 }—— 粒子直径在 1015 之间随机particles.move—— 启用移动速度为 2palette: shockwave—— 核心一行让引擎自动应用 Shockwave 调色板背景、blend、粒子颜色。自定义Customization重要 ⚠️调色板只注入颜色相关的默认值并不会锁定你的配置。你可以像标准的 tsParticles 安装一样覆盖任意选项属性——例如修改粒子数量、换形状、改移动方式甚至直接覆盖颜色相关字段调色板的screen混合与黑色背景只作为初始默认生效。使用方式二框架组件对于 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等拥有 tsParticles 组件库的框架流程相同查阅对应组件库文档在初始化粒子组件前调用loadShockwavePalette随后在组件传入的 options 中设置palette: shockwave。仓库 wrappers 目录下提供了上述框架的官方封装例如 wrappers/react、wrappers/vue3、wrappers/angular 等其中组件的 options 属性与上述 Vanilla 示例中的options对象结构完全一致。调色板数据模型单组与多组颜色Shockwave 调色板中colors是一个包含 3 个元素的数组这正好对应引擎接口中colors: SingleOrMultipleIPaletteColors见 IPalette.ts 第 39 行的多组形态引擎会依次应用每一组 fill / stroke 配置从而在同一画布上叠加高光填充层 细描边层 暗部粗描边层的复合效果。若只想要单一配色也可以只提供一组{ fill: { enable: true, value: #FF5500 } }之类的单组对象。常见问题与注意事项必须搭配运行时包单独引入调色板不会渲染任何粒子因为调色板不含 shape、move、updater 等行为逻辑。请务必先loadBasic(engine)或加载等效的 full/slim 包。注册时机loadShockwavePalette必须在tsParticles.load()之前调用引擎的PluginManager.register会拒绝在初始化后注册详见 PluginManager.ts 第 337-349 行。命名一致性注册名是shockwave配置中必须写palette: shockwave如果拼写错误getPalette会返回undefined#importPalette会静默跳过见 Options.ts 第 143-147 行调色板不会生效。混合模式依赖 blend 插件调色板的screen混合模式需要 blend 插件支持basic 包已内置见 bundles/basic/src/index.ts 的loadBlendPlugin调用若使用精简环境请确认已加载tsparticles/plugin-blend。树摇友好仓库内的懒加载入口 index.lazy.ts 支持按需加载颜色数据适合对包体积敏感的场景。延伸阅读同系列调色板目录palettesatmospheric、confetti、fire、nature、space 等多种主题预设目录可直接运行的一整套粒子配置presets引擎调色板接口定义engine/src/Core/Interfaces/IPalette.ts引擎调色板展开逻辑engine/src/Options/Classes/Options.ts调色板注册与查找实现engine/src/Core/Utils/PluginManager.ts【免费下载链接】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），仅供参考