如何修改摩擦力让JavaScript旋转轮盘停在指定角度？

你之前的思路错误在于假设每帧速度是线性平均的，但轮盘速度是指数衰减的（每帧乘以摩擦力f），总角度增量是等比数列的和，不能用总角度除以帧数来计算f。

核心数学推导 #

每帧的速度序列为：v₀, v₀*f, v₀*f², ..., v₀*f^(n-1)，其中：

• v₀ 是触发停止时的初始速度
• n 是速度降到<0.002前的帧数
• 总角度增量Δθ是该等比数列的和：

  Δθ = v₀*(1 + f + f² + ... + f^(n-1)) = v₀*(fⁿ - 1)/(f - 1)
  

当停止时，v₀*fⁿ ≈ 0.002（目标停止速度），代入可得到近似的f计算公式：

f = 1 + (0.002 - v₀)/Δθ

但由于帧数n必须是整数，这个近似值需要迭代调整来匹配实际需求。

实现步骤 #

1. 计算正确的角度增量Δθ
   处理轮盘的循环特性（角度在0~2π区间循环），确保Δθ是轮盘需要转动的实际正角度（可包含多圈）：

   const twoPI = Math.PI * 2;
   const initialAngle = theAngle;
   const desiredStopAngle = stopAngle; // 你的目标角度（0~2π区间）
   
   // 计算初始角度与目标角度的差值，调整为正的等效角度
   let deltaTheta = desiredStopAngle - (initialAngle % twoPI);
   deltaTheta = ((deltaTheta % twoPI) + twoPI) % twoPI;
   
   // 可选：让轮盘至少转1~2圈再停，提升真实感
   // deltaTheta += twoPI * 2;
   

2. 迭代求解正确的摩擦力f
   用近似值作为初始猜测，迭代调整f直到总角度增量与Δθ的误差在可接受范围内：

   const targetSpeed = 0.002;
   const initialVelocity = velocity;
   let f = 0.98; // 初始猜测值
   const tolerance = 0.001; // 角度误差容忍度
   
   // 最多迭代100次，避免死循环
   for (let i = 0; i < 100; i++) {
     let currentV = initialVelocity;
     let totalRotated = 0;
     
     // 模拟减速过程，计算总转动角度
     while (currentV >= targetSpeed) {
       totalRotated += currentV;
       currentV *= f;
     }
     
     // 计算误差：当前总角度与目标增量的差值
     const error = totalRotated - deltaTheta;
     if (Math.abs(error) < tolerance) break;
     
     // 调整f：总角度过大说明减速太快（f太小），需增大f；反之减小f
     f += error * 0.0001; // 调整步长可根据实际情况微调
     // 限制f的合理范围，避免不减速或反向
     f = Math.max(0.9, Math.min(0.999, f));
   }
   
   // 最终得到的f就是让轮盘停在目标角度的摩擦力
   config.friction = f;
   

关键说明 #

• 迭代步长0.0001可根据轮盘速度范围微调，步长太小会增加迭代次数，太大可能导致震荡。
• 若需要轮盘转固定圈数再停，直接在deltaTheta上加上k*2π即可（k为圈数）。
• 必须保证f在0~1之间（严格小于1，否则轮盘不会减速），代码中限制了0.9~0.999的范围以避免极端值。

内容的提问来源于stack exchange，提问作者Wietse