重复一个带有延迟的重复动画并重新设置动画答案

【问题标题】：Repeating a repeating animation with delay with reanimated重复一个带有延迟的重复动画并重新设置动画
【发布时间】：2022-10-22 17:06:08
【问题描述】：

使用 react-native-reanimated，我试图无限重复一个动画，这也是一个重复的动画，有延迟。

使用我的代码，延迟和嵌套重复动画被触发，但不是无限的。

有任何想法吗？


useEffect(() => {
  progress.value = withRepeat(
   withDelay(2000, withRepeat(withTiming(0, { duration: 500 }), 6, true)),
   -1,
   true
  );
 }, []);

【问题讨论】：

标签： react-native react-native-reanimated react-native-reanimated-v2

【解决方案1】：

您已将外部 withRepeat 设置为 1，因此它应该只重复一次，这是有意的吗？使用负数无限重复。

The docs for withRepeat 表示第三个参数（反向）设置为 true 的 withRepeat 不适用于 withDelay 和 withSequence 动画，这也可能导致问题。您可能想尝试在 withSequence 调用中手动反转动画并重复该操作。

【讨论】：

关于 withRepeat 设置为 1，是的，这是一个错字。我也尝试将 withRepeat 的第三个参数设置为 false，但也不起作用。我也尝试过重复一系列重复的动画，但它不起作用
它是否可以毫无延迟地工作？重复序列有效吗？有没有适合你的嵌套重复？
感谢您的帮助安倍！你是对的，即使是最简单的嵌套重复也不起作用......是我还是你认为这是一个限制？我试图在复活的 github repo 的讨论选项卡中提问，但还没有答案
这是有道理的，我认为你在文档上发帖是正确的。我认为如果您需要一个临时解决方案，它可能会与 setInterval 一起破解某些东西。
是的，setInterval 现在可以完成这项工作！

【解决方案2】：

您可以通过使用Animated.sequence 来实现这一点这段代码基本上是通过在动画完成后重新运行函数来工作的

 function fadeAnimation() {
    Animated.sequence([
      Animated.timing(progress.value, {
        toValue: 0,
        duration: 500,
        delay: 1000,
        useNativeDriver: true,
      }),
      Animated.timing(progress.value, {
        toValue: 1,
        duration: 500,
        useNativeDriver: true,
      }),
    ]).start(() => {
        fadeAnimation();
    });
  }

    useEffect(() => {
        fadeAnimation()
    }, []);

【讨论】：

这个方案使用了React Native内置的Animated库，原来的问题是关于Reanimated

【解决方案3】：

Reanimated 没有找到解决方案，但正如@Abe 所建议的那样，一个简单的 setInterval 就可以了

 useEffect(() => {
  progress.value = withRepeat(withTiming(0, { duration: 400 }), 6, true);
  const interval = setInterval(() => {
   progress.value = withRepeat(withTiming(0, { duration: 400 }), 6, true);
  }, 6000);
  return () => clearInterval(interval);
 }, []);

【讨论】：

【解决方案4】：

就像@Abe 在他的回答中指出的那样，与其他动画修饰符一起包装时，不支持withRepeat 的reverse 属性。

但是，您可以在没有setInterval 的情况下执行此操作 - 使用withSequence 来模拟“反向动画”

// starting delay of 2000ms
// play animation 6 times
// repeat

progress.value =
withRepeat(
  withDelay(2000, withRepeat(
    withSequence(
      // split duration of 500ms to 250ms
      withTiming(goToValue, {duration: 250, easing: Easing.inOut(Easing.ease)}),
      withTiming(initialValue, {duration: 250, easing: Easing.inOut(Easing.ease)}),
    )
  , 6))
, -1)

【讨论】：