tsParticles Colored Smoke Amber 调色板完全指南从 CDN 集成到源码级配色机制【免费下载链接】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 的Colored Smoke Amber彩色烟雾琥珀调色板是一套预置的琥珀色系配色方案用于快速打造暖色调的粒子背景它定义了 6 种从深棕到亮橙的粒子填充色、深色背景色以及source-over混合模式并通过palette选项一键应用到粒子动画中。本文以该调色板为线索完整讲解其安装、加载、配置与自定义方法并结合仓库源码剖析调色板在引擎内部从注册到生效的实现原理帮助你既会用、也懂其底层工作机制。Colored Smoke Amber 调色板示例效果调色板是什么六色琥珀烟配色一览Colored Smoke Amber 调色板的核心定义位于 options.ts它是一份符合引擎IPalette接口的静态配置对象import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Colored Smoke - Amber, background: #090500, blendMode: source-over, colors: { fill: { enable: true, value: [ #1A1000, #3A2200, #6B3D00, #A65A00, #D98A1A, #FFC266, ], }, }, };这份配置定义了以下要素配置项值说明nameColored Smoke - Amber调色板的显示名称background#090500自动应用到画布背景的深棕黑色blendModesource-overCanvas 全局合成模式GlobalCompositeOperationcolors.fill.enabletrue启用粒子填充色colors.fill.value6 个十六进制色值粒子从填充色列表中随机取色颜色明细色值色彩印象在调色板中的角色#1A1000近黑的深棕烟雾最深处#3A2200深咖啡棕深色烟层#6B3D00焦糖棕中段过渡色#A65A00琥珀橙主色调#D98A1A暖橙金高亮过渡色#FFC266浅杏橙烟雾最亮处#090500极暗暖黑背景色这组颜色由深到浅、由暗到亮渐进排列模拟了琥珀色烟雾在暗背景下由浓到淡的层次感视觉上温暖且富有纵深感。调色板同时声明了Blend mode: source-over与Fill: true前者保证粒子颜色以普通覆盖方式叠加后者确保每个粒子都使用填充色渲染。从源码理解调色板机制IPalette 接口与注册链路要真正用好调色板有必要先看懂引擎如何定义和消费它。调色板的数据结构由引擎的 IPalette.ts 接口约束export interface IPalette { background: string; // 背景色 blendMode: GlobalCompositeOperation; // Canvas 混合模式 colors: SingleOrMultipleIPaletteColors; // 一组或多组颜色配置 name: string; // 调色板名称 }其中IPaletteColors又分为可选的fill填充与stroke描边两部分fill支持enable开关、opacity透明度范围和value单个或多个色值stroke额外支持width描边宽度范围。Colored Smoke Amber 只使用了fill分支因此粒子的描边保持默认关闭。调色板通过引擎的插件管理器注册与查找核心实现在 PluginManager.tsaddPalette(name, palette)把调色板按名称存入内部的Mapstring, IPalettegetPalette(name)按名称取出调色板数据。而本调色板的加载函数定义在 index.tsconst paletteName colored-smoke-amber; export async function loadColoredSmokeAmberPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }可以看到调用loadColoredSmokeAmberPalette(engine)后调色板即以colored-smoke-amber为键注册进引擎之后配置项中的palette字段才能解析到它。这也是必须先加载调色板、再tsParticles.load(...)这一顺序要求的根本原因。配置解析时发生了什么当配置中出现palette字段时引擎在两级位置做了导入处理顶层 OptionsOptions.ts读取data.palette后调用#importPalette把paletteData.background写入background.color把paletteData.blendMode写入blend.mode并启用blendOptions.ts。也就是说背景色和混合模式是调色板自动带来的无需再手动配置。粒子层 ParticlesOptionsParticlesOptions.ts把colors中的fill/stroke转换为引擎的paint绘制配置包括颜色value、enable、opacity并把blendMode同步到粒子的blend.mode。因此调色板 颜色 背景 混合模式的打包方案在引擎层是确定的事实你只需写一行palette: colored-smoke-amber颜色、背景、混合模式都会被自动装配到粒子上。快速开始三步接入清单官方文档给出了最精简的接入流程以下按原步骤展开安装引擎安装tsparticles/engine或直接使用下方的 CDN BundleBundle 已内置引擎加载基础包并注册调色板加载一个基础运行时包例如tsparticles/basic并在tsParticles.load(...)之前调用loadColoredSmokeAmberPalette在选项中应用调色板在粒子配置之外加入palette: colored-smoke-amber以及一份最简粒子参数。需要特别强调的是调色板只定义颜色不定义完整行为。粒子数量、形状、大小、运动等行为参数仍需你通过particles配置提供调色板负责的是看起来是什么颜色而非粒子如何运动。CDN / 原生 JavaScript / jQuery 用法对于不想使用构建工具的场景通过 jsDelivr 引入两个脚本即可tsparticles/basic提供基础运行时调色板脚本注册配色script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-coloredSmokeAmber4/tsparticles.palette-coloredSmokeAmber.min.js/script脚本加载完成后tsParticles与loadColoredSmokeAmberPalette会暴露在全局作用域全局挂载逻辑见 browser.ts随后即可初始化动画(async engine { await loadBasic(engine); await loadColoredSmokeAmberPalette(engine); const options { particles: { number: { value: 200 }, // 200 个粒子 shape: { type: circle }, // 圆形粒子 size: { value: { min: 10, max: 15 } }, // 半径 10~15 随机 move: { enable: true, speed: 2, // 每秒移动 2 像素 }, }, palette: coloredSmokeAmber, // 应用琥珀烟雾调色板 }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段示例中粒子颜色无需单独声明——palette字段会自动把 6 种琥珀色装配为粒子填充色同时把#090500应用为背景。需要留意的是palette字段的取值根据源码 index.ts调色板实际注册键为colored-smoke-amber若你使用该 npm 包时遇到调色板未生效请优先确认palette值与注册键是否完全一致。自定义覆盖调色板提供的只是一套默认值你可以像任何标准 tsParticles 安装一样覆盖所有相关配置项。例如希望加大粒子、加快运动并改成三角形const options { background: { color: #000000 }, // 覆盖调色板带来的背景色 particles: { number: { value: 300 }, shape: { type: triangle }, size: { value: { min: 12, max: 20 } }, move: { enable: true, speed: 3 }, color: { value: #FFC266 }, // 或显式固定为单一琥珀色 }, palette: colored-smoke-amber, };显式声明的background、particles.color、blend等配置优先级更高会覆盖调色板注入的同名配置这为基于调色板再做差异化定制保留了充分空间。npm 模块方式与懒加载在基于打包器Vite / Webpack / Rollup的项目中推荐通过 npm 安装。包名与版本信息见 package.jsonnpm install tsparticles/engine tsparticles/basic tsparticles/palette-colored-smoke-amber标准引入方式import { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadColoredSmokeAmberPalette } from tsparticles/palette-colored-smoke-amber; await loadBasic(tsParticles); await loadColoredSmokeAmberPalette(tsParticles); await tsParticles.load({ id: tsparticles, options: { particles: { /* ...粒子参数... */ }, palette: colored-smoke-amber, }, });该包还提供懒加载子路径tsparticles/palette-colored-smoke-amber/lazy对应 index.lazy.ts它只在加载函数被调用时才动态import(./options.js)读取调色板数据适合希望把配色数据拆分成独立 chunk、首屏不加载的场景import { loadColoredSmokeAmberPalette } from tsparticles/palette-colored-smoke-amber/lazy;两种入口导出的函数签名完全一致可以按打包策略任选其一。安装后可查看该包的exports字段确认./lazy子路径映射package.json。在框架组件中使用tsParticles 官方提供了 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 与 Web Components 等框架的组件库对应仓库的 wrappers 目录。在这些框架中使用本调色板的流程与原生方式一致安装对应框架的组件库例如tsparticles/react与tsparticles/palette-colored-smoke-amber在初始化组件引擎时先加载基础包再调用loadColoredSmokeAmberPalette(engine)将options含palette: colored-smoke-amber与particles参数传给组件。各框架组件的具体初始化方式如何拿到engine实例、在哪个生命周期钩子中注册以对应组件库文档为准但先注册调色板、再加载配置的原则是通用的。小结与进阶提示调色板 颜色 背景 混合模式palette一行配置即自动完成背景色、粒子填充色与blend.mode的装配证据见 Options.ts 与 ParticlesOptions.ts加载顺序是关键务必在tsParticles.load(...)之前调用loadColoredSmokeAmberPalette否则getPalette查不到注册数据palette配置会被静默忽略调色板不负责行为粒子数量、形状、大小、运动等仍需自行配置一切皆可覆盖显式配置项优先于调色板注入的默认值可以在保留配色基调的同时自由定制。如果你想继续深入可以对照阅读引擎的 IPalette.ts 了解调色板数据结构的完整字段或在 PluginManager.ts 中查看addPalette/getPalette的注册与查询实现从而把配色方案扩展为自己的自定义调色板。【免费下载链接】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），仅供参考