tsParticles Fountain 预设实战指南用喷泉粒子效果为网页增添动态背景【免费下载链接】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/preset-fountain预设presets/fountain展开讲解如何用最少的配置在网页中实现彩色粒子喷泉效果——粒子从喷泉口向上喷出、受重力回落、撞击地面后分裂破碎。读完本文你将掌握 Fountain 预设的安装方式、预设加载顺序、内置粒子行为与颜色配置的底层实现以及如何基于 options.ts 默认配置做二次定制。Fountain 预设是什么根据 presets/fountain/README.md 的定义Fountain 预设是 tsParticles 的一个官方预设用于创建随机位置下落、撞击地面时破碎的彩色粒子效果视觉上类似真实的喷泉或水花飞溅。它不是一个独立的引擎而是在 tsParticles 引擎之上打包了一组插件与更新器封装成一套开箱即用的完整配置。从 presets/fountain/package.json 可以看到其包名为tsparticles/preset-fountain描述为tsParticles preset for creating water fountain-like particle spray effects当前仓库内的版本为 4.3.3采用 MIT 协议通过 pnpm workspace 与仓库内其他包共享源码。预设依赖的模块与各自职责Fountain 预设并非凭空实现喷泉效果而是组合了多个底层模块见 README.md 的 Dependencies 表格依赖关系同样反映在 package.json 的dependencies字段中依赖包在预设中的角色tsparticles/basic预设使用的基础运行时 bundle提供核心粒子能力tsparticles/enginetsParticles 引擎与预设注册机制tsparticles/plugin-emitters从可配置的发射器emitter中持续产生粒子tsparticles/plugin-trail添加持久的 canvas 拖尾trail渲染形成水流轨迹tsparticles/updater-destroy在粒子生命周期结束时将其销毁本预设中用于分裂这一组合在源码中有直接印证。查看 presets/fountain/src/index.ts 的loadFountainPreset实现export async function loadFountainPreset(engine: Engine): Promisevoid { await engine.pluginManager.register(async e { await Promise.all([ loadBasic(e), loadDestroyUpdater(e), loadEmittersPluginSimple(e), loadTrailPlugin(e), ]); e.pluginManager.addPreset(presetName, options); }); }该函数依次把 basic bundle、destroy 更新器、emitters 插件简化版和 trail 插件注册进引擎最后通过e.pluginManager.addPreset(fountain, options)将内置配置注册为名为fountain的预设。这正是 README 中Quick checklist第 2 步要求在使用前调用loadFountainPreset(tsParticles)的原因——预设的注册必须发生在tsParticles.load(...)之前。喷泉效果的模块协作关系README.md 末尾用 mermaid 图描述了 Fountain 预设的模块依赖结构tsParticles Basic bundle 是基础Emitters、Interactivity、Trail 插件建立在 Basic 之上Destroy 更新器建立在 Basic 之上最终 Fountain 预设由 Basic、Emitters、Trail 与 Destroy 组合而成。从效果实现看这套架构的职责划分非常清晰Emitters 插件负责喷泉口——在画面底部持续发射粒子move 重力配置让粒子在上升后受重力回落模拟喷泉水柱的抛物线轨迹OutMode.split 与 Destroy 更新器让粒子在触底时分裂成多个小粒子模拟水花破碎Trail 插件为每个粒子留下短暂拖尾让喷泉水流看起来连贯、有水柱的质感。快速上手安装与最小使用按照 README.md 的 Quick checklist使用 Fountain 预设只需三步安装tsparticles/engine或直接使用下方 CDN bundle在tsParticles.load(...)之前调用loadFountainPreset(tsParticles)在配置中设置preset: fountain。方式一CDN 直接引入Vanilla JS / jQueryscript srchttps://cdn.jsdelivr.net/npm/tsparticles/preset-fountain4/tsparticles.preset.fountain.bundle.min.js/script该 bundle 由 presets/fountain/src/bundle.ts 构建而来它会同时向globalThis暴露loadFountainPreset与tsParticles两个全局对象因此引入脚本后即可直接使用。方式二npm 安装 ES Modulenpm install tsparticles/engine tsparticles/preset-fountain最小示例代码无论哪种引入方式初始化逻辑都相同来自 README.md 的 Usage 示例(async () { await loadFountainPreset(tsParticles); await tsParticles.load({ id: tsparticles, options: { preset: fountain, }, }); })();只配置preset: fountain引擎就会自动应用 options.ts 中封装的整套喷泉配置无需手动编写任何粒子行为参数。懒加载lazy入口如果你的项目关心首屏包体积可以改用懒加载入口。仓库提供了单独的 presets/fountain/src/index.lazy.ts它在运行时才通过动态import()加载tsparticles/basic/lazy、tsparticles/updater-destroy/lazy、tsparticles/plugin-emitters/plugin/lazy等子路径模块并在 package.json 的exports字段中暴露为tsparticles/preset-fountain/lazy。对应代码export async function loadFountainPreset(engine: Engine): Promisevoid { await engine.pluginManager.register(async e { const [{ loadBasic }, { loadDestroyUpdater }, { loadEmittersPluginSimple }, { loadTrailPlugin }, { options }] await Promise.all([ import(tsparticles/basic/lazy), import(tsparticles/updater-destroy/lazy), import(tsparticles/plugin-emitters/plugin/lazy), import(tsparticles/plugin-trail/lazy), import(./options.js), ]); await Promise.all([ loadBasic(e), loadDestroyUpdater(e), loadEmittersPluginSimple(e), loadTrailPlugin(e), ]); e.pluginManager.addPreset(presetName, options); }); }使用方式与普通入口一致仅引入路径变为tsparticles/preset-fountain/lazy。核心机制拆解fountain 预设默认配置逐项解读Fountain 喷泉效果的全部秘密都封装在 presets/fountain/src/options.ts 中。下面按功能模块逐项解读这份默认配置帮助你理解每个参数的实际作用也为后续定制提供依据。全局基础配置export const options: ISourceOptions { fpsLimit: 120, detectRetina: true, background: { color: #fff, }, // ... };fpsLimit: 120限制动画帧率上限为 120 FPS避免高性能设备上不必要的渲染开销这一默认值同样体现在 CHANGELOG.md 中 v2.0.0-beta.4 记录的updated fpsLimit default value to 120变更detectRetina: true开启视网膜屏幕检测在高 DPI 屏幕上自动按设备像素比缩放画布保证粒子清晰background.color: #fff白色背景这也是示例图中粒子在纯白背景上格外鲜艳的原因。粒子外观多彩圆形 彩色画笔填充particles: { paint: { fill: { color: { value: [#3998D0, #2EB6AF, #A9BD33, #FEC73B, #F89930, #F45623, #D62E32, #EB586E, #9952CF], }, enable: true, }, }, opacity: { value: 0.5, }, size: { value: { min: 10, max: 20, }, }, // ... }paint.fill.enable: true配合 9 色数组让粒子在绘制时从这组颜色中取值填充。这组颜色横跨蓝#3998D0、青#2EB6AF、黄绿#A9BD33、黄#FEC73B、橙#F89930、#F45623、红#D62E32、粉#EB586E、紫#9952CF对应 engine/src/Options/Classes/Particles/Paint.ts 中实现的 Paint 选项类opacity.value: 0.5粒子半透明叠加 trail 拖尾后更有水流的通透感size.value: { min: 10, max: 20 }粒子直径在 10~20px 之间随机取值形成大小不一的喷泉水珠。粒子数量与生命周期number: { value: 0, }, destroy: { mode: split, split: { count: 2, factor: { value: { min: 1.1, max: 2 }, }, rate: { value: { min: 2, max: 3 }, }, }, },number.value: 0初始粒子数为 0所有粒子都由 emitter 动态生成符合喷泉的持续喷射语义destroy.mode: split粒子在满足销毁条件时执行分裂而不是直接消失。分裂配置为每个粒子分裂出count: 2个子粒子子粒子尺寸为原粒子的 1.1~2 倍factor分裂速率范围为 2~3rate。这套分裂逻辑由 updaters/destroy 模块实现入口见 updaters/destroy/src/DestroyUpdater.ts 中的split工具函数与DestroyUpdater类。运动重力、速度与触底行为move: { enable: true, gravity: { enable: true, maxSpeed: 50, }, speed: { min: 10, max: 20, }, direction: MoveDirection.none, random: false, straight: false, outModes: { bottom: OutMode.split, default: OutMode.bounce, top: OutMode.none, }, },gravity.enable: true且maxSpeed: 50开启重力模拟粒子的下落速度上限为 50模拟喷泉回落speed: { min: 10, max: 20 }粒子初始运动速度在 10~20 之间随机决定喷泉喷出的力度outModes.bottom: OutMode.split这是喷泉效果的关键——粒子触底离开画布底部时触发分裂结合上面的 destroy 配置实现水花破碎OutMode枚举定义在 engine/src/Enums/Modes/OutMode.ts 中包括bounce反弹、none无操作、out移出、destroy销毁和split分裂五种取值outModes.default: OutMode.bounce与outModes.top: OutMode.none粒子在画布内反弹、顶部不做处理保证喷泉粒子主要在底部区域活动。发射器Emitter喷泉口emitters: { direction: MoveDirection.top, life: { count: 0, duration: 0.15, delay: 3, }, rate: { delay: 0.1, quantity: 5, }, size: { width: 0, height: 0, }, },direction: MoveDirection.top粒子朝顶部方向喷射形成向上的水柱life.count: 0发射器无限循环、永不停止duration: 0.15为每次喷射的持续时间delay: 3为轮次间隔rate.delay: 0.1秒 rate.quantity: 5每 0.1 秒发射 5 个粒子决定喷泉的水量size: { width: 0, height: 0 }发射器为点状所有粒子从同一泉眼位置喷出这也是示例图中粒子呈放射状扩散的原因。拖尾Trail水流质感trail: { enable: true, fill: { color: #fff, }, length: 3, },trail.enable: true开启拖尾效果粒子运动路径会保留短暂的残影fill.color: #fff拖尾用白色填充配合白色背景形成擦除感让残影逐渐淡出length: 3拖尾长度为 3 帧粒子划过之后留下约 3 帧的轨迹把离散的圆点连成流动的水柱线条。常用定制改造喷泉的颜色、形状与行为README.md 的 Customization 章节明确说明预设的所有选项都可以像标准 tsParticles 配置一样被覆盖。加载预设后你可以在options中覆盖任何属性。更换粒子形状tsParticles.load({ id: tsparticles, options: { particles: { shape: { type: square, // 从 v2 开始需要额外加载 square shape 脚本 }, }, preset: fountain, }, });如 README 所述上述示例会把默认的圆形粒子替换为方形。注意注释中的关键提示从 v2 开始更换 shape 需要加载对应的 shape 包例如tsparticles/shape-square否则形状不会生效。调整喷泉颜色与水量覆盖paint.fill.color可以更换整套配色覆盖emitters.rate可以调整喷水量tsParticles.load({ id: tsparticles, options: { particles: { paint: { fill: { color: { value: [#FF6B6B, #4ECDC4, #45B7D1], }, }, }, }, emitters: { rate: { delay: 0.05, // 更快的喷射频率 quantity: 10, // 每次喷出更多粒子 }, }, preset: fountain, }, });关闭分裂或改为反弹如果不需要触地破碎可以把outModes.bottom从OutMode.split改为OutMode.bounce粒子触底后反弹而非分裂tsParticles.load({ id: tsparticles, options: { particles: { move: { outModes: { bottom: bounce, }, }, }, preset: fountain, }, });组件库中的使用如果你使用 React、Vue、Angular、Svelte 等 tsParticles 组件库README.md 说明只需在组件库中调用loadFountainPreset代替loadFull、loadSlim等函数即可上文所有 options 写法对全部组件库同样有效。常见问题与注意事项README.md 的 Common pitfalls 章节列举了三个最容易踩的坑在loadFountainPreset(tsParticles)之前调用tsParticles.load(...)预设尚未注册preset: fountain无法解析效果不会出现更换粒子形状却未加载对应的 shape 包从 v2 起形状是懒加载的漏装包会导致新形状不生效见上文更换粒子形状示例的注释覆盖emitters配置会破坏喷泉默认行为喷泉效果依赖 emitter 持续发射粒子如果你在自定义配置中整体替换了emitters对象默认的喷射方向、频率与泉眼位置都会被覆盖喷泉可能变成普通粒子效果。版本演进从 CHANGELOG 看 Fountain 预设的迭代presets/fountain/CHANGELOG.md 记录了该预设自 2020 年以来的完整演进历史对理解其架构变化很有价值初期1.3.0-beta.02020-10-02预设诞生首个 feature 是added collisions to fountain preset为喷泉粒子加入碰撞v2 重构期2021-2022经历多次架构级变更——splitting engine from slim and full bundles引擎与 bundle 拆分、created and implemented move pluginsmove 插件化、async presets异步预设、fixed fountain presets修复喷泉预设以及 v2.0.0-beta.4 将fpsLimit默认值更新为 120v3 期2023-2024changed bundles loading method, no more preloading plugins改为不再预加载插件的新加载方式并新增 squares 等预设v4 期2026进入 4.0.0 稳定版本线期间修复了 eslint 配置与循环依赖4.2.0、bundle 导出4.1.2、部分网站页面损坏4.3.2等问题。值得注意的细节v2.3.0 的 feature created destroy updater, moved all particles destroy (split and similar) code from engine 正是当前destroy.mode: split配置由独立tsparticles/updater-destroy包提供的来源——这也解释了为什么 README 的依赖表中会专门列出该包。关联资源预设完整源码与默认配置presets/fountain/src默认配置实现presets/fountain/src/options.ts预设注册与插件组合presets/fountain/src/index.ts懒加载入口presets/fountain/src/index.lazy.ts官方 READMEpresets/fountain/README.md分裂/销毁更新器实现updaters/destroyOutMode 枚举定义engine/src/Enums/Modes/OutMode.ts版本演进记录presets/fountain/CHANGELOG.md【免费下载链接】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 Fountain 预设实战指南：用喷泉粒子效果为网页增添动态背景
tsParticles Fountain 预设实战指南用喷泉粒子效果为网页增添动态背景【免费下载链接】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/preset-fountain预设presets/fountain展开讲解如何用最少的配置在网页中实现彩色粒子喷泉效果——粒子从喷泉口向上喷出、受重力回落、撞击地面后分裂破碎。读完本文你将掌握 Fountain 预设的安装方式、预设加载顺序、内置粒子行为与颜色配置的底层实现以及如何基于 options.ts 默认配置做二次定制。Fountain 预设是什么根据 presets/fountain/README.md 的定义Fountain 预设是 tsParticles 的一个官方预设用于创建随机位置下落、撞击地面时破碎的彩色粒子效果视觉上类似真实的喷泉或水花飞溅。它不是一个独立的引擎而是在 tsParticles 引擎之上打包了一组插件与更新器封装成一套开箱即用的完整配置。从 presets/fountain/package.json 可以看到其包名为tsparticles/preset-fountain描述为tsParticles preset for creating water fountain-like particle spray effects当前仓库内的版本为 4.3.3采用 MIT 协议通过 pnpm workspace 与仓库内其他包共享源码。预设依赖的模块与各自职责Fountain 预设并非凭空实现喷泉效果而是组合了多个底层模块见 README.md 的 Dependencies 表格依赖关系同样反映在 package.json 的dependencies字段中依赖包在预设中的角色tsparticles/basic预设使用的基础运行时 bundle提供核心粒子能力tsparticles/enginetsParticles 引擎与预设注册机制tsparticles/plugin-emitters从可配置的发射器emitter中持续产生粒子tsparticles/plugin-trail添加持久的 canvas 拖尾trail渲染形成水流轨迹tsparticles/updater-destroy在粒子生命周期结束时将其销毁本预设中用于分裂这一组合在源码中有直接印证。查看 presets/fountain/src/index.ts 的loadFountainPreset实现export async function loadFountainPreset(engine: Engine): Promisevoid { await engine.pluginManager.register(async e { await Promise.all([ loadBasic(e), loadDestroyUpdater(e), loadEmittersPluginSimple(e), loadTrailPlugin(e), ]); e.pluginManager.addPreset(presetName, options); }); }该函数依次把 basic bundle、destroy 更新器、emitters 插件简化版和 trail 插件注册进引擎最后通过e.pluginManager.addPreset(fountain, options)将内置配置注册为名为fountain的预设。这正是 README 中Quick checklist第 2 步要求在使用前调用loadFountainPreset(tsParticles)的原因——预设的注册必须发生在tsParticles.load(...)之前。喷泉效果的模块协作关系README.md 末尾用 mermaid 图描述了 Fountain 预设的模块依赖结构tsParticles Basic bundle 是基础Emitters、Interactivity、Trail 插件建立在 Basic 之上Destroy 更新器建立在 Basic 之上最终 Fountain 预设由 Basic、Emitters、Trail 与 Destroy 组合而成。从效果实现看这套架构的职责划分非常清晰Emitters 插件负责喷泉口——在画面底部持续发射粒子move 重力配置让粒子在上升后受重力回落模拟喷泉水柱的抛物线轨迹OutMode.split 与 Destroy 更新器让粒子在触底时分裂成多个小粒子模拟水花破碎Trail 插件为每个粒子留下短暂拖尾让喷泉水流看起来连贯、有水柱的质感。快速上手安装与最小使用按照 README.md 的 Quick checklist使用 Fountain 预设只需三步安装tsparticles/engine或直接使用下方 CDN bundle在tsParticles.load(...)之前调用loadFountainPreset(tsParticles)在配置中设置preset: fountain。方式一CDN 直接引入Vanilla JS / jQueryscript srchttps://cdn.jsdelivr.net/npm/tsparticles/preset-fountain4/tsparticles.preset.fountain.bundle.min.js/script该 bundle 由 presets/fountain/src/bundle.ts 构建而来它会同时向globalThis暴露loadFountainPreset与tsParticles两个全局对象因此引入脚本后即可直接使用。方式二npm 安装 ES Modulenpm install tsparticles/engine tsparticles/preset-fountain最小示例代码无论哪种引入方式初始化逻辑都相同来自 README.md 的 Usage 示例(async () { await loadFountainPreset(tsParticles); await tsParticles.load({ id: tsparticles, options: { preset: fountain, }, }); })();只配置preset: fountain引擎就会自动应用 options.ts 中封装的整套喷泉配置无需手动编写任何粒子行为参数。懒加载lazy入口如果你的项目关心首屏包体积可以改用懒加载入口。仓库提供了单独的 presets/fountain/src/index.lazy.ts它在运行时才通过动态import()加载tsparticles/basic/lazy、tsparticles/updater-destroy/lazy、tsparticles/plugin-emitters/plugin/lazy等子路径模块并在 package.json 的exports字段中暴露为tsparticles/preset-fountain/lazy。对应代码export async function loadFountainPreset(engine: Engine): Promisevoid { await engine.pluginManager.register(async e { const [{ loadBasic }, { loadDestroyUpdater }, { loadEmittersPluginSimple }, { loadTrailPlugin }, { options }] await Promise.all([ import(tsparticles/basic/lazy), import(tsparticles/updater-destroy/lazy), import(tsparticles/plugin-emitters/plugin/lazy), import(tsparticles/plugin-trail/lazy), import(./options.js), ]); await Promise.all([ loadBasic(e), loadDestroyUpdater(e), loadEmittersPluginSimple(e), loadTrailPlugin(e), ]); e.pluginManager.addPreset(presetName, options); }); }使用方式与普通入口一致仅引入路径变为tsparticles/preset-fountain/lazy。核心机制拆解fountain 预设默认配置逐项解读Fountain 喷泉效果的全部秘密都封装在 presets/fountain/src/options.ts 中。下面按功能模块逐项解读这份默认配置帮助你理解每个参数的实际作用也为后续定制提供依据。全局基础配置export const options: ISourceOptions { fpsLimit: 120, detectRetina: true, background: { color: #fff, }, // ... };fpsLimit: 120限制动画帧率上限为 120 FPS避免高性能设备上不必要的渲染开销这一默认值同样体现在 CHANGELOG.md 中 v2.0.0-beta.4 记录的updated fpsLimit default value to 120变更detectRetina: true开启视网膜屏幕检测在高 DPI 屏幕上自动按设备像素比缩放画布保证粒子清晰background.color: #fff白色背景这也是示例图中粒子在纯白背景上格外鲜艳的原因。粒子外观多彩圆形 彩色画笔填充particles: { paint: { fill: { color: { value: [#3998D0, #2EB6AF, #A9BD33, #FEC73B, #F89930, #F45623, #D62E32, #EB586E, #9952CF], }, enable: true, }, }, opacity: { value: 0.5, }, size: { value: { min: 10, max: 20, }, }, // ... }paint.fill.enable: true配合 9 色数组让粒子在绘制时从这组颜色中取值填充。这组颜色横跨蓝#3998D0、青#2EB6AF、黄绿#A9BD33、黄#FEC73B、橙#F89930、#F45623、红#D62E32、粉#EB586E、紫#9952CF对应 engine/src/Options/Classes/Particles/Paint.ts 中实现的 Paint 选项类opacity.value: 0.5粒子半透明叠加 trail 拖尾后更有水流的通透感size.value: { min: 10, max: 20 }粒子直径在 10~20px 之间随机取值形成大小不一的喷泉水珠。粒子数量与生命周期number: { value: 0, }, destroy: { mode: split, split: { count: 2, factor: { value: { min: 1.1, max: 2 }, }, rate: { value: { min: 2, max: 3 }, }, }, },number.value: 0初始粒子数为 0所有粒子都由 emitter 动态生成符合喷泉的持续喷射语义destroy.mode: split粒子在满足销毁条件时执行分裂而不是直接消失。分裂配置为每个粒子分裂出count: 2个子粒子子粒子尺寸为原粒子的 1.1~2 倍factor分裂速率范围为 2~3rate。这套分裂逻辑由 updaters/destroy 模块实现入口见 updaters/destroy/src/DestroyUpdater.ts 中的split工具函数与DestroyUpdater类。运动重力、速度与触底行为move: { enable: true, gravity: { enable: true, maxSpeed: 50, }, speed: { min: 10, max: 20, }, direction: MoveDirection.none, random: false, straight: false, outModes: { bottom: OutMode.split, default: OutMode.bounce, top: OutMode.none, }, },gravity.enable: true且maxSpeed: 50开启重力模拟粒子的下落速度上限为 50模拟喷泉回落speed: { min: 10, max: 20 }粒子初始运动速度在 10~20 之间随机决定喷泉喷出的力度outModes.bottom: OutMode.split这是喷泉效果的关键——粒子触底离开画布底部时触发分裂结合上面的 destroy 配置实现水花破碎OutMode枚举定义在 engine/src/Enums/Modes/OutMode.ts 中包括bounce反弹、none无操作、out移出、destroy销毁和split分裂五种取值outModes.default: OutMode.bounce与outModes.top: OutMode.none粒子在画布内反弹、顶部不做处理保证喷泉粒子主要在底部区域活动。发射器Emitter喷泉口emitters: { direction: MoveDirection.top, life: { count: 0, duration: 0.15, delay: 3, }, rate: { delay: 0.1, quantity: 5, }, size: { width: 0, height: 0, }, },direction: MoveDirection.top粒子朝顶部方向喷射形成向上的水柱life.count: 0发射器无限循环、永不停止duration: 0.15为每次喷射的持续时间delay: 3为轮次间隔rate.delay: 0.1秒 rate.quantity: 5每 0.1 秒发射 5 个粒子决定喷泉的水量size: { width: 0, height: 0 }发射器为点状所有粒子从同一泉眼位置喷出这也是示例图中粒子呈放射状扩散的原因。拖尾Trail水流质感trail: { enable: true, fill: { color: #fff, }, length: 3, },trail.enable: true开启拖尾效果粒子运动路径会保留短暂的残影fill.color: #fff拖尾用白色填充配合白色背景形成擦除感让残影逐渐淡出length: 3拖尾长度为 3 帧粒子划过之后留下约 3 帧的轨迹把离散的圆点连成流动的水柱线条。常用定制改造喷泉的颜色、形状与行为README.md 的 Customization 章节明确说明预设的所有选项都可以像标准 tsParticles 配置一样被覆盖。加载预设后你可以在options中覆盖任何属性。更换粒子形状tsParticles.load({ id: tsparticles, options: { particles: { shape: { type: square, // 从 v2 开始需要额外加载 square shape 脚本 }, }, preset: fountain, }, });如 README 所述上述示例会把默认的圆形粒子替换为方形。注意注释中的关键提示从 v2 开始更换 shape 需要加载对应的 shape 包例如tsparticles/shape-square否则形状不会生效。调整喷泉颜色与水量覆盖paint.fill.color可以更换整套配色覆盖emitters.rate可以调整喷水量tsParticles.load({ id: tsparticles, options: { particles: { paint: { fill: { color: { value: [#FF6B6B, #4ECDC4, #45B7D1], }, }, }, }, emitters: { rate: { delay: 0.05, // 更快的喷射频率 quantity: 10, // 每次喷出更多粒子 }, }, preset: fountain, }, });关闭分裂或改为反弹如果不需要触地破碎可以把outModes.bottom从OutMode.split改为OutMode.bounce粒子触底后反弹而非分裂tsParticles.load({ id: tsparticles, options: { particles: { move: { outModes: { bottom: bounce, }, }, }, preset: fountain, }, });组件库中的使用如果你使用 React、Vue、Angular、Svelte 等 tsParticles 组件库README.md 说明只需在组件库中调用loadFountainPreset代替loadFull、loadSlim等函数即可上文所有 options 写法对全部组件库同样有效。常见问题与注意事项README.md 的 Common pitfalls 章节列举了三个最容易踩的坑在loadFountainPreset(tsParticles)之前调用tsParticles.load(...)预设尚未注册preset: fountain无法解析效果不会出现更换粒子形状却未加载对应的 shape 包从 v2 起形状是懒加载的漏装包会导致新形状不生效见上文更换粒子形状示例的注释覆盖emitters配置会破坏喷泉默认行为喷泉效果依赖 emitter 持续发射粒子如果你在自定义配置中整体替换了emitters对象默认的喷射方向、频率与泉眼位置都会被覆盖喷泉可能变成普通粒子效果。版本演进从 CHANGELOG 看 Fountain 预设的迭代presets/fountain/CHANGELOG.md 记录了该预设自 2020 年以来的完整演进历史对理解其架构变化很有价值初期1.3.0-beta.02020-10-02预设诞生首个 feature 是added collisions to fountain preset为喷泉粒子加入碰撞v2 重构期2021-2022经历多次架构级变更——splitting engine from slim and full bundles引擎与 bundle 拆分、created and implemented move pluginsmove 插件化、async presets异步预设、fixed fountain presets修复喷泉预设以及 v2.0.0-beta.4 将fpsLimit默认值更新为 120v3 期2023-2024changed bundles loading method, no more preloading plugins改为不再预加载插件的新加载方式并新增 squares 等预设v4 期2026进入 4.0.0 稳定版本线期间修复了 eslint 配置与循环依赖4.2.0、bundle 导出4.1.2、部分网站页面损坏4.3.2等问题。值得注意的细节v2.3.0 的 feature created destroy updater, moved all particles destroy (split and similar) code from engine 正是当前destroy.mode: split配置由独立tsparticles/updater-destroy包提供的来源——这也解释了为什么 README 的依赖表中会专门列出该包。关联资源预设完整源码与默认配置presets/fountain/src默认配置实现presets/fountain/src/options.ts预设注册与插件组合presets/fountain/src/index.ts懒加载入口presets/fountain/src/index.lazy.ts官方 READMEpresets/fountain/README.md分裂/销毁更新器实现updaters/destroyOutMode 枚举定义engine/src/Enums/Modes/OutMode.ts版本演进记录presets/fountain/CHANGELOG.md【免费下载链接】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），仅供参考