tsParticles Apple Red 调色板完全指南：用苹果红配色构建粒子动画-创锋一号

tsParticles Apple Red 调色板完全指南：用苹果红配色构建粒子动画

【免费下载链接】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-apple-red调色板包展开，讲解如何使用其内置的红苹果色系配色方案，快速构建颜色统一、层次丰富的粒子动画背景。你将掌握调色板的安装方式、loadAppleRedPalette加载流程、palette: "apple-red"配置写法，以及调色板与引擎的底层协作原理。

上图来自本仓库 palettes/food/apple-red/images/sample.png：红色系粒子搭配米色、棕色暖调点缀，在黑色背景上呈现苹果主题的粒子动画效果。

Apple Red 调色板是什么

Apple Red 是 tsParticles 官方 palettes/food 分类下的一个调色板包，npm 包名为@tsparticles/palette-apple-red（版本 4.3.3，见 package.json）。它提供一组围绕“红苹果”主题设计的颜色集合，用于粒子动画的填充色、背景色与混合模式，让粒子效果呈现统一的红苹果配色质感。

需要明确的是，调色板只定义颜色，不定义粒子的完整行为。粒子数量、形状、大小、运动方式等仍需配合基础包（如@tsparticles/basic）和粒子配置项来完成。这是本包在架构上与其他 tsParticles 组件（如预设 preset）的重要区别。

调色板包含的颜色

根据 options.ts，Apple Red 调色板定义如下：

import { type IPalette } from "@tsparticles/engine"; export const options: IPalette = { name: "Apple Red", background: "#0b0f08", blendMode: "multiply", colors: { fill: { enable: true, value: [ "#FFF8E1", // inner flesh light "#FFE0B2", "#FFCC80", "#E53935", // red skin "#C62828", "#AD2A2F", "#6D4C41", // stem ], }, }, };

各部分含义：

name：调色板名称"Apple Red"，与palette配置项中使用的键名"apple-red"相互对应；
background：背景色#0b0f08（深黑绿），加载调色板时会被应用到容器背景；
blendMode：画布混合模式multiply（正片叠底），影响粒子与背景的叠加效果；
colors.fill：粒子填充色集合，enable: true表示启用填充；value为字符串数组，粒子会从这 7 个颜色中取值。

这 7 个颜色以红苹果为灵感：#FFF8E1、#FFE0B2、#FFCC80是浅色果肉暖调，#E53935、#C62828、#AD2A2F是不同深浅的红果皮，#6D4C41模拟果柄的棕色。

需要注意的是，README 的 Colors 表格中展示的#1A1000、#3A2200、#6B3D00、#A65A00、#D98A1A、#FFC266、#090500以及标注的Background: #1A1000与Blend mode: source-over，与本仓库 options.ts 中实际定义（背景#0b0f08、混合模式multiply、7 个填充色）存在差异，使用时应以源码定义为准。这也提醒你：调色板具体颜色以当前安装版本的实际源码为准。

快速上手三步流程

README 给出了 Quick checklist：

安装@tsparticles/engine（或使用 CDN bundle）；
加载一个基础包（如@tsparticles/basic），并在tsParticles.load(...)之前调用loadAppleRedPalette；
在选项中应用调色板，并搭配一份最小化的粒子配置。

因为调色板只定义颜色而非完整行为，所以必须与运行时包和粒子选项配合使用。

安装

npm install @tsparticles/engine @tsparticles/basic @tsparticles/palette-apple-red

或使用 pnpm：

pnpm add @tsparticles/engine @tsparticles/basic @tsparticles/palette-apple-red

本仓库使用 pnpm workspace 管理依赖，@tsparticles/palette-apple-red的 dependencies 只声明了@tsparticles/engine（workspace 版本，见 package.json），运行时你还需要一个基础功能包（如@tsparticles/basic）来提供圆形等基本形状与运动能力。

CDN / Vanilla JS / jQuery 方式

<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-apple-red@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>

注意：README 中 CDN 文件名tsparticles.palette-coloredSmokeAmber.min.js沿用了其他调色板包的命名模板（coloredSmokeAmber），实际包名对应的 bundle 文件名应以 jsDelivr/npm 发布产物为准；源码层面本包暴露的全局函数是loadAppleRedPalette（见 browser.ts）。

使用示例

(async engine => { await loadBasic(engine); await loadAppleRedPalette(engine); const options = { particles: { number: { value: 200 }, shape: { type: "circle" }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: "apple-red", }; await engine.load({ id: "tsparticles", options, }); })(tsParticles);

这段代码的关键点：

loadBasic(engine)注册基础功能（圆形 shape、基本的 move 等）；
loadAppleRedPalette(engine)在engine.load(...)之前调用，将调色板注册到引擎；
顶层palette: "apple-red"告诉引擎应用该调色板；
particles配置仅提供最简行为（200 个圆形粒子、大小 10–15、移动速度 2），颜色与背景由调色板接管。

自定义覆盖

README 特别提示：你可以像任何标准 tsParticles 安装一样，通过定义同名属性来覆盖调色板中的任意选项。例如在options中显式声明background、particles.color或particles.size，会覆盖调色板注入的对应值。调色板提供的是"开箱即用的默认配色"，而不是锁死的限制。

与框架组件库配合

如果你使用 React、Vue、Angular、Svelte、jQuery、Preact 等带有 tsParticles 组件库的框架，可参考对应组件库文档，在组件初始化前调用loadAppleRedPalette函数完成注册，其余配置方式与 Vanilla JS 一致。

源码级原理：调色板如何被引擎消费

调色板的注册

src/index.ts 展示了注册逻辑：

export async function loadAppleRedPalette(engine: Engine): Promise<void> { await engine.pluginManager.register(e => { e.pluginManager.addPalette(paletteName, options); }); }

其中paletteName = "apple-red"，即配置项中使用的键名。注册的实质是把键名与IPalette结构存入引擎的插件管理器，见 engine/src/Core/Utils/PluginManager.ts 的addPalette(name, palette)实现：this.palettes.set(name, palette)，之后通过getPalette(name)按名取用。

@tsparticles/palette-apple-red还提供了懒加载入口 src/index.lazy.ts：options通过动态import()按需加载，适合需要减小首屏体积的场景。

调色板如何注入配置

在 engine/src/Options/Classes/Options.ts 中，当解析到顶层palette配置项时，#importPalette会从插件管理器取回调色板数据，并把以下内容合并进当前配置：

background.color← 调色板的background（即#0b0f08）；
blend.enable = true、blend.mode← 调色板的blendMode（即multiply）；
particles.palette← 调色板键名，用于粒子颜色的解析。

也就是说，palette: "apple-red"本质上是把背景色、混合模式、粒子取色三件事一次性配置好，这也是"调色板定义颜色、不定义行为"这一分工在引擎层的体现。

IPalette 类型结构

调色板结构由 engine/src/Core/Interfaces/IPalette.ts 定义：

background: string：背景色；
blendMode: GlobalCompositeOperation：画布混合模式；
colors: SingleOrMultiple<IPaletteColors>：一组或多组颜色配置；
name: string：调色板名称。

其中IPaletteColors可选包含fill（填充色）与stroke（描边色）两组配置；fill支持enable、opacity（透明度范围）与value（单个或多个颜色）；stroke额外支持width（描边宽度范围）。Apple Red 目前只使用了fill。

与其他调色板包的异同

本仓库 palettes 目录下还有 atmosphere、fireworks、food、space 等多个调色板分类，它们在结构上完全一致：每个包都由src/options.ts（颜色定义）、src/index.ts（注册函数）、src/index.lazy.ts（懒加载入口）、src/browser.ts（全局暴露）四部分构成，均通过loadXxxPalette注册、以palette: "xxx"引用。掌握了 Apple Red 的用法，即可举一反三应用到其他调色板。

企业官网建设流程全解析