用途:构建随手指速度变化仍保持恒定密度的指针拖尾。核心机制是按移动距离发射而非按时间:累加位移并以固定步长消耗,E.acc += moved; while (E.acc >= STEP && guard++ < 14) { E.acc -= STEP; spawn(...); }。这样路径间距恒为 STEP,慢速与快速挥动都呈连续丝带;按计时器发射则间距随速度变化,快速挥动会断成散点,静止时粒子堆在一点。
主要能力与要点:每帧粒子应放在该段路径各自的距离处,而非全部堆在当前指针位置;环形缓冲先取槽位再推进索引;发射器用阻尼滞后于指针,避免快速挥动时像焊在光标上;3D 场景中把点挂在相机下并用视锥半高映射,使用忽略深度的四边形或点并单独渲染层;散布按所在平面尺寸的比例表达,而非绝对值;粒子需有滑行阻尼、缓慢卷曲与浮力;圆形精灵无需每粒子角度属性;静止时以约 0.42 秒一次的低频空闲发射保留气息。
使用方式:示例为无依赖的原生 JavaScript,经 Canvas 2D 渲染,CSS 仅用于界面样式,不含着色器、WebGL 或 Three.js。建议将实时画布与界面分离以便测试。
适用场景与限制:适合需要拖尾密度响应手速的指针效果。触摸设备无悬停位置,需用 matchMedia('(hover: none)') 判断并停放或仅在拖动时驱动;prefers-reduced-motion 下应渲染设计好的静止帧而非隐藏;document.hidden 时暂停并重置时间基准,dt 限制在约 1/30 秒,DPR 上限为 2;需提供键盘路径。性能成本主要来自叠加填充,优先调整精灵尺寸与数量;不要为提升 z-index 改为 DOM 覆盖层,会丢失后期链效果。具体数值参数与验证清单见原文,未提供的收费、平台等信息暂未提供。