拓冰网站定制 
tsparticles confetti 彩带特效包全解析从 CHANGELOG 看版本演进、API 设计与实现原理【免费下载链接】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 的tsparticles/confetti是一个开箱即用的彩带confetti特效包它把 tsParticles 引擎、发射器插件、运动插件以及多种形状与更新器打包成一个统一的confettiAPI一条调用即可在页面上触发彩带爆炸、彩带大炮、彩带雨等动画。本文以 bundles/confetti/CHANGELOG.md 的发布记录为时间线骨架结合包内源码、类型定义与 bundles/confetti/README.md完整讲解该包的版本演进、全部配置项、底层实现原理与实战接入方式读完即可独立落地一套可复制的彩带动效。一、confetti bundle 是什么一次打包、一个 APItsparticles/confetti定位是一个聚合式bundle其依赖清单在 bundles/confetti/package.json 中有明确声明核心构成如下引擎与基础tsparticles/engine、tsparticles/basic插件tsparticles/plugin-emitters发射器负责一次性喷出彩带粒子、tsparticles/plugin-motion负责响应prefers-reduced-motion无障碍设置形状cards扑克花色、emoji、heart、image、polygon、square、star更新器life、roll、rotate、tilt、wobble共同驱动彩带的下落、翻转、摇晃与消散。这些依赖的加载发生在doInitPlugins中见 bundles/confetti/src/confetti.ts所有插件通过Promise.all并行注册并用initPromise缓存初始化结果保证多次调用confetti不会重复注册插件。CHANGELOG 中大量条目标注为 Version bump only for package tsparticles/confetti这说明该包是 monorepo 工作区见仓库根目录 pnpm-workspace.yaml中与其他包同步发版的组件之一版本号由 lerna 统一驱动。二、版本演进时间线从诞生到 4.x 新架构CHANGELOG 完整记录了该包自 2.9.0 起的演进可归纳为四个阶段。2.1 诞生与功能奠基2.9.0 ~ 2.10.02023 年2.9.0创建 confetti 与 fireworks 两个 bundle目标是easier use for these features更易用同时引入color与colorOffset选项到 split 选项并在引擎中加入version属性。2.10.0修复 confetti bundle 缺失部分形状的问题issue #4905 相关补全了形状集合关键行为变更彩带消散机制从life duration改为opacity 动画即粒子通过透明度渐隐消亡而非生命周期计时对应 issue #4978在 opacity、size、colors 更新器中实现 delay 选项新增tsparticles/basic与tsparticles/all两个 bundle2.12.0加入 tree shaking 支持与插件加载的 refresh 标志避免实例被重复刷新。2.2 3.x 稳定期2023-20243.0.0-beta.4为tsparticles-confetti选项加入flat 选项扁平彩带模式后面在配置章节详述3.0.0给 trail 效果加入 fade淡出3.2.0新增粒子外部交互并持续改进动态导入dynamic imports3.4.0改变 bundle 加载方式不再预加载插件——这是架构上的重要转折插件改为按需注册3.7.0引擎新增命名颜色插件与 hex 颜色支持修复项集中在Chrome 下异步 rAF 问题、循环依赖检测与动态导入、canvas 尺寸调整resize问题、out modes粒子出界模式问题、fullScreen 激活时的 z-index 样式issue #5458。2.3 4.x 重构与 beta 迭代2025-20264.0.0-alpha.4新增 manual particles 插件4.0.0-alpha.27将particles.color替换为particles.fill使粒子填充配置与particles.stroke保持几乎一致的选项结构——这也是 ConfettiOptions.ts 与 utils.ts 中使用paint.fill.color的原因4.0.0-beta.7改进 split 颜色管理与 offset 处理并重写updateAnimation函数4.1.0新增 ribbons bundle 与 ribbon 形状4.2.0修复部分 eslint 配置与循环依赖4.3.2修复 bundle 导出问题以及 confetti bundle 中的 ticks 计数问题。2.4 关键变更速查表版本类型要点2.9.0Feature创建 confetti / fireworks bundle2.10.0Feature/Fix补全形状消散改为 opacity 动画delay 选项2.12.0Feature新增 basic 与 all bundle3.0.0-beta.4Featureconfetti 选项新增flat3.4.0Featurebundle 改为不再预加载插件3.7.1Fix修复 canvas resize 问题3.8.1Fix修复 fullScreen 激活时的 z-index4.0.0-alpha.27Featureparticles.color→particles.fill4.1.0Feature新增 ribbons bundle 与 ribbon 形状4.3.2Fix修复导出与 ticks 计数问题三、核心 APIconfetti 函数的四种用法包的主入口定义在 bundles/confetti/src/confetti.ts并在 bundles/confetti/src/bundle.ts 中挂载到globalThis.confetti与globalThis.tsParticles注意bundle 入口同时导出引擎而主入口index.ts不导出tsParticles详见 README 的Common pitfalls。3.1confetti(idOrOptions, confettiOptions?)函数签名支持两种形态由 types.ts 中的ConfettiFirstParam决定// 形态一直接传配置对象canvas id 默认为 confetti await confetti({ count: 80, spread: 60 }); // 形态二先传 canvas id再传配置 await confetti(tsparticles, { count: 50, angle: 90, spread: 45 });从源码看当第一个参数是字符串时作为id否则id固定为confetti随后交给setConfetti执行。3.2confetti.create(canvas, options)绑定指定画布当需要把彩带渲染到页面中某个指定canvas元素时使用。confetti.create会读取或写入canvas 的id属性作为动画容器 id并返回一个局部版的 confetti 函数之后调用它无需再传 idconst canvas document.getElementById(my-canvas) as HTMLCanvasElement; const localConfetti await confetti.create(canvas, { count: 30 }); await localConfetti({ spread: 70 }); // 复用同一容器仅更新选项值得注意的实现细节create返回的局部函数在只传配置对象时会复用create时的id与 canvas见 confetti.ts。3.3confetti.init()与confetti.versionconfetti.init()只注册插件、不创建动画适合提前初始化以消除首次触发时的延迟confetti.version暴露当前 bundle 版本号__VERSION__构建期注入可在运行时用于诊断。3.4 全局对象与 CDN 用法加载 bundle 后confetti挂在globalThis上原生 JS 中可直接调用confetti({ count: 60, spread: 55 });四、配置项全解默认值与物理参数映射配置的类型定义在 IConfettiOptions.ts默认值实现在 ConfettiOptions.ts 的构造函数中。全部选项如下选项类型默认值说明countnumber50单次发射的彩带粒子数量anglenumber90发射角度度0 表示向右、90 表示向上spreadnumber45喷射张角度越大扩散越宽startVelocitynumber45初速度源码中乘以系数 3 后作为粒子速度decaynumber0.9速度衰减率越接近 1 衰减越慢、飞得越远gravitynumber1重力倍数乘以 9.81 后作为加速度driftnumber0水平漂移量可正可负ticksnumber200动画执行帧数与 fpsLimit 120 配合计算淡出速度positionobject{ x: 50, y: 50 }发射点位置百分比0-100colorsstring[]7 种默认彩色彩带颜色数组如[#ffffff, #ff0000]shapesstring[][square, circle]形状类型可含 emoji、heart、star 等shapeOptionsobject{}按形状名配置的附加参数如 emoji 字符、polygon 边数scalarnumber1尺寸缩放系数粒子基础尺寸为 5 × scalarzIndexnumber100全屏模式下 canvas 的层叠层级flatbooleanfalse扁平模式关闭旋转/倾斜/滚动/摇摆呈现纸片飘落效果disableForReducedMotionbooleantrue尊重系统减弱动态效果设置命中时禁用动画默认颜色数组为#26ccff、#a25afd、#ff5e7e、#88ff5a、#fcff42、#ffa62d、#ff36ff。4.1 已废弃的兼容别名particleCount→ 请使用countorigin→ 请使用position。ConfettiOptions.load中对两者做了兼容处理origin的值0~1 比例会乘上percentDenominator换算成百分比的position见 ConfettiOptions.ts。4.2 常用效果配置示例import { confetti } from tsparticles/confetti; // 经典彩带爆炸宽扇形、色彩丰富 await confetti({ count: 120, spread: 100, position: { x: 50, y: 50 }, colors: [#26ccff, #a25afd, #ff5e7e, #88ff5a, #fcff42], }); // 彩色纸片雨扁平模式 多形状 低重力 await confetti({ count: 200, flat: true, gravity: 0.8, ticks: 300, shapes: [square, circle, star, heart], position: { x: 50, y: 20 }, });五、源码级原理配置是如何变成粒子动画的配置到动画的转换全部集中在 bundles/confetti/src/utils.ts理解这段代码就等于理解了整个 bundle 的运作方式。5.1setConfetti容器的复用与并发保护setConfettiutils.ts维护一个ids: Mapstring, Container | Promise用new ConfettiOptions().load(options)解析配置若该 id 已有未销毁的容器则走快路径只通过addEmitter追加一个新的发射器动画立刻叠加触发这也是连续调用confetti()不会重置整个场景的原因若容器正在初始化Map 中存的是 Promise则先等待其完成否则创建初始化 Promise 并立刻写入 Map阻塞并发调用避免同一 id 被重复创建容器。5.2convertOptions物理参数到 tsParticles 选项的换算convertOptions 将高层 API 换算为底层ISourceOptions几个关键换算关系speed startVelocity * 3gravity.acceleration gravity * 9.81move.decay 1 - decay因此decay: 0.9对应底层衰减 0.1发射方向direction -angle配合angle.value spread形成扇形喷射outModes.default destroytop none粒子飞出画布即销毁但向上不销毁保证向上喷发的完整轨迹flat: true时旋转角度固定为 0、关闭 rotate/tilt/roll/wobble 动画disableForReducedMotion映射到motion.disable。5.3 ticks 与透明度动画的关系setConfetti中有一个容易被忽略的细节opacitySpeed fpsLimit * 100 / (defaultFps * ticks)其中fpsLimit 120。它把ticks折算成透明度动画的速度实现粒子在ticks帧内由不透明渐隐到完全透明——这正是 2.10.0 中改为 opacity 动画消散在实现层的体现当ticks非有限数或小于等于 0 时opacity 动画被禁用。5.4 发射器配置convertOptions与addEmitter都以emitters配置为核心startCount: count一次性发射数量、life: { duration: 0.1, count: 1 }短生命周期、只发射一次、size: { width: 0, height: 0 }点状发射源发射点坐标即position。六、安装与快速接入6.1 包管理器安装pnpm add tsparticles/confetti # 或 npm install tsparticles/confetti / yarn add tsparticles/confetti安装后包入口的导出结构ESM / CJS / 浏览器 / 类型由exports字段定义并额外提供tsparticles/confetti/lazy子路径package.json对应 index.lazy.ts 的按需加载入口。6.2 TypeScript / ESM 用法import { confetti } from tsparticles/confetti; await confetti({ count: 80, spread: 60, position: { x: 50, y: 50 }, colors: [#ffffff, #ff0000], });6.3 常见踩坑点CDN 场景下在脚本加载完成前调用confetti会导致 undefined不要假设tsparticles/confetti主入口会导出tsParticles需要引擎 API 时请从tsparticles/engine引入TypeScript 中confetti()不带任何参数是不合法的必须使用confetti(options)或confetti(id, options)两种形态之一。七、与预设preset的关系不写配置的彩带除了函数式 bundle仓库还提供了声明式的confetti预设见 presets/confetti/src/index.ts 与 presets/confetti/src/options.ts。预设通过loadConfettiPreset注册一套完整的ISourceOptionspalette 使用confetti调色板、fullScreen.enable: true、emitters.startCount: 50、gravity 9.81、decay 0.1 等适合用配置 JSON驱动场景而 bundle 的confetti()函数则适合事件触发型动效点击按钮、完成支付、达成成就等。两者的底层换算逻辑一致差异仅在调用方式一个面向 API 函数一个面向配置加载。八、延伸阅读完整配置与使用文档bundles/confetti/README.md函数与插件初始化实现bundles/confetti/src/confetti.ts配置解析与默认值bundles/confetti/src/ConfettiOptions.ts、bundles/confetti/src/IConfettiOptions.ts选项到引擎配置的换算bundles/confetti/src/utils.ts声明式预设与配套调色板presets/confetti/src/options.ts、presets/confetti/src/index.ts同仓库中与 confetti 并列的兄弟包还包括 fireworks烟花与 ribbons彩带丝带它们共享同一套 bundle 设计模式理解 confetti 的实现后即可举一反三。【免费下载链接】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 confetti 彩带特效包全解析：从 CHANGELOG 看版本演进、API 设计与实现原理
tsparticles confetti 彩带特效包全解析从 CHANGELOG 看版本演进、API 设计与实现原理【免费下载链接】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 的tsparticles/confetti是一个开箱即用的彩带confetti特效包它把 tsParticles 引擎、发射器插件、运动插件以及多种形状与更新器打包成一个统一的confettiAPI一条调用即可在页面上触发彩带爆炸、彩带大炮、彩带雨等动画。本文以 bundles/confetti/CHANGELOG.md 的发布记录为时间线骨架结合包内源码、类型定义与 bundles/confetti/README.md完整讲解该包的版本演进、全部配置项、底层实现原理与实战接入方式读完即可独立落地一套可复制的彩带动效。一、confetti bundle 是什么一次打包、一个 APItsparticles/confetti定位是一个聚合式bundle其依赖清单在 bundles/confetti/package.json 中有明确声明核心构成如下引擎与基础tsparticles/engine、tsparticles/basic插件tsparticles/plugin-emitters发射器负责一次性喷出彩带粒子、tsparticles/plugin-motion负责响应prefers-reduced-motion无障碍设置形状cards扑克花色、emoji、heart、image、polygon、square、star更新器life、roll、rotate、tilt、wobble共同驱动彩带的下落、翻转、摇晃与消散。这些依赖的加载发生在doInitPlugins中见 bundles/confetti/src/confetti.ts所有插件通过Promise.all并行注册并用initPromise缓存初始化结果保证多次调用confetti不会重复注册插件。CHANGELOG 中大量条目标注为 Version bump only for package tsparticles/confetti这说明该包是 monorepo 工作区见仓库根目录 pnpm-workspace.yaml中与其他包同步发版的组件之一版本号由 lerna 统一驱动。二、版本演进时间线从诞生到 4.x 新架构CHANGELOG 完整记录了该包自 2.9.0 起的演进可归纳为四个阶段。2.1 诞生与功能奠基2.9.0 ~ 2.10.02023 年2.9.0创建 confetti 与 fireworks 两个 bundle目标是easier use for these features更易用同时引入color与colorOffset选项到 split 选项并在引擎中加入version属性。2.10.0修复 confetti bundle 缺失部分形状的问题issue #4905 相关补全了形状集合关键行为变更彩带消散机制从life duration改为opacity 动画即粒子通过透明度渐隐消亡而非生命周期计时对应 issue #4978在 opacity、size、colors 更新器中实现 delay 选项新增tsparticles/basic与tsparticles/all两个 bundle2.12.0加入 tree shaking 支持与插件加载的 refresh 标志避免实例被重复刷新。2.2 3.x 稳定期2023-20243.0.0-beta.4为tsparticles-confetti选项加入flat 选项扁平彩带模式后面在配置章节详述3.0.0给 trail 效果加入 fade淡出3.2.0新增粒子外部交互并持续改进动态导入dynamic imports3.4.0改变 bundle 加载方式不再预加载插件——这是架构上的重要转折插件改为按需注册3.7.0引擎新增命名颜色插件与 hex 颜色支持修复项集中在Chrome 下异步 rAF 问题、循环依赖检测与动态导入、canvas 尺寸调整resize问题、out modes粒子出界模式问题、fullScreen 激活时的 z-index 样式issue #5458。2.3 4.x 重构与 beta 迭代2025-20264.0.0-alpha.4新增 manual particles 插件4.0.0-alpha.27将particles.color替换为particles.fill使粒子填充配置与particles.stroke保持几乎一致的选项结构——这也是 ConfettiOptions.ts 与 utils.ts 中使用paint.fill.color的原因4.0.0-beta.7改进 split 颜色管理与 offset 处理并重写updateAnimation函数4.1.0新增 ribbons bundle 与 ribbon 形状4.2.0修复部分 eslint 配置与循环依赖4.3.2修复 bundle 导出问题以及 confetti bundle 中的 ticks 计数问题。2.4 关键变更速查表版本类型要点2.9.0Feature创建 confetti / fireworks bundle2.10.0Feature/Fix补全形状消散改为 opacity 动画delay 选项2.12.0Feature新增 basic 与 all bundle3.0.0-beta.4Featureconfetti 选项新增flat3.4.0Featurebundle 改为不再预加载插件3.7.1Fix修复 canvas resize 问题3.8.1Fix修复 fullScreen 激活时的 z-index4.0.0-alpha.27Featureparticles.color→particles.fill4.1.0Feature新增 ribbons bundle 与 ribbon 形状4.3.2Fix修复导出与 ticks 计数问题三、核心 APIconfetti 函数的四种用法包的主入口定义在 bundles/confetti/src/confetti.ts并在 bundles/confetti/src/bundle.ts 中挂载到globalThis.confetti与globalThis.tsParticles注意bundle 入口同时导出引擎而主入口index.ts不导出tsParticles详见 README 的Common pitfalls。3.1confetti(idOrOptions, confettiOptions?)函数签名支持两种形态由 types.ts 中的ConfettiFirstParam决定// 形态一直接传配置对象canvas id 默认为 confetti await confetti({ count: 80, spread: 60 }); // 形态二先传 canvas id再传配置 await confetti(tsparticles, { count: 50, angle: 90, spread: 45 });从源码看当第一个参数是字符串时作为id否则id固定为confetti随后交给setConfetti执行。3.2confetti.create(canvas, options)绑定指定画布当需要把彩带渲染到页面中某个指定canvas元素时使用。confetti.create会读取或写入canvas 的id属性作为动画容器 id并返回一个局部版的 confetti 函数之后调用它无需再传 idconst canvas document.getElementById(my-canvas) as HTMLCanvasElement; const localConfetti await confetti.create(canvas, { count: 30 }); await localConfetti({ spread: 70 }); // 复用同一容器仅更新选项值得注意的实现细节create返回的局部函数在只传配置对象时会复用create时的id与 canvas见 confetti.ts。3.3confetti.init()与confetti.versionconfetti.init()只注册插件、不创建动画适合提前初始化以消除首次触发时的延迟confetti.version暴露当前 bundle 版本号__VERSION__构建期注入可在运行时用于诊断。3.4 全局对象与 CDN 用法加载 bundle 后confetti挂在globalThis上原生 JS 中可直接调用confetti({ count: 60, spread: 55 });四、配置项全解默认值与物理参数映射配置的类型定义在 IConfettiOptions.ts默认值实现在 ConfettiOptions.ts 的构造函数中。全部选项如下选项类型默认值说明countnumber50单次发射的彩带粒子数量anglenumber90发射角度度0 表示向右、90 表示向上spreadnumber45喷射张角度越大扩散越宽startVelocitynumber45初速度源码中乘以系数 3 后作为粒子速度decaynumber0.9速度衰减率越接近 1 衰减越慢、飞得越远gravitynumber1重力倍数乘以 9.81 后作为加速度driftnumber0水平漂移量可正可负ticksnumber200动画执行帧数与 fpsLimit 120 配合计算淡出速度positionobject{ x: 50, y: 50 }发射点位置百分比0-100colorsstring[]7 种默认彩色彩带颜色数组如[#ffffff, #ff0000]shapesstring[][square, circle]形状类型可含 emoji、heart、star 等shapeOptionsobject{}按形状名配置的附加参数如 emoji 字符、polygon 边数scalarnumber1尺寸缩放系数粒子基础尺寸为 5 × scalarzIndexnumber100全屏模式下 canvas 的层叠层级flatbooleanfalse扁平模式关闭旋转/倾斜/滚动/摇摆呈现纸片飘落效果disableForReducedMotionbooleantrue尊重系统减弱动态效果设置命中时禁用动画默认颜色数组为#26ccff、#a25afd、#ff5e7e、#88ff5a、#fcff42、#ffa62d、#ff36ff。4.1 已废弃的兼容别名particleCount→ 请使用countorigin→ 请使用position。ConfettiOptions.load中对两者做了兼容处理origin的值0~1 比例会乘上percentDenominator换算成百分比的position见 ConfettiOptions.ts。4.2 常用效果配置示例import { confetti } from tsparticles/confetti; // 经典彩带爆炸宽扇形、色彩丰富 await confetti({ count: 120, spread: 100, position: { x: 50, y: 50 }, colors: [#26ccff, #a25afd, #ff5e7e, #88ff5a, #fcff42], }); // 彩色纸片雨扁平模式 多形状 低重力 await confetti({ count: 200, flat: true, gravity: 0.8, ticks: 300, shapes: [square, circle, star, heart], position: { x: 50, y: 20 }, });五、源码级原理配置是如何变成粒子动画的配置到动画的转换全部集中在 bundles/confetti/src/utils.ts理解这段代码就等于理解了整个 bundle 的运作方式。5.1setConfetti容器的复用与并发保护setConfettiutils.ts维护一个ids: Mapstring, Container | Promise用new ConfettiOptions().load(options)解析配置若该 id 已有未销毁的容器则走快路径只通过addEmitter追加一个新的发射器动画立刻叠加触发这也是连续调用confetti()不会重置整个场景的原因若容器正在初始化Map 中存的是 Promise则先等待其完成否则创建初始化 Promise 并立刻写入 Map阻塞并发调用避免同一 id 被重复创建容器。5.2convertOptions物理参数到 tsParticles 选项的换算convertOptions 将高层 API 换算为底层ISourceOptions几个关键换算关系speed startVelocity * 3gravity.acceleration gravity * 9.81move.decay 1 - decay因此decay: 0.9对应底层衰减 0.1发射方向direction -angle配合angle.value spread形成扇形喷射outModes.default destroytop none粒子飞出画布即销毁但向上不销毁保证向上喷发的完整轨迹flat: true时旋转角度固定为 0、关闭 rotate/tilt/roll/wobble 动画disableForReducedMotion映射到motion.disable。5.3 ticks 与透明度动画的关系setConfetti中有一个容易被忽略的细节opacitySpeed fpsLimit * 100 / (defaultFps * ticks)其中fpsLimit 120。它把ticks折算成透明度动画的速度实现粒子在ticks帧内由不透明渐隐到完全透明——这正是 2.10.0 中改为 opacity 动画消散在实现层的体现当ticks非有限数或小于等于 0 时opacity 动画被禁用。5.4 发射器配置convertOptions与addEmitter都以emitters配置为核心startCount: count一次性发射数量、life: { duration: 0.1, count: 1 }短生命周期、只发射一次、size: { width: 0, height: 0 }点状发射源发射点坐标即position。六、安装与快速接入6.1 包管理器安装pnpm add tsparticles/confetti # 或 npm install tsparticles/confetti / yarn add tsparticles/confetti安装后包入口的导出结构ESM / CJS / 浏览器 / 类型由exports字段定义并额外提供tsparticles/confetti/lazy子路径package.json对应 index.lazy.ts 的按需加载入口。6.2 TypeScript / ESM 用法import { confetti } from tsparticles/confetti; await confetti({ count: 80, spread: 60, position: { x: 50, y: 50 }, colors: [#ffffff, #ff0000], });6.3 常见踩坑点CDN 场景下在脚本加载完成前调用confetti会导致 undefined不要假设tsparticles/confetti主入口会导出tsParticles需要引擎 API 时请从tsparticles/engine引入TypeScript 中confetti()不带任何参数是不合法的必须使用confetti(options)或confetti(id, options)两种形态之一。七、与预设preset的关系不写配置的彩带除了函数式 bundle仓库还提供了声明式的confetti预设见 presets/confetti/src/index.ts 与 presets/confetti/src/options.ts。预设通过loadConfettiPreset注册一套完整的ISourceOptionspalette 使用confetti调色板、fullScreen.enable: true、emitters.startCount: 50、gravity 9.81、decay 0.1 等适合用配置 JSON驱动场景而 bundle 的confetti()函数则适合事件触发型动效点击按钮、完成支付、达成成就等。两者的底层换算逻辑一致差异仅在调用方式一个面向 API 函数一个面向配置加载。八、延伸阅读完整配置与使用文档bundles/confetti/README.md函数与插件初始化实现bundles/confetti/src/confetti.ts配置解析与默认值bundles/confetti/src/ConfettiOptions.ts、bundles/confetti/src/IConfettiOptions.ts选项到引擎配置的换算bundles/confetti/src/utils.ts声明式预设与配套调色板presets/confetti/src/options.ts、presets/confetti/src/index.ts同仓库中与 confetti 并列的兄弟包还包括 fireworks烟花与 ribbons彩带丝带它们共享同一套 bundle 设计模式理解 confetti 的实现后即可举一反三。【免费下载链接】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），仅供参考