Javascript 可以使用React Spring在更多已加载的图像之间切换？

我想在索引页中的四个图像之间切换。现在我所做的只是改变图像的来源，这会导致图像之间的切换。但问题是，当用户第一次加载页面时，需要加载新的切换图像，这会造成过渡之间的间隙，因为新图像在加载之前是不可见的。有没有办法只在已加载的图像之间切换

这就是我现在拥有的：

import {animated, config, useTransition} from "react-spring";
import Image from "next/image";
import {useEffect, useState} from "react";


const SliderImage = () => {

    const [index, setIndex] = useState(0);

    const images = [
        {id: 0, url: "/images/slide1.jpg", alt: "Chiptuning", priority: true},
        {id: 1, url: "/images/slide4.jpg", alt: "Autočalounictví", priority: false},
        {id: 3, url: "/images/slide2.jpg", alt: "Klimatizace", priority: false},
        {id: 4, url: "/images/slide3.jpg", alt: "Renovace světel", priority: false},
    ]

    const imageTransitions = useTransition(images[index], {
        from: { opacity: 0},
        enter: { opacity: 1},
        leave: { opacity: 0},
        config: config.molasses,
        key: images[index].id,
    });

    useEffect(() => {
        const slideInterval = setInterval(() => {
            setIndex((state) => (state + 1) % 4);
        }, 4000);

        return () => clearInterval(slideInterval);

    }, []);


   return imageTransitions((props, item) => (
        <animated.div style={props}>
            <Image
                src={item.url}
                alt={item.alt}
                layout="fill"
                objectFit="cover"
                priority={item.priority}
            />
        </animated.div>
    ))
}

export default SliderImage;

import{animated，config，useTransition}来自“react spring”；
从“下一个/图像”导入图像；
从“react”导入{useffect，useState}；
常量幻灯片图像=（）=>{
const[index，setIndex]=useState（0）；
常量图像=[
{id:0，url:“/images/slide1.jpg”，alt:“chiptunning”，优先级：true}，
{id:1，url:“/images/slide4.jpg”，alt:“Autočalounictví”，优先级：false}，
{id:3，url:“/images/slide2.jpg”，alt:“Klimatizace”，优先级：false}，
{id:4，url:“/images/slide3.jpg”，alt:“Renovace světel”，优先级：false}，
]
常量imageTransitions=useTransition（图像[索引]{
发件人：{opacity:0}，
输入：{opacity:1}，
左：{不透明度：0}，
config:config.molasses，
关键字：图像[index].id，
});
useffect（（）=>{
常量slideInterval=setInterval（（）=>{
setIndex（（状态）=>（状态+1）%4）；
}, 4000);
return（）=>clearInterval（slideInterval）；
}, []);
返回图像转换（（道具，物品）=>(
))
}
导出默认幻灯片图像；

我想做的是有多个图像，只在它们之间切换

 <animated.div style={props}>
            <Image
                ...
            />
 </animated.div>

 <animated.div style={props}>
            <Image
               ...
            />
  </animated.div>

 <animated.div style={props}>
            <Image
                ...
            />
 </animated.div>

 <animated.div style={props}>
            <Image
               ..
            />
 </animated.div>

---

谢谢你的帮助

最后，我找到了解决办法。我已经加载了所有图像，现在我只更改了

imageID

s。在

images

数组中比较

ImageID

，并在此基础上更改

showImage

，然后在

SliderImage

中更改

spring

中的组件

opacity

以下是最终代码：

幻灯片图像容器

组件：

import {useEffect, useState} from "react";
import SliderImage from "./sliderImage";


const SliderImagesContainer = () => {

    const [imageID, setImageID] = useState(0)

    const images = [
        {src: "/images/slide1.jpg", alt: "Chiptuning", priority: true, showImage : (imageID === 0)},
        {src: "/images/slide4.jpg", alt: "Autočalounictví", priority: false, showImage : (imageID === 1)},
        {src: "/images/slide2.jpg", alt: "Klimatizace", priority: false, showImage : (imageID === 2)},
        {src: "/images/slide3.jpg", alt: "Renovace světel", priority: false, showImage : (imageID === 3)},
    ]

    useEffect(() => {
        const slideInterval = setInterval(() => {
            setImageID((imageID) => (imageID + 1) % 4);
        }, 4000);

        return () => clearInterval(slideInterval);

    }, []);

    
    return images.map((image, index) => {
        return(
            <SliderImage src={image.src} alt={image.alt} priority={image.priority} showImage={image.showImage} key={index}/>
        )
    })

}

export default SliderImagesContainer;

import {animated, config, useSpring} from "react-spring";
import Image from "next/image";

const SliderImage = ({src, alt, priority, showImage}) => {

    const spring = useSpring({
        from: {opacity: 0},
        to: {
            opacity: showImage ? 1 : 0,
        },
        config: config.molasses,
    })

    return(
        <animated.div style={spring}>
            <Image
                src={src}
                alt={alt}
                layout="fill"
                objectFit="cover"
                priority={priority}
            />
        </animated.div>
    )
}

export default SliderImage