react native animated : why my loop image animation is worked like a weird?-CodePudding

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?

CodePudding user response：

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