Estoy usando React para crear un elemento img que cambia su atributo src después de un tiempo específico con la función setInterval basada en una matriz que contiene muchas imágenes.
así que la cosa es que quiero hacer una animación cada vez que cambia el atributo src , estaba pensando en usar el gancho React.useEffect() para ver los cambios de src y agregar algo de animación, pero lógicamente no podía ir más allá.
mi código :
import Canada from "../images/Canada.jpg" import Tokyo from "../images/Tokyo.jpg" import NewYork from "../images/NewYork.jpg" import southKorea from "../images/southKorea.jpg" function AboutMe() { const imgArray = [NewYork, Tokyo, Canada, southKorea] let i = 0; const maxImgArray = imgArray.length -1 ; const swap = function() { let image = imgArray[i]; i = (i === maxImgArray) ? 0 : ++i; const attr = document.getElementById("moving-image"); attr.src=image; } setInterval(swap, 5000) return ( <section className="About-me"> <h1>About me</h1> <div className="container"> <div className="cities-images"> <img src={Tokyo} alt="NewYork" id="moving-image"></img> <label class="switch"> <input type="checkbox"/> <span class="slider round"></span> </label> </div> <div className="info"> </div> </div> </section> ) }Al usar useState hook en reaccionar, podemos volver a renderizar el componente con un valor actualizado. Entonces, para el cambio de src , podemos usar useState para actualizar el src actual de la imagen.
Al usar useEffect hook, podemos hacer cualquier cosa una vez que el estado de src cambie, como establecer diferentes animaciones.
Estado del componente
const [image, setImage] = useState(Usa); const [imageIndex, setImageIndex] = useState(0); const imgArray = [Usa, Japan, Canada, SouthKorea];efecto de uso
useEffect(() => { let interval = null; if (i !== maxImgArray) { interval = setInterval(() => { let image = imgArray[imageIndex]; const attr = document.getElementById("moving-image"); attr.src = image; // update the img index to state setImageIndex((imageIndex) => imageIndex === maxImgArray ? 0 : imageIndex + 1 ); // update the src in state. setImage(attr.src); }, 3000); } // When our code runs and reruns for every render, useEffect also cleans up after itself using the cleanup function. // Here we clear the interval to remove the effects that could happen with state change while interval. return () => clearInterval(interval); }, [image, imageIndex]); // when image, imageIndex gets change, useEffect will be triggered.Componente aquí utilicé framer-motion para animación.
<section className="Country-flag"> <h1>Country Flag</h1> <div className="container"> <motion.div key={image} animate={{ x: 100, opacity: 1 }} transition={{ delay: 1, x: { type: "spring", stiffness: 100 }, default: { duration: 2 } }} > {/* when state {image} value change, this component will re-render with new src */} <img alt="NewYork" src={image} id="moving-image"></img> </motion.div> <div className="info"></div> </div> </section>Consulte este espacio aislado de muestra para ver el código producido.
Si desea diferentes animaciones para cada imagen, agregue otra variable de estado para la animación y cambie el valor dentro de useEffect para cada estado de imagen.