react-native - 如何使用 React Native 中的 Animated API 将命运之轮停在特定点？

Question

我正在开发命运之轮，我希望轮子在旋转时迭代四次，并停止到一个特别给定的值。我想要的只是将轮子旋转四次并停在特定的切片上。我在想下面的代码可以实现我的想法。

Animated.loop(

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

我使用角度作为价值。我得到“toValue”的公式是“targetAngle * 4”。这可行，但我想像 Animated.decay() 一样在最后一次迭代中减速旋转。有没有更好的办法来解决这个问题？

Answer 1

你可以做

 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",
    ],
  });

您可以更改值以获得所需的结果

我在博览会上做了一个例子

附上一张gif图片