在 React Native 中使用衰减动画和循环动画

Question

我最近一直在学习React Native动画，我正在尝试实现一些动画。 我想创建一个弹跳球动画，我做到了。一切工作正常，但是这个动画在高度和 0 之间循环，感觉非常不自然。所以我想添加一个衰减，每次弹跳时它都会弹跳更小的高度（基本上呈指数下降）。

我尝试在多个位置添加衰减动画只是为了看看会发生什么，但无论我在哪里放置 Animated.decay 代码，动画要么冻结，要么出现一些错误。

这是我当前的代码

FALL_HEIGHT = 200;
const translateY = useRef(new Animated.Value(-FALL_HEIGHT)).current;

  useEffect(() => {
    Animated.loop(
      Animated.sequence([
        Animated.spring(translateY, {
          toValue: 0,
          useNativeDriver: true,
          overshootClamping: true,
          bounciness: 20,
        }),
        Animated.spring(translateY, {
          toValue: -FALL_HEIGHT,
          useNativeDriver: true,
          bounciness: 1,
          overshootClamping: true,
        }),
      ])
    ).start(() => {});
  }, []);

Answer 1

const [animationValue, setAnimationValue] = useState(new Animated.Value(0));

const startAnimation = () => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(animationValue, {
          toValue: 20,
          duration: 2000,
        }),
        Animated.timing(animationValue, {
          toValue: 0,
          duration: 2000,
        }),
      ]),
      {
        iterations: 10,
      }
    ).start();
  };

setAnimationValue(new Animated.Value(0)); // where it has to start again

startAnimation(); // to start the animation