tsParticles Interaction Plugins 全面指南外部交互、粒子间交互与 Light 光照模式详解【免费下载链接】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 仓库中的交互插件体系interactions/目录。这些插件扩展了引擎的 interactivity交互系统通过interactivity.modes进行参数配置并通过interactivity.events中的onClick/onHover事件激活。读完本文你将掌握全部 17 种外部交互模式、4 种粒子间交互模式及 Light 光照插件的功能定位、配置方式与源码级实现原理能够直接落地到自己的粒子特效项目中。交互插件的整体架构tsParticles 的交互系统由引擎的 interactivity 机制驱动交互插件则按职责分为三类分别存放于interactions/external/外部交互模式由鼠标/触摸事件hover、click 等触发作用于指针与粒子的关系interactions/particles/粒子间交互模式作用于粒子与粒子的关系interactions/light/独立的 Light 光照插件为粒子增加光照与阴影效果。配置层面每个插件都在interactivity.modes下注册自己的模式参数对象而触发开关则在interactivity.events中声明。这一点在关联文档 markdown/Options/Plugins/Interactions.md 中被明确为两条铁律通过interactivity.modes配置、通过interactivity.events激活。在进入各模式细节之前先回顾 interactivity 根配置的三个属性详见 markdown/Options/Interactivity.mdKey类型说明detectsOnstring由哪个元素捕获交互事件取值canvas仅粒子画布、parent画布父元素、window整个窗口适用于 canvas 位于页面内容之后、z-index为负的场景eventsobject哪些事件被启用、触发哪些模式详见 markdown/Options/Interactivity/Events.mdmodesobject各模式的微调参数详见 markdown/Options/Interactivity/Modes.md外部交互模式External Interaction Modes外部交互模式全部由鼠标/触摸事件触发对应tsparticles/interaction-external-*系列包。下表完整列出 17 个模式及其行为与关联文档中的清单一一对应包名模式名行为描述tsparticles/interaction-external-attractattract将粒子吸引向光标tsparticles/interaction-external-bouncebounce将粒子从光标处弹开tsparticles/interaction-external-bubblebubble放大光标附近粒子的尺寸/改变其透明度tsparticles/interaction-external-cannoncannon从光标处发射粒子tsparticles/interaction-external-connectconnect在邻近粒子之间绘制连线tsparticles/interaction-external-destroydestroy销毁光标下方的粒子tsparticles/interaction-external-dragdrag用光标拖拽粒子tsparticles/interaction-external-grabgrab从光标到粒子绘制连线tsparticles/interaction-external-parallaxparallax鼠标移动时产生视差位移tsparticles/interaction-external-particleparticle点击时生成一个粒子tsparticles/interaction-external-pausepause点击时暂停动画tsparticles/interaction-external-poppop弹出移除光标附近的粒子tsparticles/interaction-external-pushpush点击时添加粒子tsparticles/interaction-external-removeremove点击时移除粒子tsparticles/interaction-external-repulserepulse将粒子从光标处推开tsparticles/interaction-external-slowslow减慢光标附近粒子的速度tsparticles/interaction-external-trailtrail粒子尾迹跟随光标这些模式都在各自的src/Options/Classes/下实现了选项类实现IOptionLoader接口并在src/*.ts顶层类中继承引擎的ExternalInteractorBase通过handleClickMode、interact、isEnabled等钩子接入交互管线。常用外部模式的核心参数以关联文档与 markdown/Options/Interactivity/Modes.md 的参数表为基础结合源码核实各默认值Connect连线在光标附近为彼此接近的粒子绘制临时连线。Key类型示例说明connect.distancenumber100粒子之间可连线的最远距离connect.radiusnumber60激活 connect 的光标作用半径connect.links.opacitynumber0.5连线透明度Grab抓取从光标到附近粒子绘制连线。Key类型示例说明grab.distancenumber100光标与粒子间最大连线距离grab.links.opacitynumber0.5抓取线透明度Bubble气泡放大光标附近粒子的尺寸或改变透明度。其选项类实现位于 interactions/external/bubble/src/Options/Classes/BubbleBase.tsKey类型默认值说明bubble.distancenumber200效果半径bubble.sizenumber未定义气泡内粒子的目标尺寸bubble.durationnumber0.4过渡时长秒bubble.opacitynumber未定义气泡内粒子的目标透明度支持范围值bubble.mixbooleanfalse是否将气泡颜色与粒子自身颜色混合bubble.colorstring/object/数组未定义气泡颜色可传入单个或多个OptionsColor从源码BubbleBase.ts可以看到distance与duration有显式默认值而size、opacity、color默认未设置即不干预对应属性。Repulse斥力将粒子从光标处推开。Key类型示例说明repulse.distancenumber200斥力作用半径repulse.durationnumber1.2粒子被推开后持续/恢复时长repulse.speednumber1斥力移动速度值得注意Repulse 的选项类 Repulse.ts 继承自RepulseBase并额外支持divs属性SingleOrMultipleRepulseDiv即可将斥力作用绑定到页面上的特定 div 元素上而非仅跟随光标。Bubble 同样支持divs见 Bubble.ts。Push推入点击时在光标附近添加新粒子。选项类位于 interactions/external/push/src/Options/Classes/Push.tsKey类型默认值说明push.quantitynumber范围值4每次点击添加的粒子数量push.defaultbooleantrue是否使用默认粒子组push.groupsstring[][]从指定粒子组中推入粒子push.particlesobject/数组未定义为被推入的粒子单独指定粒子选项其中quantity的类型是引擎的RangeValue意味着可以传范围如{ min: 2, max: 6 }实现随机数量groups配合particles.groups使用可以在点击时从指定分组生成粒子源码见 Push.ts。Remove移除点击时移除光标附近的粒子。Key类型示例说明remove.quantitynumber4每次点击移除的粒子数量Attract吸引将粒子拉向光标。其选项类 interactions/external/attract/src/Options/Classes/Attract.ts 完整定义了以下参数Key类型默认值说明attract.distancenumber200吸引作用半径attract.durationnumber0.4粒子被吸引后保持状态的时长秒attract.speednumber1吸引移动速度attract.factornumber1吸引力度倍率attract.maxSpeednumber50被吸引粒子的最大速度attract.easingstringease-out-quad吸引动画使用的缓动函数attract.restore.enablebooleanfalse交互结束后是否恢复粒子原位attract.restore.delaynumber0恢复前的延迟秒attract.restore.speednumber0.08恢复速度源码中被钳制在0.001与1之间attract.restore.followbooleantrue恢复时是否跟随粒子原有运动方向补偿位移从 Attractor.ts 的init实现可以看到attract.distance会被换算为container.retina.attractModeDistance attract.distance * pixelRatio即最终生效距离与设备像素比相关interact方法则依据onHover/onClick的启用状态分别调用hoverAttract或clickAttract见 Attractor.ts。恢复机制通过#restoreData记录每个粒子的原始位置在交互结束后逐帧把粒子送回原位Attractor.ts。Slow减速减慢光标附近粒子的速度。Key类型示例说明slow.factornumber3减速因子越大越慢slow.radiusnumber200减速作用半径粒子间交互模式Particle-to-Particle Interactions这类模式不依赖鼠标/触摸而是作用于粒子之间的关系对应tsparticles/interaction-particles-*系列包包名模式名行为描述tsparticles/interaction-particles-attractattract粒子之间相互吸引tsparticles/interaction-particles-collisionscollisions粒子之间发生碰撞tsparticles/interaction-particles-linkslinks在相连粒子之间绘制连线tsparticles/interaction-particles-repulserepulse粒子之间相互排斥它们与外部交互模式的attract / repulse同名但语义不同外部模式的对象是光标 vs 粒子粒子间模式的对象是粒子 vs 粒子。links连线是粒子特效中最经典的效果之一其配置项如links.distance、links.color、links.opacity、links.width位于interactivity.modes.links下同时也可通过particles.links配置为粒子级的常驻属性。Light 光照交互Light Interaction包名行为描述tsparticles/interaction-light为粒子增加光照/阴影效果Light 插件同时包含外部与粒子两部分实现ExternalLighter.ts 处理来自光标的光源照射ParticlesLighter.ts 处理粒子之间的遮挡阴影。其选项类结构位于 interactions/light/src/Options/Classes/包含Light根选项聚合area与shadow两部分LightArea光照区域参数如gradient渐变起始/结束LightShadow阴影参数如color阴影颜色、length阴影长度LightGradient光照渐变起止色。典型的light模式配置形如{ interactivity: { events: { onHover: { enable: true, mode: light } }, modes: { light: { area: { gradient: { start: { value: #ffffff }, stop: { value: #000000 } } }, shadow: { color: { value: #000000 }, length: 30 } } } } }注意上例为基于选项类结构推导的典型写法具体以 interactions/light/src/Options/Interfaces/ 中声明的接口为准。用法示例事件的激活与模式的配置关联文档给出了最基础、最实用的配置骨架在events中激活模式在modes中微调参数。{ interactivity: { events: { onClick: { enable: true, mode: push }, onHover: { enable: true, mode: repulse } }, modes: { push: { quantity: 4 }, repulse: { distance: 150 } } } }几点重要事实mode支持数组。一个事件可以同时触发多个模式例如mode: [push, bubble]见 markdown/Options/Interactivity/Modes.md 的完整示例。mode只声明启用哪个模式该模式的参数一律在modes下配置即使不配置modes项模式也会使用源码中的默认值运行。模式必须由对应插件包提供。tsparticles/slim及以上聚合包已内置常见交互插件使用bubble、connect、grab等模式时若未加载相应插件模式不会生效这是 markdown/Options/Interactivity.md 明确指出的常见陷阱。插件与包名对应关系tsparticles/interaction-external-*提供外部模式tsparticles/interaction-particles-*提供粒子间模式tsparticles/interaction-light提供光照模式插件源码均位于仓库 interactions/ 目录下可直接查阅。常见陷阱与性能建议结合关联文档及 markdown/Options/Interactivity.md 中的警示实践中最容易踩的坑有detectsOn与页面布局不匹配当 canvas 作为背景层位于页面内容之后如z-index: -1时若仍用canvas侦测hover/click 事件将无法触发应改用window。只配置了modes却忘记在events中启用模式不会自动激活。忘记加载对应交互插件使用bubble、connect、grab等模式而只引入轻量核心包时效果不会出现需引入tsparticles/slim或更高聚合包或按需引入tsparticles/interaction-external-*对应包。distance设置过大交互检测距离会随画布尺寸缩放如 attract 模式中distance * pixelRatio过大的距离会显著增加每帧参与计算的粒子数量造成性能退化。总结tsParticles 的交互插件体系按外部交互—粒子间交互—光照三个维度组织统一遵循events激活、modes配置的约定。外部交互模式覆盖了吸引、弹开、气泡、连线、拖拽、推入、移除、斥力、减速、尾迹等指针交互场景粒子间模式提供吸引、碰撞、连线、排斥四类粒子关系效果Light 插件则补充了光照与阴影的视觉层次。理解每个模式的参数默认值与触发机制可对照各插件src/Options/Classes/与顶层交互类源码就能在引入对应插件包后快速组合出丰富、可控的交互粒子效果。相关文档Interactivity交互根配置Interactivity Modes各模式参数表Interactivity Events事件配置Options 根文档交互插件源码目录interactions/external/、interactions/particles/、interactions/light/【免费下载链接】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），仅供参考