tsParticles 特效插件Effect Plugins完全指南bubble / filter / particles / shadow / trail 五种效果的配置与源码原理【免费下载链接】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本指南以 markdown/Options/Plugins/Effects.md 为主体系统讲解 tsParticles 特效系统的概念、五种官方特效包bubble、filter、particles、shadow、trail的加载方式、配置方法及其底层渲染实现。读完本文你将掌握通过particles.effect.type启用特效、为每种特效编写particles.effect.options.effectName专属参数并理解这些特效在引擎渲染管线中如何通过drawBefore/drawAfter钩子生效。什么是 tsParticles 特效系统tsParticles 的特效Effect系统是一套独立于形状Shape系统的粒子绘制扩展机制。普通形状circle、square、star 等决定粒子长什么样而特效则是在粒子的基础绘制之上叠加额外的视觉处理或行为逻辑。仓库中的 effects/ 目录存放了全部官方特效包每个特效包都是一个独立的 npm 包通过注册一个特效名称供配置引用。该名称在配置中的particles.effect.type中使用。从源码看特效通过pluginManager.addEffect(name, factory)注册为插件例如 effects/bubble/src/index.ts 中的export async function loadBubbleEffect(engine: Engine): Promisevoid { engine.checkVersion(__VERSION__); await engine.pluginManager.register(e { e.pluginManager.addEffect(bubble, () { return Promise.resolve(new BubbleDrawer()); }); }); }官方特效包一览当前仓库提供以下 5 个特效包与 markdown/Options/Plugins/Effects.md 表格一致包名特效名称effect.type功能tsparticles/effect-bubblebubble气泡/气球高光特效tsparticles/effect-filterfilter对粒子应用 CSS filter 滤镜tsparticles/effect-particlesparticles粒子嵌套粒子持续发射子粒子tsparticles/effect-shadowshadow粒子投影drop shadowtsparticles/effect-trailtrail运动拖尾特效每个包的目录结构一致包含绘制器源码与配套的package.json、rollup.config.js、tsconfig.*.json等构建配置。例如bubble包的核心实现位于 effects/bubble/src/BubbleDrawer.tsfilter包则由 effects/filter/src/FilterDrawer.ts、effects/filter/src/FilterParticle.ts 与 effects/filter/src/IFilterData.ts 组成。基础用法启用特效特效的启用非常简单只需在配置中设置particles.effect.type为对应特效名称{ particles: { effect: { type: bubble } } }启用前需要先加载对应的特效包插件以bubble为例import { tsParticles } from tsparticles/engine; import { loadBubbleEffect } from tsparticles/effect-bubble; await loadBubbleEffect(tsParticles);type支持字符串或字符串数组。根据引擎中 Effect 类 的定义type: SingleOrMultiplestring默认值为[]这意味着可以同时指定多个特效引擎会按数组顺序依次应用。该属性通过loadProperty(this, type, data.type)加载options则通过deepExtend与默认值深合并因此配置中未提供的字段会保留引擎默认值。通用特效配置particles.effect在深入每种特效之前先明确所有特效共享的通用配置结构。这由 markdown/Options/Particles/Effect.md 定义对应引擎中的Effect类属性类型默认值说明typestring/string[][]特效名称或数组用于标识由哪个特效实现来解释optionsoptionsShapeData{}按特效名称区分的专属配置对象每个特效可定义自己的数据载荷closebooleantrue特效路径是否闭合对填充型形状有用开放路径设为false从 Effect 类的 doLoad 实现 可以看到核心行为options是一张以特效名为 key 的映射表每个特效名对应一组IShapeValues数据加载配置时引擎对options中的每一项执行deepExtend(this.options[effect] ?? {}, item)将用户传入的配置与既有默认值深合并而不是整体替换最终通过type字段选择由哪个特效实现来消费options载荷。通用配置示例来自原文档{ particles: { effect: { type: star, options: { star: { points: 5, innerRadius: 0.4 } }, close: true } } }每种特效的专属参数都放在particles.effect.options.effectName下下面逐一展开。五种特效的专属配置与源码原理1. bubble —— 气泡高光bubble特效为粒子绘制一个半透明白色的高光弧模拟气泡/气球的立体质感。它在粒子渲染之后执行drawAfter完整实现在 effects/bubble/src/BubbleDrawer.tsconst bubbleFactor 3; drawAfter(data: IShapeDrawData): void { const { context, radius } data, bubbleRadius radius / bubbleFactor; context.beginPath(); context.arc(bubbleRadius, -bubbleRadius, bubbleRadius, defaultAngle, doublePI, false); context.closePath(); context.fillStyle #fff9; context.fill(); }从源码看高光圆半径取粒子半径的1/3bubbleFactor 3圆心位于粒子左上象限的偏移处填充色为固定值#fff9白色、约 60% 透明度。该特效无需任何专属 options直接设置type: bubble即可。2. filter —— CSS 滤镜filter特效在粒子渲染之前drawBefore对 Canvas 上下文设置context.filter渲染后drawAfter执行context.restore()还原。它支持标准的 CSS filter 全部常用函数配置项定义在 effects/filter/src/IFilterData.ts{ particles: { effect: { type: filter, options: { filter: { blur: 2, brightness: 1.2, contrast: 1.1, grayscale: 0, hueRotate: 90, invert: 0, opacity: 0.8, saturate: 1.5, sepia: 0.2, dropShadow: 4px 4px 8px rgba(0,0,0,0.5) } } } } }配置字段与 CSS filter 函数一一对应源码见 FilterDrawer.drawBefore字段类型生成的 CSS 表达式说明blurnumber/stringblur(...)高斯模糊数字自动追加px也支持直接传字符串brightnessnumberbrightness(...)亮度如1.2表示 120%contrastnumbercontrast(...)对比度dropShadowstringdrop-shadow(...)投影直接传完整 CSS 值grayscalenumbergrayscale(...)灰度hueRotatenumber/stringhue-rotate(...)色相旋转数字自动追加deginvertnumberinvert(...)反相opacitynumberopacity(...)不透明度saturatenumbersaturate(...)饱和度sepianumbersepia(...)棕褐色调urlstringurl(...)SVG 滤镜引用初始化阶段FilterDrawer.particleInit 会把effectData中的字段逐一拷贝到粒子的扩展属性如particle.filterBlur、particle.filterBrightness粒子类型定义见 FilterParticle.ts。所有数值型滤镜都按原值直接拼进 filter 字符串CSS 会将1.2理解为 120%未配置的字段会被跳过最终多个滤镜函数以空格连接并trim()。3. particles —— 粒子发射器particles特效让一个粒子在其生命周期内持续发射新的子粒子子粒子的外观由独立的particles配置决定非常适合制作母体粒子分裂/喷射的嵌套效果。配置结构定义在 effects/particles/src/ParticlesDrawer.ts{ particles: { effect: { type: particles, options: { particles: { spawn: { rate: { delay: 500, quantity: 2 }, particles: { shape: { type: circle }, size: { value: 2 } } } } } } } }参数说明spawn.rate.delay两次发射之间的间隔毫秒RangeValue类型支持数值或{ min, max }区间spawn.rate.quantity每次发射的子粒子数量同样支持区间spawn.particles子粒子使用的完整IParticlesOptions配置通过deepExtend与空对象合并后传给container.particles.addParticle(pos, pOptions)。从 particleInit 可以看到初始化逻辑发射间隔delay与数量quantity通过getRangeValue解析支持区间随机delay默认值为1秒若配置值小于等于 0 则回退到默认值最终换算成毫秒并写入particlesNextSpawn。渲染阶段 drawAfter 使用performance.now()计时到达particlesNextSpawn时刻即以当前粒子位置为原点批量addParticle生成子粒子。4. shadow —— 粒子投影shadow特效在粒子渲染之前对 Canvas 上下文设置shadowBlur、shadowColor、shadowOffsetX/Y渲染后restore()还原为粒子添加柔和投影。配置项与实现分别见 effects/shadow/src/ShadowDrawer.ts 与 particleInit{ particles: { effect: { type: shadow, options: { shadow: { blur: 10, color: #000000, offset: { x: 3, y: 3 } } } } } }参数说明字段类型默认值说明blurnumber0投影模糊半径colorIOptionsColor未配置投影颜色支持十六进制、RGB、随机色等标准颜色写法通过rangeColorToRgb解析为 RGBoffsetICoordinates{ x: 0, y: 0 }originPoint投影偏移量注意源码中drawBefore首先检查shadowColor是否存在若未配置颜色则直接返回不产生任何投影效果。shadowColor的解析发生在particleInit通过OptionsColor.create创建后经rangeColorToRgb(this.#pluginManager, shadowColor)转换为 RGB 值。5. trail —— 运动拖尾trail特效为运动中的粒子绘制一条平滑的拖尾是五种特效中实现最复杂的它维护每个粒子的历史位置数组particle.trail在渲染后用二次贝塞尔曲线quadraticCurveTo把连续的历史步连接成渐变轨迹。配置项定义在 effects/trail/src/TrailDrawer.ts{ particles: { effect: { type: trail, options: { trail: { fade: true, length: 10, maxWidth: 20, minWidth: 2, transform: true } } } } }参数说明RangeValue类型均支持{ min, max }区间随机字段类型默认值说明fadebooleantrue拖尾是否随距离渐隐通过逐段调整globalAlpha实现lengthRangeValue10拖尾长度历史步数上限实际值会乘以retina.pixelRatiomaxWidthRangeValue未配置拖尾最大线宽乘以 pixelRatio 后封顶minWidthRangeValue-1拖尾最小线宽下限transformbooleanfalse是否使用历史步的变换数据a/b/c/d矩阵跟随粒子旋转/缩放从 particleInit 可见fade默认truelength默认10并乘以pixelRatiomaxWidth/minWidth仅在配置了才生效。渲染逻辑drawAfter的关键点每一帧把当前粒子位置、颜色、变换数据 push 进trail数组超出长度上限时从头部splice裁剪从尾到头遍历历史步用相邻三点取中点作为二次贝塞尔曲线的控制点保证曲线平滑线宽随拖尾位置按比例渐变width (i / trailLength) * diameter再与pixelRatio、minWidth比较取最大值若配置了maxWidth则取Math.min封顶fade开启时globalAlpha i / trailLength离粒子越远的段越透明粒子发生warp穿越边界时该历史步会被标记为break绘制时跳过避免拖尾横穿画布。此外该类还实现了isInsideCanvasTrailDrawer.ts把拖尾历史点的范围一并纳入画布边界判定确保拖尾不会被过早裁剪——这也是源码结构上可以推断出的设计意图。加载顺序与依赖关系使用特效前必须先加载对应插件。所有特效包都遵循统一的加载函数命名约定包加载函数tsparticles/effect-bubbleloadBubbleEffect(engine)tsparticles/effect-filterloadFilterEffect(engine)tsparticles/effect-particlesloadParticlesEffect(engine)tsparticles/effect-shadowloadShadowEffect(engine)tsparticles/effect-trailloadTrailEffect(engine)示例一次性加载多个特效import { tsParticles } from tsparticles/engine; import { loadBubbleEffect } from tsparticles/effect-bubble; import { loadTrailEffect } from tsparticles/effect-trail; await loadBubbleEffect(tsParticles); await loadTrailEffect(tsParticles); await tsParticles.load({ particles: { effect: { type: [bubble, trail], options: { trail: { length: 8, fade: true } } } } });每个加载函数内部都会调用engine.checkVersion(__VERSION__)校验引擎版本兼容性再通过pluginManager.addEffect(name, factory)注册。特效包同时提供index.ts完整导出与index.lazy.ts懒加载入口以及浏览器/模块/类型等多套构建产物见各包目录下的tsconfig.browser.json、tsconfig.module.json、rollup.config.js。小结tsParticles 的特效系统为粒子效果提供了形状之上的叠加层bubble与shadow增强单粒子视觉质感filter批量施加 CSS 滤镜trail记录运动历史绘制拖尾particles则把粒子变成可自我繁衍的发射源。所有特效共用 particles.effect 的type/options/close通用结构专属参数统一收纳在particles.effect.options.effectName下且加载时通过deepExtend与默认值深合并。相关文档可在仓库内继续查阅Effect 配置、Particles 根配置、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 特效插件（Effect Plugins）完全指南：bubble / filter / particles / shadow / trail 五种效果的配置与源码原理
tsParticles 特效插件Effect Plugins完全指南bubble / filter / particles / shadow / trail 五种效果的配置与源码原理【免费下载链接】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本指南以 markdown/Options/Plugins/Effects.md 为主体系统讲解 tsParticles 特效系统的概念、五种官方特效包bubble、filter、particles、shadow、trail的加载方式、配置方法及其底层渲染实现。读完本文你将掌握通过particles.effect.type启用特效、为每种特效编写particles.effect.options.effectName专属参数并理解这些特效在引擎渲染管线中如何通过drawBefore/drawAfter钩子生效。什么是 tsParticles 特效系统tsParticles 的特效Effect系统是一套独立于形状Shape系统的粒子绘制扩展机制。普通形状circle、square、star 等决定粒子长什么样而特效则是在粒子的基础绘制之上叠加额外的视觉处理或行为逻辑。仓库中的 effects/ 目录存放了全部官方特效包每个特效包都是一个独立的 npm 包通过注册一个特效名称供配置引用。该名称在配置中的particles.effect.type中使用。从源码看特效通过pluginManager.addEffect(name, factory)注册为插件例如 effects/bubble/src/index.ts 中的export async function loadBubbleEffect(engine: Engine): Promisevoid { engine.checkVersion(__VERSION__); await engine.pluginManager.register(e { e.pluginManager.addEffect(bubble, () { return Promise.resolve(new BubbleDrawer()); }); }); }官方特效包一览当前仓库提供以下 5 个特效包与 markdown/Options/Plugins/Effects.md 表格一致包名特效名称effect.type功能tsparticles/effect-bubblebubble气泡/气球高光特效tsparticles/effect-filterfilter对粒子应用 CSS filter 滤镜tsparticles/effect-particlesparticles粒子嵌套粒子持续发射子粒子tsparticles/effect-shadowshadow粒子投影drop shadowtsparticles/effect-trailtrail运动拖尾特效每个包的目录结构一致包含绘制器源码与配套的package.json、rollup.config.js、tsconfig.*.json等构建配置。例如bubble包的核心实现位于 effects/bubble/src/BubbleDrawer.tsfilter包则由 effects/filter/src/FilterDrawer.ts、effects/filter/src/FilterParticle.ts 与 effects/filter/src/IFilterData.ts 组成。基础用法启用特效特效的启用非常简单只需在配置中设置particles.effect.type为对应特效名称{ particles: { effect: { type: bubble } } }启用前需要先加载对应的特效包插件以bubble为例import { tsParticles } from tsparticles/engine; import { loadBubbleEffect } from tsparticles/effect-bubble; await loadBubbleEffect(tsParticles);type支持字符串或字符串数组。根据引擎中 Effect 类 的定义type: SingleOrMultiplestring默认值为[]这意味着可以同时指定多个特效引擎会按数组顺序依次应用。该属性通过loadProperty(this, type, data.type)加载options则通过deepExtend与默认值深合并因此配置中未提供的字段会保留引擎默认值。通用特效配置particles.effect在深入每种特效之前先明确所有特效共享的通用配置结构。这由 markdown/Options/Particles/Effect.md 定义对应引擎中的Effect类属性类型默认值说明typestring/string[][]特效名称或数组用于标识由哪个特效实现来解释optionsoptionsShapeData{}按特效名称区分的专属配置对象每个特效可定义自己的数据载荷closebooleantrue特效路径是否闭合对填充型形状有用开放路径设为false从 Effect 类的 doLoad 实现 可以看到核心行为options是一张以特效名为 key 的映射表每个特效名对应一组IShapeValues数据加载配置时引擎对options中的每一项执行deepExtend(this.options[effect] ?? {}, item)将用户传入的配置与既有默认值深合并而不是整体替换最终通过type字段选择由哪个特效实现来消费options载荷。通用配置示例来自原文档{ particles: { effect: { type: star, options: { star: { points: 5, innerRadius: 0.4 } }, close: true } } }每种特效的专属参数都放在particles.effect.options.effectName下下面逐一展开。五种特效的专属配置与源码原理1. bubble —— 气泡高光bubble特效为粒子绘制一个半透明白色的高光弧模拟气泡/气球的立体质感。它在粒子渲染之后执行drawAfter完整实现在 effects/bubble/src/BubbleDrawer.tsconst bubbleFactor 3; drawAfter(data: IShapeDrawData): void { const { context, radius } data, bubbleRadius radius / bubbleFactor; context.beginPath(); context.arc(bubbleRadius, -bubbleRadius, bubbleRadius, defaultAngle, doublePI, false); context.closePath(); context.fillStyle #fff9; context.fill(); }从源码看高光圆半径取粒子半径的1/3bubbleFactor 3圆心位于粒子左上象限的偏移处填充色为固定值#fff9白色、约 60% 透明度。该特效无需任何专属 options直接设置type: bubble即可。2. filter —— CSS 滤镜filter特效在粒子渲染之前drawBefore对 Canvas 上下文设置context.filter渲染后drawAfter执行context.restore()还原。它支持标准的 CSS filter 全部常用函数配置项定义在 effects/filter/src/IFilterData.ts{ particles: { effect: { type: filter, options: { filter: { blur: 2, brightness: 1.2, contrast: 1.1, grayscale: 0, hueRotate: 90, invert: 0, opacity: 0.8, saturate: 1.5, sepia: 0.2, dropShadow: 4px 4px 8px rgba(0,0,0,0.5) } } } } }配置字段与 CSS filter 函数一一对应源码见 FilterDrawer.drawBefore字段类型生成的 CSS 表达式说明blurnumber/stringblur(...)高斯模糊数字自动追加px也支持直接传字符串brightnessnumberbrightness(...)亮度如1.2表示 120%contrastnumbercontrast(...)对比度dropShadowstringdrop-shadow(...)投影直接传完整 CSS 值grayscalenumbergrayscale(...)灰度hueRotatenumber/stringhue-rotate(...)色相旋转数字自动追加deginvertnumberinvert(...)反相opacitynumberopacity(...)不透明度saturatenumbersaturate(...)饱和度sepianumbersepia(...)棕褐色调urlstringurl(...)SVG 滤镜引用初始化阶段FilterDrawer.particleInit 会把effectData中的字段逐一拷贝到粒子的扩展属性如particle.filterBlur、particle.filterBrightness粒子类型定义见 FilterParticle.ts。所有数值型滤镜都按原值直接拼进 filter 字符串CSS 会将1.2理解为 120%未配置的字段会被跳过最终多个滤镜函数以空格连接并trim()。3. particles —— 粒子发射器particles特效让一个粒子在其生命周期内持续发射新的子粒子子粒子的外观由独立的particles配置决定非常适合制作母体粒子分裂/喷射的嵌套效果。配置结构定义在 effects/particles/src/ParticlesDrawer.ts{ particles: { effect: { type: particles, options: { particles: { spawn: { rate: { delay: 500, quantity: 2 }, particles: { shape: { type: circle }, size: { value: 2 } } } } } } } }参数说明spawn.rate.delay两次发射之间的间隔毫秒RangeValue类型支持数值或{ min, max }区间spawn.rate.quantity每次发射的子粒子数量同样支持区间spawn.particles子粒子使用的完整IParticlesOptions配置通过deepExtend与空对象合并后传给container.particles.addParticle(pos, pOptions)。从 particleInit 可以看到初始化逻辑发射间隔delay与数量quantity通过getRangeValue解析支持区间随机delay默认值为1秒若配置值小于等于 0 则回退到默认值最终换算成毫秒并写入particlesNextSpawn。渲染阶段 drawAfter 使用performance.now()计时到达particlesNextSpawn时刻即以当前粒子位置为原点批量addParticle生成子粒子。4. shadow —— 粒子投影shadow特效在粒子渲染之前对 Canvas 上下文设置shadowBlur、shadowColor、shadowOffsetX/Y渲染后restore()还原为粒子添加柔和投影。配置项与实现分别见 effects/shadow/src/ShadowDrawer.ts 与 particleInit{ particles: { effect: { type: shadow, options: { shadow: { blur: 10, color: #000000, offset: { x: 3, y: 3 } } } } } }参数说明字段类型默认值说明blurnumber0投影模糊半径colorIOptionsColor未配置投影颜色支持十六进制、RGB、随机色等标准颜色写法通过rangeColorToRgb解析为 RGBoffsetICoordinates{ x: 0, y: 0 }originPoint投影偏移量注意源码中drawBefore首先检查shadowColor是否存在若未配置颜色则直接返回不产生任何投影效果。shadowColor的解析发生在particleInit通过OptionsColor.create创建后经rangeColorToRgb(this.#pluginManager, shadowColor)转换为 RGB 值。5. trail —— 运动拖尾trail特效为运动中的粒子绘制一条平滑的拖尾是五种特效中实现最复杂的它维护每个粒子的历史位置数组particle.trail在渲染后用二次贝塞尔曲线quadraticCurveTo把连续的历史步连接成渐变轨迹。配置项定义在 effects/trail/src/TrailDrawer.ts{ particles: { effect: { type: trail, options: { trail: { fade: true, length: 10, maxWidth: 20, minWidth: 2, transform: true } } } } }参数说明RangeValue类型均支持{ min, max }区间随机字段类型默认值说明fadebooleantrue拖尾是否随距离渐隐通过逐段调整globalAlpha实现lengthRangeValue10拖尾长度历史步数上限实际值会乘以retina.pixelRatiomaxWidthRangeValue未配置拖尾最大线宽乘以 pixelRatio 后封顶minWidthRangeValue-1拖尾最小线宽下限transformbooleanfalse是否使用历史步的变换数据a/b/c/d矩阵跟随粒子旋转/缩放从 particleInit 可见fade默认truelength默认10并乘以pixelRatiomaxWidth/minWidth仅在配置了才生效。渲染逻辑drawAfter的关键点每一帧把当前粒子位置、颜色、变换数据 push 进trail数组超出长度上限时从头部splice裁剪从尾到头遍历历史步用相邻三点取中点作为二次贝塞尔曲线的控制点保证曲线平滑线宽随拖尾位置按比例渐变width (i / trailLength) * diameter再与pixelRatio、minWidth比较取最大值若配置了maxWidth则取Math.min封顶fade开启时globalAlpha i / trailLength离粒子越远的段越透明粒子发生warp穿越边界时该历史步会被标记为break绘制时跳过避免拖尾横穿画布。此外该类还实现了isInsideCanvasTrailDrawer.ts把拖尾历史点的范围一并纳入画布边界判定确保拖尾不会被过早裁剪——这也是源码结构上可以推断出的设计意图。加载顺序与依赖关系使用特效前必须先加载对应插件。所有特效包都遵循统一的加载函数命名约定包加载函数tsparticles/effect-bubbleloadBubbleEffect(engine)tsparticles/effect-filterloadFilterEffect(engine)tsparticles/effect-particlesloadParticlesEffect(engine)tsparticles/effect-shadowloadShadowEffect(engine)tsparticles/effect-trailloadTrailEffect(engine)示例一次性加载多个特效import { tsParticles } from tsparticles/engine; import { loadBubbleEffect } from tsparticles/effect-bubble; import { loadTrailEffect } from tsparticles/effect-trail; await loadBubbleEffect(tsParticles); await loadTrailEffect(tsParticles); await tsParticles.load({ particles: { effect: { type: [bubble, trail], options: { trail: { length: 8, fade: true } } } } });每个加载函数内部都会调用engine.checkVersion(__VERSION__)校验引擎版本兼容性再通过pluginManager.addEffect(name, factory)注册。特效包同时提供index.ts完整导出与index.lazy.ts懒加载入口以及浏览器/模块/类型等多套构建产物见各包目录下的tsconfig.browser.json、tsconfig.module.json、rollup.config.js。小结tsParticles 的特效系统为粒子效果提供了形状之上的叠加层bubble与shadow增强单粒子视觉质感filter批量施加 CSS 滤镜trail记录运动历史绘制拖尾particles则把粒子变成可自我繁衍的发射源。所有特效共用 particles.effect 的type/options/close通用结构专属参数统一收纳在particles.effect.options.effectName下且加载时通过deepExtend与默认值深合并。相关文档可在仓库内继续查阅Effect 配置、Particles 根配置、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），仅供参考