tsParticles particles.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 官方文档 markdown/Options/Particles/Bounce.md系统讲解particles.bounce配置项——粒子在相互碰撞后沿水平轴与垂直轴各自反弹的强度系数bounce factor。读完后你将能够为粒子系统设置对称或各向异性的反弹强度、使用数值范围range为不同粒子注入随机反弹特性并结合引擎源码理解这两个系数如何参与碰撞速度计算从而精确控制粒子系统的“弹性”表现。bounce 选项的作用与适用场景particles.bounce控制的是粒子之间发生碰撞后的速度保留程度。当两个粒子相撞时引擎会先按弹性碰撞模型计算反弹速度再分别用水平、垂直两个系数对反弹后的速度分量做缩放系数为1时碰撞后速度按物理模型完整保留无额外损耗、无额外放大系数小于1例如0.5对应轴向上的反弹速度被削弱表现为“吸能”、更沉闷的碰撞系数大于1例如文档示例中的50反弹速度被放大粒子会变得非常“弹跳”水平与垂直系数可以独立设置从而产生各向异性的运动手感例如水平方向弹得远、垂直方向落得快。这一点与particles.interactivity下external bounce交互模式鼠标/元素靠近时推开粒子不是同一概念后者的插件实现位于 interactions/external/bounce/src/Bouncer.ts配置入口是interactivity.events.onHover.mode: bounce本文不展开。属性说明bounce对象包含两个字段二者结构相同均遵循 tsParticles 的IValueWithRandom取值约定value可取单值或min/max范围KeyTypeExampleNoteshorizontal.valuenumber/range50/{ min: 30, max: 50 }水平方向反弹系数vertical.valuenumber/range50/{ min: 30, max: 50 }垂直方向反弹系数类型定义见 engine/src/Options/Interfaces/Particles/Bounce/IParticlesBounce.ts/** Particles bounce factor options */ export interface IParticlesBounce { /** Horizontal bounce factor */ horizontal: IValueWithRandom; /** Vertical bounce factor */ vertical: IValueWithRandom; }默认值从源码看反弹系数的默认值来自 engine/src/Options/Classes/Particles/Bounce/ParticlesBounceFactor.tsexport class ParticlesBounceFactor extends ValueWithRandom { override value: RangeValue 1; }即水平与垂直的默认系数均为1。当配置中未提供bounce或某个方向未给出value时碰撞后的速度分量将不被额外缩放。快速配置示例以下两个示例完整继承自官方文档 Bounce.md。对称反弹Symmetric bounce水平与垂直使用相同系数碰撞行为各向同性{ bounce: { horizontal: { value: 50 }, vertical: { value: 50 } } }该片段放在粒子配置的particles层级下使用即options.particles.bounce。value: 50表示碰撞后两个轴向的速度分量都会被放大 50 倍会产生极为夸张的“弹射”效果适合做演示性的高能量碰撞场景日常使用建议以1为基准在0 ~ 2区间内微调。更“软”的垂直反弹Softer vertical bounce水平方向使用随机范围垂直方向使用固定较小值{ bounce: { horizontal: { value: { min: 40, max: 60 } }, vertical: { value: 20 } } }这里体现了 range 取值的用法{ min: 40, max: 60 }会为每个粒子或每次取值在 40 ~ 60 之间随机确定水平系数使群体碰撞呈现出自然的差异感而垂直方向固定为 20整体形成“水平方向弹跳活跃、垂直方向相对受控”的运动特征。若希望两个方向都带随机性可将vertical.value同样写成{ min: ..., max: ... }。源码实现系数如何参与碰撞计算bounce配置经由 engine/src/Options/Classes/Particles/ParticlesOptions.ts 装载readonly bounce new ParticlesBounce()与this.bounce.load(data.bounce)其中 engine/src/Options/Classes/Particles/Bounce/ParticlesBounce.ts 负责分别加载horizontal与vertical两个因子。真正消费该配置的碰撞逻辑位于引擎工具函数 engine/src/Utils/Utils.ts调用链可以概括为两步第一步从粒子生成碰撞数据circleBounceDataFromParticle第 236~247 行export function circleBounceDataFromParticle(p: Particle): ICircleBouncer { return { position: p.getPosition(), radius: p.getRadius(), mass: p.getMass(), velocity: p.velocity, factor: Vector.create( getRangeValue(p.options.bounce.horizontal.value), getRangeValue(p.options.bounce.vertical.value), ), }; }注意getRangeValue(...)的作用如果value是 range 对象它会在此处完成随机取值因此“随机系数”是按粒子实例解析的这正是上面 range 示例能产生群体差异的原因。解析后的两个系数组成一个二维向量factorx 对应水平、y 对应垂直。第二步执行圆形弹性碰撞circleBounce第 254~279 行export function circleBounce(p1: ICircleBouncer, p2: ICircleBouncer): void { const { x: xVelocityDiff, y: yVelocityDiff } p1.velocity.sub(p2.velocity), [pos1, pos2] [p1.position, p2.position], { dx: xDist, dy: yDist } getDistances(pos2, pos1), minimumDistance 0; // Prevent accidental overlap of particles if (xVelocityDiff * xDist yVelocityDiff * yDist minimumDistance) { return; } const angle -Math.atan2(yDist, xDist), m1 p1.mass, m2 p2.mass, u1 p1.velocity.rotate(angle), u2 p2.velocity.rotate(angle), v1 collisionVelocity(u1, u2, m1, m2), v2 collisionVelocity(u2, u1, m1, m2), vFinal1 v1.rotate(-angle), vFinal2 v2.rotate(-angle); p1.velocity.x vFinal1.x * p1.factor.x; p1.velocity.y vFinal1.y * p1.factor.y; p2.velocity.x vFinal2.x * p2.factor.x; p2.velocity.y vFinal2.y * p2.factor.y; }实现细节值得注意的有三点先做物理碰撞再缩放两个粒子的速度先被旋转到碰撞法线坐标系按质量mass做弹性碰撞求解collisionVelocity再旋转回世界坐标系最后才用各自的factor.x/factor.y做轴向缩放第 275~278 行。也就是说bounce系数是叠加在标准弹性碰撞结果之上的“弹性增益/阻尼”。重叠保护第 261~263 行通过速度差与位移方向的点积判断若两粒子正在相互远离则直接返回避免对已经分离的粒子重复触发碰撞。系数是各自独立生效的每个粒子使用自己的bounce配置缩放自己的速度分量因此即使两个粒子的配置不同碰撞也各自按自身系数结算。实践建议以1为基准调参默认值1代表“纯物理反弹”。想要更柔和的碰撞就取0.x想要更活泼就适当放大文档示例中的50属于演示级数值实际页面背景动效中通常不宜超过1 ~ 2否则粒子动能会持续放大、整体运动趋向失控。各向异性制造风格垂直系数调小如0.5配合水平系数保持1可以得到“快速横向弹开、垂直方向迅速衰减”的横向扩散感常用于模拟气体、碎片飞散。用 range 增加自然度固定系数会让所有粒子节奏一致{ min, max }写法让每个粒子拥有独立系数群体碰撞更富变化代价是视觉结果不完全可复现取值随机。区分两个 “bounce”particles.bounce本文主题粒子间碰撞的弹性系数内置于 engine与interactivity.modes.bounce外部交互模式鼠标/元素触发需安装 tsparticles/interaction-external-bounce 插件并启用loadExternalBounceInteraction参考 interactions/external/bounce/README.md是两个独立机制配置位置不同勿混淆。参考官方选项文档markdown/Options/Particles/Bounce.md类型定义engine/src/Options/Interfaces/Particles/Bounce/IParticlesBounce.ts配置装载类engine/src/Options/Classes/Particles/Bounce/ParticlesBounce.ts、engine/src/Options/Classes/Particles/Bounce/ParticlesBounceFactor.ts配置挂载点engine/src/Options/Classes/Particles/ParticlesOptions.ts碰撞求解实现engine/src/Utils/Utils.ts【免费下载链接】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），仅供参考