Responsive to birth, animated negative rotation

I use a respirator to capture the user's movement, up or down, and still rotate the circle:

if positive:

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

if negative:

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

and then I use the above to rotate two different circles:

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

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

For positiveit works fine, but for the negative it rotates counterclockwise 350 degrees, and then rotates clockwise.

NOTE. The reason I use identityit is because the type of animation is this decay, and I don’t know what value it can be at that time, and the speed of the animation decaydepends on the speed of the user.

So when I register the values, it looks like this:

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

I know this is the problem identity, but how can I fix it?

Animated api?

+4
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'
    });
+2
 const animationNegativeStyle = animationNegative.interpolate({
        inputRange: [0, 300],
        outputRange: ["360deg", "0deg"],
        extrapolate: 'identity'
    });

, , , , .

0

Source: https://habr.com/ru/post/1696218/


All Articles