企业官网建设流程全解析

tsParticles Sunrise Gold 调色板实战指南：日出金配色粒子效果的安装、配置与源码解析

【免费下载链接】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

本文是一份针对 tsParticlesSunrise Gold（日出金）调色板的完整技术指南，讲解该调色板的色彩构成、CDN 与 npm 两种引入方式、最小可运行配置，并结合引擎源码剖析调色板在运行时是如何被解析与应用的。读完本文，你将掌握在任意 tsParticles 项目中快速套用这套"深空紫 + 日出金"配色方案的方法，并理解palette选项与IPalette接口的底层工作方式。

Sunrise Gold 调色板是什么

Sunrise Gold 是 tsParticles 官方palettes系列中位于atmospheric（氛围）分类下的一套配色方案，源码位于 palettes/atmospheric/sunriseGold。它的核心文件 options.ts 定义了一个符合引擎IPalette接口的调色板对象：

export const options: IPalette = { name: "Sunrise Gold", background: "#130B2A", blendMode: "source-over", colors: { fill: { enable: true, value: [ "#3A0CA3", "#7209B7", "#F72585", "#FF7B00", "#FFB703", "#FFE066", ], }, }, };

需要注意一个关键概念：调色板只定义颜色，不定义完整行为（原文档明确说明 "A palette defines colors, not complete behavior"）。也就是说，调色板负责提供粒子填充色、描边色与背景色，而粒子的数量、形状、尺寸、运动方式等行为仍需要你通过标准 particles 配置来指定。这与 preset（预设）有本质区别：preset 是一整套可直接运行的完整配置，而 palette 必须配合一个基础运行时包（如@tsparticles/basic）和一份最小粒子配置才能生效。

色彩构成：深空紫底 + 日出金渐变

Sunrise Gold 的核心视觉特征是"深色夜空背景 + 由紫到金的暖色渐变粒子"。完整配色如下：

此外，调色板还指定了两项渲染属性（见 options.ts）：

• Blend mode（混合模式）：source-over，即默认的"后绘制覆盖先绘制"模式，粒子之间不会发生叠加变亮或变暗的混合效果；
• Fill（填充）：true，表示启用粒子填充色，粒子本体使用上述 6 色进行着色。

这 6 种颜色在粒子间随机分配（value为字符串数组），因此运行效果是在深色背景上散布紫色、粉色、橙色与金色的彩色圆点，见上方示例图。

快速上手指南

原文档给出的使用清单一共三步：

1. 安装@tsparticles/engine（或直接使用下方 CDN bundle）；
2. 加载一个基础运行时包（例如@tsparticles/basic），并在tsParticles.load(...)之前调用loadSunriseGoldPalette；
3. 在配置项中应用调色板，并补充一份最小粒子配置。

下面分别介绍 CDN 与 npm 两种路径。

引入方式一：CDN（Vanilla JS / jQuery）

对于不使用构建工具的场景，直接在 HTML 中引入两个脚本即可：

<script src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@4/tsparticles.basic.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-sunriseGold@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>

第一个脚本提供引擎与基础运行时（loadBasic），第二个脚本提供loadSunriseGoldPalette全局函数。脚本加载完成后，就可以在页面脚本中初始化粒子实例。

引入方式二：npm / ESM（模块化项目）

在 npm/pnpm/yarn 工程中安装依赖（当前仓库使用 pnpm workspace 管理，包版本见 package.json）：

npm install @tsparticles/engine @tsparticles/basic @tsparticles/palette-sunrise-gold

随后在代码中导入并注册调色板：

import { tsParticles } from "@tsparticles/engine"; import { loadBasic } from "@tsparticles/basic"; import { loadSunriseGoldPalette } from "@tsparticles/palette-sunrise-gold"; await loadBasic(tsParticles); await loadSunriseGoldPalette(tsParticles);

如果你的打包器支持按需动态导入，也可以使用包提供的 lazy 入口@tsparticles/palette-sunrise-gold/lazy（该入口在调用时才动态import调色板选项，见 index.lazy.ts，适合进一步减小首屏体积）。

最小可运行配置示例

注册完成后，即可用palette选项引用该调色板并叠加一份基础粒子配置（原文档示例，此处补齐注释说明）：

(async engine => { await loadBasic(engine); await loadSunriseGoldPalette(engine); const options = { particles: { // 粒子数量：200 个 number: { value: 200 }, // 粒子形状：圆形 shape: { type: "circle" }, // 粒子尺寸：10 ~ 15 之间的随机值 size: { value: { min: 10, max: 15 } }, move: { // 开启运动 enable: true, // 移动速度（像素/帧） speed: 2, }, }, palette: "sunriseGold", }; await engine.load({ id: "tsparticles", options, }); })(tsParticles);

配置要点说明：

• palette: "sunriseGold"是顶层选项，引擎会按名称在插件管理器中查找已注册的调色板（查找逻辑见下文源码解析）；
• particles.number / shape / size / move均为标准 tsParticles 配置，与不使用调色板时完全一致，可任意扩展（如color、links、opacity等）；
• engine.load的id需要与页面中<div id="tsparticles"></div>容器对应。

兼容性提示：从源码看，调色板在插件管理器中注册的键为sunrise-gold（见 index.ts），而上述 README 示例中使用的是sunriseGold。若你的环境中palette按名称取不到配色，请以源码注册键sunrise-gold为准。

源码原理：调色板是如何被加载与应用的

理解底层机制有助于排查配置问题。整个链条分为三个环节：

1. 注册：loadSunriseGoldPalette做了什么

入口函数 index.ts 的实现非常简洁：

const paletteName = "sunrise-gold"; export async function loadSunriseGoldPalette(engine: Engine): Promise<void> { await engine.pluginManager.register(e => { e.pluginManager.addPalette(paletteName, options); }); }

它调用引擎的pluginManager.addPalette(paletteName, options)，将调色板对象以"sunrise-gold"为键存入插件的palettesMap 中（对应实现见 engine/src/Core/Utils/PluginManager.ts 的addPalette/getPalette方法）。

2. 解析：palette选项的导入逻辑

当配置中出现顶层palette选项时，引擎的 Options.ts 会执行#importPalette：

#importPalette(palette: string): void { const paletteData = this.#pluginManager.getPalette(palette); if (!paletteData) { return; } this.load({ background: { color: paletteData.background, }, blend: { enable: true, mode: paletteData.blendMode, }, particles: { palette, }, }); }

可以从中确认三个实现事实：

• 调色板的background色值会被映射到标准background.color选项；
• 调色板的blendMode会被映射为blend.enable: true与blend.mode（混合模式由 blend 插件消费）；
• 若按名称找不到调色板（getPalette返回undefined），引擎会静默跳过而不报错——这也是上文"兼容性提示"需要核对注册键的原因。

3. 类型契约：IPalette接口

调色板对象必须符合 engine/src/Core/Interfaces/IPalette.ts 定义的接口，其字段为：

这也是自定义调色板或改造 Sunrise Gold 的扩展点：IPalette支持fill+stroke双通道，甚至colors可以是多组颜色配置（SingleOrMultiple<IPaletteColors>），因此你完全可以在此结构基础上扩展出"填充 + 描边"复合配色。

自定义与覆盖

原文档强调：你可以像在标准 tsParticles 安装中一样，覆盖所有选项属性。调色板只是"预设颜色"，最终生效的配置以你传入的 options 与调色板合并后的结果为准。

例如在 Sunrise Gold 基础上替换背景、提高粒子密度并自定义透明度：

const options = { background: { color: "#0A0A1A", // 覆盖调色板默认的 #130B2A }, particles: { number: { value: 300 }, shape: { type: "circle" }, size: { value: { min: 6, max: 20 } }, opacity: { value: { min: 0.4, max: 1 } }, move: { enable: true, speed: 3 }, }, palette: "sunrise-gold", };

如果只想借用这套 6 色渐变、不想要背景与混合模式等附加行为，也可以完全不使用palette选项，直接把色值写入标准particles.color.value：

const options = { background: { color: "#130B2A" }, particles: { color: { value: ["#3A0CA3", "#7209B7", "#F72585", "#FF7B00", "#FFB703", "#FFE066"], }, // ...其余粒子行为配置 }, };

两种方式的区别在于：palette方式由引擎自动完成背景与混合模式的映射，代码更简洁；手动写色值的方式则把控制权完全交给你，适合需要精细控制背景和 blend 插件行为的场景。

在框架组件中使用

tsParticles 官方为 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等提供了组件库（见 wrappers 目录）。使用框架组件时，步骤一致：在组件初始化阶段调用loadSunriseGoldPalette注册调色板，再在组件配置中传入palette选项与粒子行为配置即可；具体 API 以对应组件库文档为准。

相关资源

• 调色板完整源码与构建配置：palettes/atmospheric/sunriseGold（含 index.ts、options.ts、browser.ts 全局挂载入口与 rollup.config.js 打包配置）
• 引擎侧调色板机制：engine/src/Core/Interfaces/IPalette.ts、engine/src/Core/Utils/PluginManager.ts、engine/src/Options/Classes/Options.ts
• 同类可参考实现：其余 palette 位于 palettes 目录（如 atmospheric 分类下的其他配色），完整粒子运行预设可参考 presets 目录
• 基础运行时包：bundles/basic，引擎主包：engine

【免费下载链接】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