React Native 不使用Web API重复重新设置动画(setInterval)

wgx48brx 于 2023-03-09 发布在 React

关注(0)|答案(1)|浏览(101)

因此，我使用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来实现它？

react-native

来源：https://stackoverflow.com/questions/75636824/repeat-reanimated-animation-without-using-web-apis-setinterval

1条答案

按热度按时间

nwwlzxa71#

您应该能够使用以下各项的组合：

withRepeat，一个Reanimated函数，用于将动画重复指定的次数或无限次：在你的例子中，使用-1，无穷大。
withSequence，另一个Reanimated函数，按顺序运行提供的动画：对你来说是从1到5

这将是（从the discussion）：

const SomeThreshold = 5;

const Example = () => {
  const progress = useSharedValue(0);

  useEffect(() => {
    progress.value = withRepeat(
      withSequence(
        withTiming(0), 
        ...Array(SomeThreshold)
          .fill(0)
          .map((_, i) => withTiming(i + 1, {duration: 2000 })),
      ),
      -1,
    );
  }, []);

// ...
};

其思想是使用Array(SomeThreshold).fill(0).map((_, i) => withTiming(i + 1, {duration: 3000}))创建一个withTiming动画数组，该数组将进度值从1更新为SomeThreshold，每次更新需要3秒。
.map((_, i) => withTiming(i + 1, {duration: 3000}))部分Map到数组，并为每个元素创建一个withTiming动画，将进度值更新为i + 1。
再加上withRepeat(withSequence(...), -1)，这将无限重复。
withSequence接受2个参数：

第一：动画。
第二：动画数组（可迭代）。

赞(0）回复(0）举报 2023-03-09

我来回答

React Native 不使用Web API重复重新设置动画(setInterval)

1条答案

相关问题

热门标签

最新问答