带reanimated的延迟的重复动画

Question

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

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

有什么想法吗?

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

Answer 1

就像@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)

Answer 2

没有找到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);
}, []);

Answer 3

你可以不使用setInterval，在每个动画上添加withDelay。

withRepeat(
withSequence(
withDelay(
2000,
withTiming(0, {
duration: 300,
easing: Easing.inOut(Easing.ease),
}),
),
withDelay(
2000,
withTiming(1, {
duration: 300,
easing: Easing.inOut(Easing.ease),
}),
),
),
-1,
);

Answer 4

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

withRepeat的文档说，withRepeat的第三个参数(反向)设置为true不能正常工作withDelay和withSequence动画，这也可能导致一个问题。你可能想尝试在withSequence调用中手动反转动画并重复该操作。

Answer 5

您可以通过使用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()
}, []);