在不使用 Web API 的情况下重复重新动画 (setInterval)

Question

所以我有一个使用

React Native Reanimated

的动画，每 3 秒重复一次并更新

SharedValue

。我已经使用

setInterval

实现了如下所示。

const SomeThreshold = 5;

useEffect(() => {
  progress.value = 0;

  const interval = setInterval(() => {
    if (progress.value === SomeThreshold) {
      progress.value = 0;
      return;
    }

    progress.value = withTiming(progress.value + 1, {
      duration: 2000,
    });
  }, 3000);

  return () => clearInterval(interval);
}, []);

我想要达到的目标是

-> 动画开始

-> 进度 = 1

-> 进度 = 2

-> 进度 = 3

-> 进度 = 4

-> 进度 = 5

-> 进度 = 1

-> 进度 = 2

并且这种情况会无限地持续下去。

有没有什么方法可以在不使用像 setInterval 这样的 Web API 的情况下实现它，也许还可以使用

withRepeat

。

Answer 1

在处理react-native-reanimated时，间隔的处理方式有所不同。 您也许可以考虑以下内容。

  useEffect(() => {
    progress.value = withRepeat(
      withTiming(5, { duration: 2000 }), // Animate to 5 over 2 seconds
      -1, // Repeat indefinitely
      true // Reverse direction
    )
  }, [])