tsParticles 喷泉预设Fountain Preset实战指南从快速接入到源码级参数定制【免费下载链接】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 的 Fountain喷泉预设用于创建随机位置喷出的彩色粒子、落地即破碎的喷泉式粒子效果常作为网页动态背景或页面装饰。本文以仓库内 presets/fountain/README.md 为主线结合 预设源码 与 默认配置完整讲解安装接入、CDN 引入、自定义选项、依赖结构与常见踩坑点读完后你可以在任何 tsParticles 项目中一键复现并深度定制喷泉效果。喷泉预设的核心机制Fountain 预设并非简单让粒子向下掉落而是组合了多个底层能力实现的复合效果。从 默认配置源码 可以还原它的完整工作原理由 Emitters 插件持续喷射粒子粒子初始数量为 0number.value: 0全部由发射器按固定速率生成方向为顶部direction: top每 0.1 秒喷射 5 个重力作用下的抛射运动粒子开启重力gravity.enable: true配合 10~20 的初速度形成向上喷出、受重力回落的抛物线轨迹落地即破碎splitoutModes.bottom设置为split粒子触底后分裂为 2 个碎片碎片以 1.1~2 倍尺寸因子继续下落直到被 Destroy 更新器移除拖尾trail渲染启用trail插件留下长度为 3 的持久拖影强化水流喷射的视觉连续性油漆paint着色填充 9 种预设颜色蓝、青、绿、黄、橙、红、玫红、紫使喷泉色彩缤纷。这些能力的装配由 loadFountainPreset 完成它一次性注册tsparticles/basic基础运行时、updater-destroy销毁更新器、plugin-emitters发射器插件与plugin-trail拖尾插件并将内置options注册为名为fountain的预设。快速开始三步接入官方 README 给出三条必须遵守的步骤安装tsparticles/engine或直接使用下方的 CDN bundle在调用tsParticles.load(...)之前先调用loadFountainPreset(tsParticles)在 options 中设置preset: fountain。CDN / Vanilla JS / jQuery 方式直接引入预构建的 bundle 脚本无需手动装包script srchttps://cdn.jsdelivr.net/npm/tsparticles/preset-fountain4/tsparticles.preset.fountain.bundle.min.js/script脚本加载完成后即可初始化(async () { await loadFountainPreset(tsParticles); await tsParticles.load({ id: tsparticles, options: { preset: fountain, }, }); })();从 bundle 入口源码 可以看到该 bundle 同时把tsParticles引擎实例与loadFountainPreset挂到全局对象上因此浏览器环境中可以直接使用这两个全局变量。npm / 模块化方式使用包管理器安装依赖npm install tsparticles/engine tsparticles/preset-fountain在入口文件中加载并初始化import { tsParticles } from tsparticles/engine; import { loadFountainPreset } from tsparticles/preset-fountain; (async () { await loadFountainPreset(tsParticles); await tsParticles.load({ id: tsparticles, options: { preset: fountain, }, }); })();如果希望进一步压缩首屏体积可以使用懒加载入口tsparticles/preset-fountain/lazy。对应实现见 index.lazy.ts它通过动态import()按需加载 basic、emitters、trail、destroy 等依赖仅在loadFountainPreset真正被调用时才拉取相关代码。默认参数全解析预设的所有默认行为都定义在 options.ts 中。了解这些默认值是后续定制的基础配置项默认值作用fpsLimit120帧率上限particles.number.value0初始粒子数为 0全部由发射器生成particles.bounce.vertical.valuemin: 0.75, max: 0.85粒子触底反弹垂直方向的弹性系数范围particles.paint.fill.color.value9 种颜色数组填充粒子颜色蓝/青/绿/黄/橙/红/玫红/紫enable: true开启particles.size.valuemin: 10, max: 20粒子尺寸范围particles.opacity.value0.5粒子不透明度particles.destroy.modesplit销毁模式为分裂count: 2每粒子分裂 2 个factor为 1.1~2 倍rate为 2~3particles.move.enabletrue开启运动particles.move.gravityenable: true, maxSpeed: 50开启重力最大下落速度 50particles.move.speedmin: 10, max: 20喷射初速度范围particles.move.outModesbottom: split,default: bounce,top: none底部出界分裂、默认反弹、顶部出界不处理detectRetinatrue自动启用 Retina 高分辨率渲染background.color#fff白色背景emitters.directiontop粒子向上喷射emitters.lifecount: 0, duration: 0.15, delay: 3发射器无限循环单次持续 0.15 秒、间隔 3 秒emitters.ratedelay: 0.1, quantity: 5每 0.1 秒发射 5 个粒子emitters.sizewidth: 0, height: 0点状发射源trail.enabletrue开启拖尾trail.fill.color#fff拖尾填充色与背景一致形成渐隐效果trail.length3拖尾长度注意一个值得留意的设计默认particles.number.value为 0说明所有粒子完全由 Emitters 生成这也解释了为什么覆盖emitters配置会直接改变甚至破坏默认喷泉行为详见下文常见陷阱。自定义喷泉效果Fountain 预设完全复用 tsParticles 的标准 options 机制你可以像配置普通 tsParticles 实例一样覆盖任意属性未覆盖的属性继续沿用预设默认值。例如把圆形粒子替换为方形tsParticles.load({ id: tsparticles, options: { particles: { shape: { type: square, // 自 v2 起使用方形需要额外加载 square shape 包 }, }, preset: fountain, }, });预设之外的选项与preset同时存在时两者会合并用户的显式配置优先生效。基于此可以自由调整喷泉的节奏与外观例如修改emitters.rate.delay与emitters.rate.quantity控制喷水密度修改emitters.life.duration与emitters.life.delay控制喷泉的间歇喷射节奏修改particles.move.speed与particles.move.gravity.maxSpeed调整喷射高度与下落速度修改particles.paint.fill.color.value颜色数组切换配色主题修改particles.destroy.split.count、factor、rate改变落地破碎的碎片数量与大小。需要提醒的是覆盖粒子 shape 时必须同时加载对应的 shape 包例如方形需要tsparticles/shape-square否则粒子不会渲染。仓库 shapes 目录中列出了全部可用形状。在框架组件库中使用tsParticles 为 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等提供了现成组件库。使用方式一致在组件初始化处调用loadFountainPreset替代loadFull/loadSlim等函数然后照常传入包含preset: fountain的 options。上文所有 options 写法在各类组件库中同样有效相关组件实现可参考仓库 wrappers 目录下对应框架的源码。依赖关系一览Fountain 预设由以下包组合而成见 package.json 的dependencies包在该预设中的角色仓库内参考tsparticles/basic预设使用的基础运行时 bundlebundles/basic/README.mdtsparticles/enginetsParticles 引擎与预设注册机制engine/README.mdtsparticles/plugin-emitters从可配置发射器喷射粒子plugins/emitterstsparticles/plugin-trail提供持久画布拖尾渲染plugins/trailtsparticles/updater-destroy粒子阶段结束分裂/销毁时移除粒子updaters/destroy从源码看loadFountainPreset内部通过Promise.all并行调用loadBasic、loadDestroyUpdater、loadEmittersPluginSimple、loadTrailPlugin全部完成后再注册预设确保tsParticles.load执行时所需能力都已就绪。这正对应官方 README 强调的必须先调用loadFountainPreset再load这一顺序约束。架构关系图预设、插件、更新器与 bundle 之间的组装关系如下整理自 README 中的结构说明常见陷阱官方 README 明确列出了三个最容易出错的地方结合源码可以进一步理解其根因在loadFountainPreset(tsParticles)之前就调用tsParticles.load(...)由于预设的注册发生在异步的pluginManager.register回调中见 index.ts提前load会因找不到fountain预设而失败或回退到无效果修改粒子 shape 却没有加载对应的 shape 包例如把shape.type改为square却未引入 square 形状模块粒子将不会显示自 v2 起形状与核心分离需要按需加载覆盖emitters配置会替换掉默认喷泉行为因为默认粒子数number.value为 0粒子完全依赖发射器生成改写emitters等于重写整个喷泉的供给逻辑建议在充分理解发射器选项direction、rate、life、size后再做调整。小结Fountain 预设是理解 tsParticles预设 插件 更新器组合机制的一个很好的范例一个看似简单的喷泉效果背后是发射器喷射、重力抛射、落地分裂销毁与拖尾渲染的协同工作。掌握 默认配置 中的每个参数再结合标准 options 覆盖机制就能在几行代码内做出完全符合自己页面气质的喷泉粒子背景。【免费下载链接】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 Preset）实战指南：从快速接入到源码级参数定制
tsParticles 喷泉预设Fountain Preset实战指南从快速接入到源码级参数定制【免费下载链接】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 的 Fountain喷泉预设用于创建随机位置喷出的彩色粒子、落地即破碎的喷泉式粒子效果常作为网页动态背景或页面装饰。本文以仓库内 presets/fountain/README.md 为主线结合 预设源码 与 默认配置完整讲解安装接入、CDN 引入、自定义选项、依赖结构与常见踩坑点读完后你可以在任何 tsParticles 项目中一键复现并深度定制喷泉效果。喷泉预设的核心机制Fountain 预设并非简单让粒子向下掉落而是组合了多个底层能力实现的复合效果。从 默认配置源码 可以还原它的完整工作原理由 Emitters 插件持续喷射粒子粒子初始数量为 0number.value: 0全部由发射器按固定速率生成方向为顶部direction: top每 0.1 秒喷射 5 个重力作用下的抛射运动粒子开启重力gravity.enable: true配合 10~20 的初速度形成向上喷出、受重力回落的抛物线轨迹落地即破碎splitoutModes.bottom设置为split粒子触底后分裂为 2 个碎片碎片以 1.1~2 倍尺寸因子继续下落直到被 Destroy 更新器移除拖尾trail渲染启用trail插件留下长度为 3 的持久拖影强化水流喷射的视觉连续性油漆paint着色填充 9 种预设颜色蓝、青、绿、黄、橙、红、玫红、紫使喷泉色彩缤纷。这些能力的装配由 loadFountainPreset 完成它一次性注册tsparticles/basic基础运行时、updater-destroy销毁更新器、plugin-emitters发射器插件与plugin-trail拖尾插件并将内置options注册为名为fountain的预设。快速开始三步接入官方 README 给出三条必须遵守的步骤安装tsparticles/engine或直接使用下方的 CDN bundle在调用tsParticles.load(...)之前先调用loadFountainPreset(tsParticles)在 options 中设置preset: fountain。CDN / Vanilla JS / jQuery 方式直接引入预构建的 bundle 脚本无需手动装包script srchttps://cdn.jsdelivr.net/npm/tsparticles/preset-fountain4/tsparticles.preset.fountain.bundle.min.js/script脚本加载完成后即可初始化(async () { await loadFountainPreset(tsParticles); await tsParticles.load({ id: tsparticles, options: { preset: fountain, }, }); })();从 bundle 入口源码 可以看到该 bundle 同时把tsParticles引擎实例与loadFountainPreset挂到全局对象上因此浏览器环境中可以直接使用这两个全局变量。npm / 模块化方式使用包管理器安装依赖npm install tsparticles/engine tsparticles/preset-fountain在入口文件中加载并初始化import { tsParticles } from tsparticles/engine; import { loadFountainPreset } from tsparticles/preset-fountain; (async () { await loadFountainPreset(tsParticles); await tsParticles.load({ id: tsparticles, options: { preset: fountain, }, }); })();如果希望进一步压缩首屏体积可以使用懒加载入口tsparticles/preset-fountain/lazy。对应实现见 index.lazy.ts它通过动态import()按需加载 basic、emitters、trail、destroy 等依赖仅在loadFountainPreset真正被调用时才拉取相关代码。默认参数全解析预设的所有默认行为都定义在 options.ts 中。了解这些默认值是后续定制的基础配置项默认值作用fpsLimit120帧率上限particles.number.value0初始粒子数为 0全部由发射器生成particles.bounce.vertical.valuemin: 0.75, max: 0.85粒子触底反弹垂直方向的弹性系数范围particles.paint.fill.color.value9 种颜色数组填充粒子颜色蓝/青/绿/黄/橙/红/玫红/紫enable: true开启particles.size.valuemin: 10, max: 20粒子尺寸范围particles.opacity.value0.5粒子不透明度particles.destroy.modesplit销毁模式为分裂count: 2每粒子分裂 2 个factor为 1.1~2 倍rate为 2~3particles.move.enabletrue开启运动particles.move.gravityenable: true, maxSpeed: 50开启重力最大下落速度 50particles.move.speedmin: 10, max: 20喷射初速度范围particles.move.outModesbottom: split,default: bounce,top: none底部出界分裂、默认反弹、顶部出界不处理detectRetinatrue自动启用 Retina 高分辨率渲染background.color#fff白色背景emitters.directiontop粒子向上喷射emitters.lifecount: 0, duration: 0.15, delay: 3发射器无限循环单次持续 0.15 秒、间隔 3 秒emitters.ratedelay: 0.1, quantity: 5每 0.1 秒发射 5 个粒子emitters.sizewidth: 0, height: 0点状发射源trail.enabletrue开启拖尾trail.fill.color#fff拖尾填充色与背景一致形成渐隐效果trail.length3拖尾长度注意一个值得留意的设计默认particles.number.value为 0说明所有粒子完全由 Emitters 生成这也解释了为什么覆盖emitters配置会直接改变甚至破坏默认喷泉行为详见下文常见陷阱。自定义喷泉效果Fountain 预设完全复用 tsParticles 的标准 options 机制你可以像配置普通 tsParticles 实例一样覆盖任意属性未覆盖的属性继续沿用预设默认值。例如把圆形粒子替换为方形tsParticles.load({ id: tsparticles, options: { particles: { shape: { type: square, // 自 v2 起使用方形需要额外加载 square shape 包 }, }, preset: fountain, }, });预设之外的选项与preset同时存在时两者会合并用户的显式配置优先生效。基于此可以自由调整喷泉的节奏与外观例如修改emitters.rate.delay与emitters.rate.quantity控制喷水密度修改emitters.life.duration与emitters.life.delay控制喷泉的间歇喷射节奏修改particles.move.speed与particles.move.gravity.maxSpeed调整喷射高度与下落速度修改particles.paint.fill.color.value颜色数组切换配色主题修改particles.destroy.split.count、factor、rate改变落地破碎的碎片数量与大小。需要提醒的是覆盖粒子 shape 时必须同时加载对应的 shape 包例如方形需要tsparticles/shape-square否则粒子不会渲染。仓库 shapes 目录中列出了全部可用形状。在框架组件库中使用tsParticles 为 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等提供了现成组件库。使用方式一致在组件初始化处调用loadFountainPreset替代loadFull/loadSlim等函数然后照常传入包含preset: fountain的 options。上文所有 options 写法在各类组件库中同样有效相关组件实现可参考仓库 wrappers 目录下对应框架的源码。依赖关系一览Fountain 预设由以下包组合而成见 package.json 的dependencies包在该预设中的角色仓库内参考tsparticles/basic预设使用的基础运行时 bundlebundles/basic/README.mdtsparticles/enginetsParticles 引擎与预设注册机制engine/README.mdtsparticles/plugin-emitters从可配置发射器喷射粒子plugins/emitterstsparticles/plugin-trail提供持久画布拖尾渲染plugins/trailtsparticles/updater-destroy粒子阶段结束分裂/销毁时移除粒子updaters/destroy从源码看loadFountainPreset内部通过Promise.all并行调用loadBasic、loadDestroyUpdater、loadEmittersPluginSimple、loadTrailPlugin全部完成后再注册预设确保tsParticles.load执行时所需能力都已就绪。这正对应官方 README 强调的必须先调用loadFountainPreset再load这一顺序约束。架构关系图预设、插件、更新器与 bundle 之间的组装关系如下整理自 README 中的结构说明常见陷阱官方 README 明确列出了三个最容易出错的地方结合源码可以进一步理解其根因在loadFountainPreset(tsParticles)之前就调用tsParticles.load(...)由于预设的注册发生在异步的pluginManager.register回调中见 index.ts提前load会因找不到fountain预设而失败或回退到无效果修改粒子 shape 却没有加载对应的 shape 包例如把shape.type改为square却未引入 square 形状模块粒子将不会显示自 v2 起形状与核心分离需要按需加载覆盖emitters配置会替换掉默认喷泉行为因为默认粒子数number.value为 0粒子完全依赖发射器生成改写emitters等于重写整个喷泉的供给逻辑建议在充分理解发射器选项direction、rate、life、size后再做调整。小结Fountain 预设是理解 tsParticles预设 插件 更新器组合机制的一个很好的范例一个看似简单的喷泉效果背后是发射器喷射、重力抛射、落地分裂销毁与拖尾渲染的协同工作。掌握 默认配置 中的每个参数再结合标准 options 覆盖机制就能在几行代码内做出完全符合自己页面气质的喷泉粒子背景。【免费下载链接】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），仅供参考