尧图网站建设 
tsParticles Confetti Bundle 实战指南用 tsparticles/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导读tsparticles/confetti是 tsParticles 官方提供的彩带confetti专用聚合包它将粒子引擎、发射器插件、运动插件以及卡片、爱心、星形等形状和旋转、摆动、翻滚等更新器封装成一个开箱即用的confettiAPI。本文以 bundles/confetti/README.md 为核心骨架结合该包源码bundles/confetti/src深入讲解其安装方式、两种调用范式、完整配置参数、CDN 用法与常见坑位读完即可在任意前端项目或纯 HTML 页面中落地页面庆祝、按钮反馈、抽奖动画等纸屑特效。包内组成一个 API聚合整条粒子技术栈tsparticles/confetti不只是一个函数它通过依赖聚合把渲染彩带效果所需的全部能力打包在一起。按 bundles/confetti/package.json 的dependencies声明其包含以下包类别包名作用基础tsparticles/basic基础粒子加载器含默认交互与形状核心tsparticles/enginetsParticles 引擎本体插件tsparticles/plugin-emitters发射器插件负责一次性喷出全部纸屑插件tsparticles/plugin-motion运动插件用于支持prefers-reduced-motion降级形状tsparticles/shape-cards、tsparticles/shape-emoji、tsparticles/shape-heart、tsparticles/shape-image、tsparticles/shape-polygon、tsparticles/shape-square、tsparticles/shape-star扑克牌、Emoji、爱心、图片、多边形、方块、星形等纸屑形状更新器tsparticles/updater-life、tsparticles/updater-roll、tsparticles/updater-rotate、tsparticles/updater-tilt、tsparticles/updater-wobble生命周期、翻滚、旋转、倾斜、摆动动画从 confetti.ts 的doInitPlugins可以看到每次调用confetti()前会把这些 loader 一次性注册进引擎loadBasic、loadEmittersPluginSimple、loadMotionPlugin、loadCardSuitsShape、loadHeartShape、loadImageShape、loadPolygonShape、loadSquareShape、loadStarShape、loadEmojiShape以及loadRotateUpdater、loadLifeUpdater、loadRollUpdater、loadTiltUpdater、loadWobbleUpdater。正因为注册了这些形状与更新器彩带才能在空中翻滚、摆动、倾斜地飘落。其依赖关系可以直观地用 README 中的依赖图表示对外 API围绕confetti的四个入口该包的全部 API 都集中在confetti这一个函数对象上源码中 confetti.ts 与 types.ts 定义了如下形态import { confetti } from tsparticles/confetti; // 主 API两种调用形式 await confetti(options); await confetti(canvas-id, options); // 附加辅助方法 await confetti.init(); // 仅初始化插件不播放动画 const fireOnCanvas await confetti.create(canvas, defaultOptions); // 绑定自定义 canvas await fireOnCanvas(options); // 通过返回的局部函数播放 console.log(confetti.version); // 打印包版本号几个关键设计点值得结合源码理解首参即分派confetti的第一个参数ConfettiFirstParam是string | RecursivePartialIConfettiOptions联合类型。传入字符串时把它当作 canvas 的id其余情况视为配置对象并自动使用默认 idconfetti。返回 Container每次调用返回PromiseContainer | undefined便于进一步操作 tsParticles 容器实例。主入口不导出引擎tsparticles/confetti的主入口index.ts刻意不暴露tsParticles。如果确实需要引擎底层 API请直接从tsparticles/engine导入。不过 browser.ts 这种用于 CDN 打包的入口会额外把tsParticles挂到globalThis上。confetti.create返回偏函数它会基于传入的 canvas 生成一个局部 confetti该函数后续调用时自动复用绑定好的 canvas 与默认配置见 confetti.ts。confetti.version注入构建版本版本号通过 rollup 构建时的__VERSION__宏注入构建配置见 rollup.config.js。安装与模块加载通过包管理器安装仓库使用 pnpm workspace 管理命令如下pnpm add tsparticles/confetti安装后package.json 的exports字段提供了两条子路径主入口tsparticles/confetti默认 ESM同时提供types、browser、import、require四种条件导出覆盖 TypeScript、浏览器直引与 CommonJS 场景懒加载入口tsparticles/confetti/lazy所有依赖改为运行时动态import()见 confetti.lazy.ts适合对首屏体积敏感、希望按需拉取依赖的 ESM 项目。快速上手三种典型用法1. ESM / TypeScript全局全屏彩带不指定 canvas 时特效会以全屏浮层的方式播放对应fullScreen.enable: true适合页面级庆祝import { confetti } from tsparticles/confetti; await confetti({ count: 80, spread: 60, position: { x: 50, y: 50 }, colors: [#ffffff, #ff0000], });2. 指定已有 canvas id传入 id 时特效会渲染到页面中 id 匹配的 canvas 元素上import { confetti } from tsparticles/confetti; await confetti(tsparticles, { count: 50, angle: 90, spread: 45, });3. 绑定自定义 canvasconfetti.create适合把彩带约束在某个局部 DOM 区域如按钮、卡片内。它返回一个已经绑定好 canvas 的函数后续每次调用只需传覆盖配置import { confetti } from tsparticles/confetti; const canvas document.getElementById(my-canvas) as HTMLCanvasElement; const localConfetti await confetti.create(canvas, { count: 30 }); await localConfetti({ spread: 70 });从源码看confetti.create会先读取 canvas 的id属性没有则用默认confetti并回写该属性随后创建容器返回的闭包再次调用时复用同一个 canvas实现一次绑定、多次发射。CDN / Vanilla JS / jQuery 用法CDN 场景提供两个文件均来自 rollup.config.js 的打包产物Bundle 文件所有依赖内联进一个脚本加载后confetti直接挂在globalThis即浏览器中的window.confetti开箱即用非 Bundle 文件只包含confettiAPI 本身页面必须按Included Packages一节列出的依赖顺序手动逐个加载脚本配置成本更高。Bundle 加载后的典型用法script srchttps://cdn.example.com/tsparticles/confetti/bundle.min.js/script script // 方式一直接触发 confetti({ count: 60 }); // 方式二异步等待播放完成 (async () { await confetti({ count: 60, spread: 55 }); })(); // 方式三指定目标 canvas confetti(tsparticles, { count: 50, position: { x: 50, y: 50, }, }); /script注意非 Bundle 方案中globalThis.confetti的挂载逻辑见 browser.ts只挂confetti而完整 Bundle 的入口 browser.ts 还会额外暴露tsParticles。完整参数表与默认值confettiAPI 接受两种签名confetti(options)与confetti(id, options)。所有配置都实现于 ConfettiOptions.ts 的构造器默认值汇总如下参数类型默认值说明countInteger50一次发射的纸屑粒子数量angleNumber90发射角度度90 表示朝正上方喷spreadNumber45发射张角度越大越散开startVelocityNumber45初始速度decayNumber0.9速度衰减系数越小减速越快flatBooleanfalse是否扁平纸屑关闭旋转/倾斜/翻滚/摆动gravityNumber1重力倍数基于 9.81 基准driftNumber0水平漂移量可为负值ticksNumber200动画帧数持续时间越大飘得越久positionObject{ x: 50, y: 50 }发射原点百分比坐标colorsArrayString见下方默认色板纸屑颜色列表shapesArrayString[square, circle]纸屑形状shapeOptionsRecordstring, unknown{}各形状的专属配置如图片 url、文本内容scalarNumber1粒子尺寸缩放系数zIndexInteger100全屏模式下浮层的 z-indexdisableForReducedMotionBooleantrue系统开启减弱动态效果时自动禁用默认色板为 7 色糖果色[#26ccff, #a25afd, #ff5e7e, #88ff5a, #fcff42, #ffa62d, #ff36ff]兼容的废弃别名仍被接受但建议迁移particleCount→ 用countorigin→ 用positionorigin按 0~1 归一化值换算见 ConfettiOptions.ts 的 getter/setter。参数背后的引擎映射源码级原理confetti之所以轻是因为它在内部把一套精简的配置翻译成完整的 tsParticles 源配置utils.ts 的convertOptions几个值得注意的换算物理量换算gravity * 9.81作为重力加速度startVelocity * 3作为初速度1 - decay作为速度衰减率spread映射为移动角度、angle取负作为移动方向发射模型粒子数不直接写在particles.number而是通过 emitters 插件在life: { duration: 0.1, count: 1 }的瞬间一次性喷出startCount并配合透明度从max衰减到min的动画营造消散感ticks换算透明度速度opacitySpeed 120 * 100 / (60 * ticks)即动画帧率按 120 FPS、基准 60 FPS 折算确保纸屑在指定帧数内完成淡出reduced-motion 降级disableForReducedMotion直接映射到motion.disable由 motion 插件检测prefers-reduced-motion后跳过动画复用优化setConfetti内部维护了一个ids - Container的 Maputils.ts。若同一 id 的容器仍存活后续调用走addEmitter快速路径直接在原容器上再喷一轮避免重复建容器并发调用期间则用 Promise 加锁等待初始化完成。常见坑位与规避README 明确列出了三个最常见的坑CDN 场景过早调用脚本尚未加载完成就调用confetti会得到 undefined 或直接报错。应等待 DOM/脚本就绪或使用(async () { await confetti(...) })()形式把调用放进异步上下文。误以为主入口导出tsParticlestsparticles/confetti主入口只导出confetti需要引擎 API 时请从tsparticles/engine单独导入。TypeScript 下不传首参confetti的第一个参数是必填的要么传配置对象confetti(options)要么传 id 配置confetti(id, options)不能无参调用。延伸配套的 confetti 预设与示例除直接使用该 bundle 外仓库内还提供了基于它的高阶预设与模板可直接参考预设tsparticles/preset-confetti、tsparticles/preset-confettiCannon、tsparticles/preset-confettiExplosions、tsparticles/preset-confettiFalling、tsparticles/preset-confettiParade分别对应礼炮、爆炸、飘落、游行的成品动画演示模板templates/confetti 与 demo 目录下提供多框架可运行示例完整配置参考markdown/Options.md 与 markdown/Options 目录覆盖引擎级全部选项说明。小结tsparticles/confetti以单个confetti函数作为统一入口背后聚合了引擎、发射器、运动插件与十余个形状/更新器模块是 tsParticles 生态中把彩带特效这件事做到极简的官方方案。无论是全屏庆祝、局部 canvas 绑定还是 CDN 快速接入本文给出的 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/tsparticles创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 tsParticles Confetti Bundle 实战指南：用 @tsparticles/confetti 一行代码打造五彩纸屑特效
tsParticles Confetti Bundle 实战指南用 tsparticles/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导读tsparticles/confetti是 tsParticles 官方提供的彩带confetti专用聚合包它将粒子引擎、发射器插件、运动插件以及卡片、爱心、星形等形状和旋转、摆动、翻滚等更新器封装成一个开箱即用的confettiAPI。本文以 bundles/confetti/README.md 为核心骨架结合该包源码bundles/confetti/src深入讲解其安装方式、两种调用范式、完整配置参数、CDN 用法与常见坑位读完即可在任意前端项目或纯 HTML 页面中落地页面庆祝、按钮反馈、抽奖动画等纸屑特效。包内组成一个 API聚合整条粒子技术栈tsparticles/confetti不只是一个函数它通过依赖聚合把渲染彩带效果所需的全部能力打包在一起。按 bundles/confetti/package.json 的dependencies声明其包含以下包类别包名作用基础tsparticles/basic基础粒子加载器含默认交互与形状核心tsparticles/enginetsParticles 引擎本体插件tsparticles/plugin-emitters发射器插件负责一次性喷出全部纸屑插件tsparticles/plugin-motion运动插件用于支持prefers-reduced-motion降级形状tsparticles/shape-cards、tsparticles/shape-emoji、tsparticles/shape-heart、tsparticles/shape-image、tsparticles/shape-polygon、tsparticles/shape-square、tsparticles/shape-star扑克牌、Emoji、爱心、图片、多边形、方块、星形等纸屑形状更新器tsparticles/updater-life、tsparticles/updater-roll、tsparticles/updater-rotate、tsparticles/updater-tilt、tsparticles/updater-wobble生命周期、翻滚、旋转、倾斜、摆动动画从 confetti.ts 的doInitPlugins可以看到每次调用confetti()前会把这些 loader 一次性注册进引擎loadBasic、loadEmittersPluginSimple、loadMotionPlugin、loadCardSuitsShape、loadHeartShape、loadImageShape、loadPolygonShape、loadSquareShape、loadStarShape、loadEmojiShape以及loadRotateUpdater、loadLifeUpdater、loadRollUpdater、loadTiltUpdater、loadWobbleUpdater。正因为注册了这些形状与更新器彩带才能在空中翻滚、摆动、倾斜地飘落。其依赖关系可以直观地用 README 中的依赖图表示对外 API围绕confetti的四个入口该包的全部 API 都集中在confetti这一个函数对象上源码中 confetti.ts 与 types.ts 定义了如下形态import { confetti } from tsparticles/confetti; // 主 API两种调用形式 await confetti(options); await confetti(canvas-id, options); // 附加辅助方法 await confetti.init(); // 仅初始化插件不播放动画 const fireOnCanvas await confetti.create(canvas, defaultOptions); // 绑定自定义 canvas await fireOnCanvas(options); // 通过返回的局部函数播放 console.log(confetti.version); // 打印包版本号几个关键设计点值得结合源码理解首参即分派confetti的第一个参数ConfettiFirstParam是string | RecursivePartialIConfettiOptions联合类型。传入字符串时把它当作 canvas 的id其余情况视为配置对象并自动使用默认 idconfetti。返回 Container每次调用返回PromiseContainer | undefined便于进一步操作 tsParticles 容器实例。主入口不导出引擎tsparticles/confetti的主入口index.ts刻意不暴露tsParticles。如果确实需要引擎底层 API请直接从tsparticles/engine导入。不过 browser.ts 这种用于 CDN 打包的入口会额外把tsParticles挂到globalThis上。confetti.create返回偏函数它会基于传入的 canvas 生成一个局部 confetti该函数后续调用时自动复用绑定好的 canvas 与默认配置见 confetti.ts。confetti.version注入构建版本版本号通过 rollup 构建时的__VERSION__宏注入构建配置见 rollup.config.js。安装与模块加载通过包管理器安装仓库使用 pnpm workspace 管理命令如下pnpm add tsparticles/confetti安装后package.json 的exports字段提供了两条子路径主入口tsparticles/confetti默认 ESM同时提供types、browser、import、require四种条件导出覆盖 TypeScript、浏览器直引与 CommonJS 场景懒加载入口tsparticles/confetti/lazy所有依赖改为运行时动态import()见 confetti.lazy.ts适合对首屏体积敏感、希望按需拉取依赖的 ESM 项目。快速上手三种典型用法1. ESM / TypeScript全局全屏彩带不指定 canvas 时特效会以全屏浮层的方式播放对应fullScreen.enable: true适合页面级庆祝import { confetti } from tsparticles/confetti; await confetti({ count: 80, spread: 60, position: { x: 50, y: 50 }, colors: [#ffffff, #ff0000], });2. 指定已有 canvas id传入 id 时特效会渲染到页面中 id 匹配的 canvas 元素上import { confetti } from tsparticles/confetti; await confetti(tsparticles, { count: 50, angle: 90, spread: 45, });3. 绑定自定义 canvasconfetti.create适合把彩带约束在某个局部 DOM 区域如按钮、卡片内。它返回一个已经绑定好 canvas 的函数后续每次调用只需传覆盖配置import { confetti } from tsparticles/confetti; const canvas document.getElementById(my-canvas) as HTMLCanvasElement; const localConfetti await confetti.create(canvas, { count: 30 }); await localConfetti({ spread: 70 });从源码看confetti.create会先读取 canvas 的id属性没有则用默认confetti并回写该属性随后创建容器返回的闭包再次调用时复用同一个 canvas实现一次绑定、多次发射。CDN / Vanilla JS / jQuery 用法CDN 场景提供两个文件均来自 rollup.config.js 的打包产物Bundle 文件所有依赖内联进一个脚本加载后confetti直接挂在globalThis即浏览器中的window.confetti开箱即用非 Bundle 文件只包含confettiAPI 本身页面必须按Included Packages一节列出的依赖顺序手动逐个加载脚本配置成本更高。Bundle 加载后的典型用法script srchttps://cdn.example.com/tsparticles/confetti/bundle.min.js/script script // 方式一直接触发 confetti({ count: 60 }); // 方式二异步等待播放完成 (async () { await confetti({ count: 60, spread: 55 }); })(); // 方式三指定目标 canvas confetti(tsparticles, { count: 50, position: { x: 50, y: 50, }, }); /script注意非 Bundle 方案中globalThis.confetti的挂载逻辑见 browser.ts只挂confetti而完整 Bundle 的入口 browser.ts 还会额外暴露tsParticles。完整参数表与默认值confettiAPI 接受两种签名confetti(options)与confetti(id, options)。所有配置都实现于 ConfettiOptions.ts 的构造器默认值汇总如下参数类型默认值说明countInteger50一次发射的纸屑粒子数量angleNumber90发射角度度90 表示朝正上方喷spreadNumber45发射张角度越大越散开startVelocityNumber45初始速度decayNumber0.9速度衰减系数越小减速越快flatBooleanfalse是否扁平纸屑关闭旋转/倾斜/翻滚/摆动gravityNumber1重力倍数基于 9.81 基准driftNumber0水平漂移量可为负值ticksNumber200动画帧数持续时间越大飘得越久positionObject{ x: 50, y: 50 }发射原点百分比坐标colorsArrayString见下方默认色板纸屑颜色列表shapesArrayString[square, circle]纸屑形状shapeOptionsRecordstring, unknown{}各形状的专属配置如图片 url、文本内容scalarNumber1粒子尺寸缩放系数zIndexInteger100全屏模式下浮层的 z-indexdisableForReducedMotionBooleantrue系统开启减弱动态效果时自动禁用默认色板为 7 色糖果色[#26ccff, #a25afd, #ff5e7e, #88ff5a, #fcff42, #ffa62d, #ff36ff]兼容的废弃别名仍被接受但建议迁移particleCount→ 用countorigin→ 用positionorigin按 0~1 归一化值换算见 ConfettiOptions.ts 的 getter/setter。参数背后的引擎映射源码级原理confetti之所以轻是因为它在内部把一套精简的配置翻译成完整的 tsParticles 源配置utils.ts 的convertOptions几个值得注意的换算物理量换算gravity * 9.81作为重力加速度startVelocity * 3作为初速度1 - decay作为速度衰减率spread映射为移动角度、angle取负作为移动方向发射模型粒子数不直接写在particles.number而是通过 emitters 插件在life: { duration: 0.1, count: 1 }的瞬间一次性喷出startCount并配合透明度从max衰减到min的动画营造消散感ticks换算透明度速度opacitySpeed 120 * 100 / (60 * ticks)即动画帧率按 120 FPS、基准 60 FPS 折算确保纸屑在指定帧数内完成淡出reduced-motion 降级disableForReducedMotion直接映射到motion.disable由 motion 插件检测prefers-reduced-motion后跳过动画复用优化setConfetti内部维护了一个ids - Container的 Maputils.ts。若同一 id 的容器仍存活后续调用走addEmitter快速路径直接在原容器上再喷一轮避免重复建容器并发调用期间则用 Promise 加锁等待初始化完成。常见坑位与规避README 明确列出了三个最常见的坑CDN 场景过早调用脚本尚未加载完成就调用confetti会得到 undefined 或直接报错。应等待 DOM/脚本就绪或使用(async () { await confetti(...) })()形式把调用放进异步上下文。误以为主入口导出tsParticlestsparticles/confetti主入口只导出confetti需要引擎 API 时请从tsparticles/engine单独导入。TypeScript 下不传首参confetti的第一个参数是必填的要么传配置对象confetti(options)要么传 id 配置confetti(id, options)不能无参调用。延伸配套的 confetti 预设与示例除直接使用该 bundle 外仓库内还提供了基于它的高阶预设与模板可直接参考预设tsparticles/preset-confetti、tsparticles/preset-confettiCannon、tsparticles/preset-confettiExplosions、tsparticles/preset-confettiFalling、tsparticles/preset-confettiParade分别对应礼炮、爆炸、飘落、游行的成品动画演示模板templates/confetti 与 demo 目录下提供多框架可运行示例完整配置参考markdown/Options.md 与 markdown/Options 目录覆盖引擎级全部选项说明。小结tsparticles/confetti以单个confetti函数作为统一入口背后聚合了引擎、发射器、运动插件与十余个形状/更新器模块是 tsParticles 生态中把彩带特效这件事做到极简的官方方案。无论是全屏庆祝、局部 canvas 绑定还是 CDN 快速接入本文给出的 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/tsparticles创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考