React Native，动画负旋转

Question

我正在使用平移响应器来捕捉用户的滑动动作，向下或向上，然后我旋转一个圆圈：

如果是肯定的：

 Animated.decay(animation, {velocity: fingerVelocity}).start();

如果是否定的：

 Animated.decay(animationNegative, {velocity: fingerVelocity}).start();

然后我用上面来旋转两个不同的圆圈：

  const animationStyle = animation.interpolate({
        inputRange: [0, 300],
        outputRange: ["0deg", "360deg"],
        extrapolate: 'identity'
    });

  const animationNegativeStyle = animationNegative.interpolate({
        inputRange: [0, 300],
        outputRange: ["0deg", "-360deg"],
        extrapolate: 'identity'
    });

对于positive，它可以正常工作，但对于负数，它会逆时针旋转 350 度，然后顺时针旋转。

注意：我使用identity 的原因是因为动画类型是decay，我不知道当时的值是多少，decay 动画的速度取决于用户滑动的速度。

所以当我记录值时，它是这样的负数：

value interpolatedValue 0 -360 1 -359 2 -358 3 -357 .... 360 0 361 1 362 2 ....

我知道问题出在identity，但如何解决呢？

这甚至可以使用Animated api 吗？

Answer 1

我很确定这是解决方案。

你的正常衰变：

Animated.decay(animation, {velocity: fingerVelocity}).start();

现在值在增加，这不是您想要的，您希望它们减少

 const animationNegative = Animated.multiply(animationNegative, -1);

 const animationNegativeStyle = animationNegative.interpolate({
        inputRange: [0, 1],
        outputRange: ["0deg", "1deg"], // we don't care, we just want the identity to kick in and use the value as is
        extrapolate: 'identity'
    });

Answer 2

 const animationNegativeStyle = animationNegative.interpolate({
        inputRange: [0, 300],
        outputRange: ["360deg", "0deg"],
        extrapolate: 'identity'
    });

我不确定这个解决方案是否可行，但至少你可以尝试一下并分享它的结果