如何设计模数弹簧答案

【问题标题】：How to design a modulo spring如何设计模数弹簧
【发布时间】：2020-11-07 08:00:44
【问题描述】：

我有一个应用于旋转元件的弹簧：

这个东西需要左右旋转。如果我将角度附加到弹簧上，有时旋转的圆圈会走很长的路。在此设置中实现模块化弹簧的正确方法是什么？

我当前的解决方案使用以下功能：

export function useNearestModulo(pp: number, m: number): number {
  const q = React.useRef<number | null>(null);

  // If the function hasn't been called yet, just return P' which satisfies
  // P' % M = P', but record it as Q for the next call.
  if (q.current == null) {
    q.current = pp;
    return pp;
  }

  // Calculate Q' that gets as close to Q as possible while satisfying
  // Q' % M = P'.
  const qq = Math.round((q.current - pp) / m) * m + pp;
  q.current = qq;
  return qq;
}

useNearestModulo 返回一个值，以最小化围绕 a 行进的距离圆圈。它总是满足useNearestModulo(P, M) % M = P。

useNearestModulo(P', M) = Q' 使得Q' % M = P' 但最小化|Q' - Q|，其中Q 是上一次调用的返回值。返回值Q' 是然后用作下一次调用的Q，依此类推。

在下面的代码中，P'是pp，Q'是qq。

示例（调用顺序）：

  useNearestModulo( 0, 12) =  0
  useNearestModulo(10, 12) = -2
  useNearestModulo( 3, 12) =  3
  useNearestModulo( 7, 12) =  7
  useNearestModulo(10, 12) = 10

我使用函数如下：

const { spring } = useSpring({
  angle: useNearestModulo(angle, 12)
});

这会导致物体以正确的方向旋转，但由于弹簧目标不断变化，因此产生的运动有点生涩。

【问题讨论】：

你能添加一些代码吗？到目前为止，您尝试了什么？

标签： react-spring

【解决方案1】：

我仍在尝试调试抖动，但这与“弹簧目标不断变化”无关。这只是我对 React 的误解。所以我发布的解决方案（基本上使用模数作为弹簧目标）是一个可行的解决方案。当然还有更简单的实现不使用useRef，但这正是我碰巧实现的方式。

【讨论】：