how can I stop the wheel of fortune to particular point using Animated API in React Native?

Question

I'm developing wheel of fortune where I want the wheel to iterate four times while spinning, and stop to a particularly given value. All I want is to spin the wheel four times and stop to a particular slice. I'm thinking below code can work my idea.

Animated.loop(

      Animated.timing(this._angle, {
        toValue: 920,
        duration: 5000,
      }),//.start();
      {
        iterations: 1
      }
    ).start();

I'm using angle as value. My formula to get the 'toValue' is "targetAngle * 4". This works but I want to decelerate the spinning in its last iterate just like Animated.decay() does. Is there any better idea to resolve this issue?

Answer 1

you can do

 const onPress = () => {
    Animated.timing(RotateAnimeted, {
      toValue: 6,
      duration: 1000,
    }).start();
  };

  const Rotate = RotateAnimeted.interpolate({
    inputRange: [0, 1, 2, 3, 4, 5, 6],
    outputRange: [
      "0deg",
      "360deg",
      "720deg",
      "840deg",
      "940deg",
      "1020deg",
      "1080deg",
    ],
  });

You can change the values to get the result you want

I did an example at the expo

Attaches a gif image