每當<img src="{value}"> src 值變化

Question

我正在使用 React 創建一個img元素，該元素在特定時間后基於包含許多圖像的數組使用setInterval function 更改其src屬性。

所以事情是我想在src屬性發生變化時創建一個 animation，我正在考慮使用React.useEffect()鈎子來觀察src變化並添加一些 animation 但我無法在邏輯上進一步 go 。

我的代碼：

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>    
    )
}

Answer 1

通過在 React 中使用useState hook，我們可以使用更新后的值重新渲染組件。 所以對於src的變化，我們可以使用useState來更新圖片當前的src。

通過使用useEffect鈎子，我們可以在src state 更改后做任何事情，比如設置不同的動畫。

組件 State

  const [image, setImage] = useState(Usa);
  const [imageIndex, setImageIndex] = useState(0);
  const imgArray = [Usa, Japan, Canada, SouthKorea];

使用效果

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.

這里的組件我使用了 animation 的 framer-motion。

<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>

檢查此示例沙箱以獲取生成的代碼。

如果你想為每個 img 提供不同的動畫，那么為 animation 添加另一個 state 變量，並為每個圖像 state 更改 useEffect 中的值。