0
401
VistasReact Native: Fundido a través de una serie de imágenes usando Animated & opacity
Actualmente estoy tratando de desvanecerme a través de una serie de imágenes. Básicamente, siempre quiero mostrar una imagen a la vez, luego animar su opacidad de 1 a 0 y la de la siguiente imagen de la serie de 0 a 1, y así sucesivamente. Básicamente algo como esto, que ya he implementado para la web en ReactJS y animaciones CSS:
Sin embargo, parece que sigo atascado en el uso de la biblioteca animada y las referencias de React Native. Intenté almacenar la opacidad de todas las imágenes en una matriz que a su vez está contenida en un gancho useRef. Luego, usando Animated, intento realizar dos animaciones paralelas que cambian la opacidad del índice de imagen actual y el del siguiente índice. Esto es lo que se me ocurrió:
export default function StartImageSwitcher() { const images = Object.values(Images).map((img) => img.imageNoShadow); const [currentImage, setCurrentImage] = useState(0); const opacity = useRef<Animated.Value[]>([ new Animated.Value(1), ...Array(images.length - 1).fill(new Animated.Value(0)), ]).current; useEffect(() => { let nextImage = currentImage + 1; if (nextImage >= images.length) nextImage = 0; Animated.parallel([ Animated.timing( opacity[currentImage], { toValue: 0, duration: 2000, useNativeDriver: true, }, ), Animated.timing( opacity[nextImage], { toValue: 1, duration: 2000, useNativeDriver: true, }, ), ]).start(() => { setCurrentImage(nextImage); }); }, [currentImage]); images.map((image, index) => console.log(index, opacity[index])); return ( <View style={styles.imageWrapper}> { images.map((image, index) => ( <Animated.Image style={{ ...styles.image, opacity: opacity[index] }} source={image} key={index} /> )) } </View> ); }Sin embargo, esto no parece funcionar en absoluto. Cuando está montado, solo muestra la primera imagen, luego la desvanece y todas las demás imágenes aparecen y se queda atascada allí:
¿Alguien tiene una idea de dónde me equivoqué? Siento que no estoy usando el gancho useRef() en combinación con la biblioteca animada como se supone que debo hacerlo.
1 Respuestas
Responde la pregunta0
Su solución es bastante inteligente y, en general, parece que debería funcionar para mí. Sin embargo, el rendimiento puede verse afectado a medida que aumenta la cantidad de imágenes. Pensé en un método alternativo: divida la matriz de imágenes y luego use setInterval para alternar entre dos Animated.Images, que obtienen su fuente de cada matriz.
// from https://stackoverflow.com/questions/41932345/get-current-value-of-animated-value-react-native const getAnimatedValue = (value: Animated.Value) => Number.parseInt(JSON.stringify(value)); export default function StartImageSwitcher() { // partition images into two arrays const images1 = []; const images2 = []; Object.values(Images).forEach((img, i) => { (i % 1 === 0 ? images1 : images2).push(img.imageNoShadow) }); // use refs for the indexes so values don't become stale in the setInterval closure const images1Index = useRef(0); const images2Index = useRef(0); const image1Opacity = useRef(new Animated.Value(1)).current; const image2Opacity = useRef(new Animated.Value(0)).current; useEffect(() => { const swapImageInterval = setInterval(() => { const newImage1Opacity = getAnimatedValue(image1Opacity) === 1 ? 0 : 1; const newImage2Opacity = getAnimatedValue(image2Opacity) === 1 ? 0 : 1; Animated.parallel([ Animated.timing(image1Opacity, { toValue: newImage1Opacity, duration: 2000, useNativeDriver: true, }), Animated.timing(image2Opacity, { toValue: newImage2Opacity, duration: 2000, useNativeDriver: true, }), ]).start(() => { if (newImage1Opacity === 1) { // image 2 is now faded out, so we can swap out its source const nextIndex = images2Index.current === images2.length - 1 ? 0 : images2Index.current + 1; images2Index.current = nextIndex; } else { // image 1 is faded out, so we can swap out its source const nextIndex = images1Index.current === images1.length - 1 ? 0 : images1Index.current + 1; images1Index.current = nextIndex; } }) }, 5000) return () => clearInterval(swapImageInterval); }, [images1Index, images2Index]); return ( <View style={styles.imageWrapper}> <Animated.Image style={{ ...styles.image, opacity: image1Opacity }} source={images1[images1Index.current]} /> <Animated.Image style={{ ...styles.image, opacity: image2Opacity }} source={images2[images2Index.current]} /> </View> ); }