Repeating a repeating animation with delay with reanimated-CodePudding

Using react-native-reanimated, I'm trying to repeat infinitely an animation which is also a repeated animation, with a delay.

With my code, the delay and the nested repeat animation are triggered but not the inifinite one.

Any ideas ?


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

CodePudding user response：

You can achieve this by using Animated.sequence This code basically works by re-run the function when the animation done

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

CodePudding user response：

You've set the outer withRepeat to 1, so it should only repeat once, is that intended? Use a negative number to repeat indefinitely.

The docs for withRepeat say that withRepeat with the third argument (reverse) set to true doesn't work properly for the withDelay and withSequence animations, that could also be causing an issue. You might want to try reversing the animations manually in a withSequence call and repeating that.