i want to make loop animation
loop(
1.fade in image for 0.5sec
2.make image visible for 2.5sec
3.fade out image for 0.5sec
4.make image invisible for 2.5sec
)
but result is weird, i detect my image blink.
const fadeAni = useRef<Animated.Value>(new Animated.Value(0)).current;
useEffect(() => {
Animated.loop(
Animated.sequence([
Animated.timing(fadeAni, {
toValue: 1,
duration: 500,
useNativeDriver: true,
}),
Animated.delay(2500),
Animated.timing(fadeAni, {
toValue: 0,
duration: 500,
useNativeDriver: true,
}),
Animated.delay(2500),
]),
).start()
}, [])
return (
<Animated.View style={{ opacity: fadeAni }}>
<ImageBackground source={imageSource} style={styles.area}>
</ImageBackground>
</Animated.View>
);
what is problem of my code and how to i implement make a correct animation?
Ahh, i got your issue, its because youre not passing the fadeIn
dependency in useEffect.
const fadeAni = useRef<Animated.Value>(new Animated.Value(0)).current;
useEffect(() => {
Animated.loop(
Animated.sequence([
Animated.timing(fadeAni, {
toValue: 1,
duration: 500,
useNativeDriver: true,
}),
Animated.delay(2500),
Animated.timing(fadeAni, {
toValue: 0,
duration: 500,
useNativeDriver: true,
}),
Animated.delay(2500),
]),
).start()
}, [fadeAni])
return (
<Animated.View style={{ opacity: fadeAni }}>
<ImageBackground source={imageSource} style={styles.area}>
</ImageBackground>
</Animated.View>
);
Try now. ive tried it. please check Expo snack