reactjsreact-nativereact-animated

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


enter image description here

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?


Solution

  • 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