tsParticles 弹性缓动插件 tsparticles/plugin-easing-bounce从版本演进到源码实现【免费下载链接】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/plugin-easing-bounce是 tsParticles 官方缓动easing插件家族中的一员为粒子动画提供ease-in-bounce、ease-out-bounce、ease-in-out-bounce三组弹性反弹缓动曲线可用于粒子位移、缩放、旋转等动画过程让效果呈现真实物理感的落地回弹。本文以 plugins/easings/bounce/CHANGELOG.md 的版本演进为主干结合同目录下的源码实现完整解读该插件的数学原理、引擎注册机制、安装使用方法与完整版本历史帮助你理解如何在 tsParticles 中接入并复用弹性缓动能力。插件在 tsParticles 中的定位tsParticles 采用引擎 插件的 monorepo 架构。缓动能力属于引擎的通用基础设施引擎通过PluginManager维护一张缓动函数注册表任何模块都可以按名称取用。plugin-easing-bounce正是以插件形式向这张注册表注入弹性缓动曲线的官方实现。从目录结构看该插件是一个完整的可独立发布的 npm 包见 plugins/easings/bounce/package.jsonsrc/easingsFunctions.ts—— 缓动函数数学实现与注册表src/index.ts—— 插件加载入口ESM/CJS 共用src/index.lazy.ts—— 懒加载入口配合tsparticles/engine/lazysrc/browser.ts—— 浏览器全局变量挂载CHANGELOG.md、README.md—— 版本历史与使用文档包名中的tsparticles/plugin-easing-bounce、当前版本4.3.3、peer 依赖tsparticles/engine均可在 package.json 与 package.dist.json 中确认。弹性缓动的数学实现bounceOut 分段曲线插件的全部核心逻辑集中在 plugins/easings/bounce/src/easingsFunctions.ts共约 28 行。它先定义一个名为bounceOut的分段二次函数再基于它派生出三组缓动曲线const easingsFunctions new Mapstring, EasingFunction(), bounceOut (t: number): number { const n1 7.5625, d1 2.75; if (t 1 / d1) { return n1 * t * t; } else if (t 2 / d1) { t - 1.5 / d1; return n1 * t * t 0.75; } else if (t 2.5 / d1) { t - 2.25 / d1; return n1 * t * t 0.9375; } else { t - 2.625 / d1; return n1 * t * t 0.984375; } };分段曲线逐段拆解bounceOut接受归一化的进度值t取值范围[0, 1]0表示动画开始、1表示动画结束返回反弹后的进度值。其常数n1 7.5625与d1 2.75从源码结构看是经典 Penner 风格弹性缓动bounce easing的标准系数。曲线被切分为四段分段条件公式t为分段内重定基的进度偏移量第一段t 1 / 2.757.5625 · t²0第二段t 2 / 2.757.5625 · t² 0.75t t − 1.5 / 2.75第三段t 2.5 / 2.757.5625 · t² 0.9375t t − 2.25 / 2.75第四段其余7.5625 · t² 0.984375t t − 2.625 / 2.75四段抛物线的顶点被依次抬高0 → 0.75 → 0.9375 → 0.984375且顶点高度逐次接近 1直观效果就是物体落地后反弹高度逐次衰减——这正是弹性回弹视觉的来源。抛物线开口系数7.5625决定了每段从触地到最高点的陡峭程度。由 bounceOut 派生的三组缓动easingsFunctions.set(ease-out-bounce, value bounceOut(value)); easingsFunctions.set(ease-in-bounce, value 1 - bounceOut(1 - value)); easingsFunctions.set(ease-in-out-bounce, value value 0.5 ? (1 - bounceOut(1 - value * 2)) / 2 : (1 bounceOut(value * 2 - 1)) / 2, );ease-out-bounce直接使用bounceOut。动画在结束时产生多次回弹适合落下类运动如粒子重力下落触底。ease-in-bounce对bounceOut做t → 1 − t的镜像变换即1 − bounceOut(1 − t)。动画在开始阶段产生反向回弹适合抛起类运动。ease-in-out-bounce把进度对半拆分前半段使用ease-in逻辑、后半段使用ease-out逻辑起点和终点都平滑适合往返对称的循环动画。插件如何注册进引擎加载入口loadEasingBouncePluginplugins/easings/bounce/src/index.ts 导出唯一的加载函数loadEasingBouncePluginexport async function loadEasingBouncePlugin(engine: Engine): Promisevoid { engine.checkVersion(__VERSION__); await engine.pluginManager.register(e { for (const [easing, easingFn] of easingsFunctions) { e.pluginManager.addEasing(easing, easingFn); } }); }关键调用链engine.checkVersion(__VERSION__)—— 校验插件版本与引擎版本兼容__VERSION__由构建期注入值为包版本号当前为 4.3.3。engine.pluginManager.register(...)—— 向引擎注册一个插件回调回调内遍历easingsFunctions映射表逐一调用pluginManager.addEasing(name, fn)。引擎侧的注册表与回退在 engine/src/Core/Utils/PluginManager.ts 中addEasing(name: string, easing: EasingFunction): void { if (this.easingFunctions.get(name)) { return; } this.easingFunctions.set(name, easing); }同名缓动重复注册会被静默忽略保证幂等。取用侧通过getEasing完成engine/src/Core/Utils/PluginManager.tsgetEasing(name: string): EasingFunction { return this.easingFunctions.get(name) ?? ((value: number): number value); }若查询不到指定名称则回退为恒等函数value value即线性缓动。因此忘记加载本插件并不会报错只会让ease-out-bounce等配置退化为线性动画——这是排查配置了缓动却看不到效果时的重要线索。EasingFunction的类型定义位于 engine/src/Types/EasingFunction.ts其语义为将进度值映射为缓动后的值export type EasingFunction (value: number) number;懒加载入口plugins/easings/bounce/src/index.lazy.ts 提供了面向tsparticles/engine/lazy的按需加载版本easingsFunctions模块被改为动态import()仅在插件实际注册时才拉取缓动函数实现适合希望削减首屏包体、又需要保留完整插件能力的场景。二者导出的函数签名完全一致。安装与使用方式一CDN / Vanilla JS / jQuery浏览器构建通过 src/browser.ts 将加载函数挂到globalThisglobalObject.loadEasingBouncePlugin loadEasingBouncePlugin;引入tsparticles.plugin.easing.bounce.min.js后该文件名可在 package.dist.json 的jsdelivr/unpkg字段确认即可在脚本中调用(async () { await loadEasingBouncePlugin(); await tsParticles.load({ id: tsparticles, options: { /* options */ }, }); })();方式二ESM / CommonJS先安装依赖npm install tsparticles/plugin-easing-bounce # 或 yarn add tsparticles/plugin-easing-bounceCommonJSconst { tsParticles } require(tsparticles/engine); const { loadEasingBouncePlugin } require(tsparticles/plugin-easing-bounce); (async () { await loadEasingBouncePlugin(); })();ESMimport { tsParticles } from tsparticles/engine; import { loadEasingBouncePlugin } from tsparticles/plugin-easing-bounce; (async () { await loadEasingBouncePlugin(); })();包体导出映射main/module/browser/types以及./lazy子路径可在 package.json 的exports字段查看三种模块格式CJS、ESM、Browser均被覆盖。文档勘误提示官方 README.md 的使用示例中误将加载函数写作loadEasingBlendPlugin属于复制粘贴遗留问题。以源码为准本包实际导出的加载函数名是loadEasingBouncePlugin请勿照抄 README 中的错误名称。正确加载顺序使用弹跳缓动前务必确保在tsParticles.load(...)之前完成await loadEasingBouncePlugin()README 中将其列为Common pitfalls的第一条。原因在于插件注册的是引擎级全局缓动注册表若先加载粒子实例再注册插件getEasing在动画计算时可能查不到对应名称而回退为线性缓动。版本演进解读CHANGELOG 全量时间线plugin-easing-bounce采用 Conventional Commits 规范见 CHANGELOG.md 开头说明自动生成变更日志。由于 tsParticles 是 monorepo大量条目标注为 Version bump only for package tsparticles/plugin-easing-bounce表示该版本只是随主仓库统一发布的版本号同步无本包专属改动而标注了Features/Bug Fixes的条目才是值得关注的实际变更。4.x 主线2026 年含预发布阶段版本日期关键变更4.3.32026-07-23版本同步4.3.22026-07-10版本同步4.3.12026-07-01版本同步4.3.02026-06-27版本同步4.2.12026-06-19版本同步4.2.02026-06-17Bug Fixes修复部分 eslint 配置与循环依赖问题4.1.32026-06-03版本同步4.1.22026-06-01版本同步4.1.12026-05-31版本同步4.1.02026-05-29版本同步4.0.52026-05-19版本同步4.0.42026-05-19版本同步4.0.32026-05-18版本同步4.0.22026-05-16版本同步4.0.12026-05-15版本同步4.0.02026-05-15正式版发布含 beta.1 ~ beta.17、alpha.0 ~ alpha.28 预发布阶段4.0.0 预发布阶段alpha/beta的版本号与日期依次为beta.1705-15、beta.1605-09、beta.1505-09、beta.1204-15、beta.1104-08、beta.1004-08、beta.904-08、beta.804-07、beta.704-07、beta.604-02、beta.504-02、beta.404-02、beta.304-02、beta.204-02、beta.103-31、beta.003-19、alpha.2803-15、alpha.2703-09、alpha.2602-26、alpha.2502-21、alpha.2402-12、alpha.2302-11、alpha.2202-05、alpha.2102-04、alpha.2002-04、alpha.1902-04、alpha.1802-04、alpha.1702-04、alpha.1602-03、alpha.1502-03、alpha.1402-02、alpha.1002-02、alpha.902-02、alpha.801-22、alpha.701-22均为版本同步。本插件真正的诞生时刻4.0.0-alpha.6在 4.x 预发布早期阶段CHANGELOG 记录了本插件最具标志性的两条变更2026-01-22Features为bounce、elastic、gaussian、sigmoid、smoothstep五种缓动新增独立插件add easing plugins for bounce, elastic, gaussian, sigmoid, and smoothstep。plugin-easing-bounce正是这一批缓动插件家族的一员。Bug Fixes修复复制粘贴遗留问题fixed copy/paste issues——这与上文提到的 README 中loadEasingBlendPlugin类错误属于同一类问题可见当时多插件模板化生成时出现过函数名串包的情况。这意味着在 4.0 系列之前的 3.x 时代弹性缓动并未以独立插件形式存在plugin-easing-bounce是 4.x 重构中缓动能力插件化的产物。3.x 历史2023–2025 年随主仓库同步版本日期关键变更3.9.12025-08-03版本同步3.9.02025-08-01版本同步3.8.12025-01-31Bug Fixes修复fullScreen激活时的 z-index 样式问题issue #54583.8.02025-01-23版本同步3.7.12024-11-24Bug Fixes修复 canvas 中的 resize 问题3.7.02024-11-24Features引擎新增命名颜色插件与十六进制颜色支持3.6.02024-11-18Bug Fixes修复颜色语法问题issue #54093.6.0-beta.1 / beta.02024-10beta.0 修复 out modes 问题3.5.02024-07-01版本同步3.4.02024-05-12Features改变 bundle 加载方式不再预加载插件3.3.02024-02-27Bug Fixes修复 Chrome 中异步 rAF 函数问题为 vite 构建减少异步方法3.2.22024-02-20Bug Fixes修复循环依赖检测与动态导入相关问题3.2.12024-01-31版本同步3.2.02024-01-31Features新增粒子外部交互3.1.02024-01-13版本同步3.0.32023-12-26Bug Fixes优先使用元素 id修复 emoji 内存管理问题3.0.2 / 3.0.12023-12-06版本同步3.0.02023-12-04Features为 trail 效果新增 fade3.0.0-beta.5 / beta.42023-11~12版本同步从版本历史可以清晰看到两条规律3.x 阶段本包尚不存在此前的条目全部是主仓库统一发布的同步记录真正属于本插件的独立变更集中在 4.0 时代且此后进入稳定的维护期4.3.x 均为版本同步说明弹性缓动实现自引入以来保持了很好的稳定性。常见坑位与排查建议结合 README.md 的 Common pitfalls 与本仓库源码使用本插件时有几点值得注意加载顺序loadEasingBouncePlugin()必须先于tsParticles.load(...)执行否则配置的缓动名会因未注册而回退为线性缓动见getEasing的恒等回退实现。函数名勘误README 示例中的loadEasingBlendPlugin是错误的正确名称是loadEasingBouncePlugin。peer 依赖本插件以tsparticles/engine为 peerDependency当前要求 4.3.3升级引擎时需同步升级插件checkVersion(__VERSION__)会在不匹配时给出提示。逐一调整配置同时改动多个缓动/动画参数时难以定位回归建议一次只改一组选项与源码中的注册表对照排查。结语tsparticles/plugin-easing-bounce是一个小而精的官方插件四段抛物线的数学实现支撑起真实感的回弹动画通过引擎PluginManager.addEasing与getEasing完成全局注册与按名取用。结合 CHANGELOG.md 的版本时间线可以看到它是 4.0 时代缓动插件化重构的产物与 elastic、gaussian、sigmoid、smoothstep 同批诞生并在后续版本中保持高度稳定。若要在 tsParticles 粒子动画中实现落地回弹等弹性效果安装本插件并按上文顺序加载即可。【免费下载链接】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），仅供参考