如何从反应原生的动画值中获取绝对值？答案

【问题标题】：How to get absolute value from animated value in react native?如何从反应原生的动画值中获取绝对值？
【发布时间】：2021-05-03 05:58:45
【问题描述】：

假设我有一个动画值 pan.y 等于 -3。如何从 -3 中获取绝对值，即 3。

我尝试了 Animated.modulos(pan.y, 1)，但没有成功。我不知道为什么这个函数中有第二个参数。

就像文档中所说的那样：

静态模（a，模数）

创建一个新的 Animated 值，它是提供动画值

这是链接：

https://reactnative.dev/docs/animated#modulo

【问题讨论】：

标签： reactjs animation native absolute

【解决方案1】：

这有点晚了，但我还需要采用Animated.Value 的abs 以便在2 个Animated.Values 之间实现max，所以希望这可以帮助其他尝试这样做的人。

为了提供有关该问题的更多上下文，Animated.modulus 在这里不起作用的原因是因为modulus 等效于x % y。例如，-2.3 % 1 = 0.7（所以虽然这个值是正数，但它并不能满足你的需要。

计算Animated.Value 的abs 值的一般思路是取一些值a 和它的否定-a，并将它们钳制在0 和inf 之间。这样，您将得到两个值，即绝对值和0。然后你可以简单地添加它们。

看起来像这样：

function abs(a) {
  const b = Animated.multiply(a, -1);
  const clampedA = Animated.diffClamp(a, 0, Number.MAX_SAFE_INTEGER);
  const clampedB = Animated.diffClamp(b, 0, Number.MAX_SAFE_INTEGER);

  return Animated.add(clampedA, clampedB);
};

有了绝对值，那么很容易实现max 和min 函数：max(r,s) = 0.5 * (r + s + |r-s|) 和min(r,s) = 0.5 * (r + s - |r-s|)。

等效的javascript代码（abs是上面的方法）：

function max(a, b) {
  return Animated.multiply(
    0.5,
    Animated.add(Animated.add(a, b), abs(Animated.subtract(a, b)))
  );
};

function min(a, b) {
  return Animated.multiply(
    0.5,
    Animated.subtract(Animated.add(a, b), abs(Animated.subtract(a, b)))
  );
};

【讨论】：

感谢您的回答。但是，当我尝试使用它时，我不得不使用interpolate 而不是diffClamp 来计算clampedA/clampedB，例如：const clampedA = a.interpolate({inputRange: [0, 1], outputRange: [0, 1], extrapolateLeft: "clamp"});。 ```

【解决方案2】：

如果您的值的范围是有限且已知的，您还可以使用interpolate 来获取绝对值。例如，要得到a 的绝对值，因为它总是在[-120, 120] 之间：

a.interpolate({
    inputRange: [-120, 0, 120],
    outputRange: [120, 0, 120]
})

【讨论】：

【解决方案3】：

在 javascript 中你可以使用 Math.abs 但我不确定它是否可以工作

【讨论】：

Math.abs 不适用于动画值我认为它必须是“加、减、模、除”这些函数之一，但我不知道该怎么做