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

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

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

Answer 2

我很确定这就是解决方案。

你的正常衰退：

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'
    });

React Native，动画负旋转

React Native , animated negative rotation

react-native

react-animated