Javascript 如何使用crossfade动画更改图像源？

我有两个不同的图像，我想循环之间当图像源更改时，我希望应用交叉淡入淡出过渡。现在，它按照我的意愿每5秒改变一次背景，但是，它不会以交叉淡入淡出效果过渡

我尝试过使用，但它不适用于此

如果这很重要，我正在使用

首先，我用了两张图片

import BackgroundeOne from '../../Images/login-background1-tint.jpg'
import BackgroundeTwo from '../../Images/login-background2.jpg'

我有一系列的图片

 var backgrounds = [BackgroundeOne, BackgroundeTwo]

在我的州，我有我目前的背景

 this.state = { background: BackgroundeOne }

我有一个设置状态的函数

 changeBackground = () => {
    let currentBg = this.state.background
    let newIndex = backgrounds.indexOf(currentBg) + 1   
    let newBg = (newIndex) == backgrounds.length ? backgrounds[0] : backgrounds[newIndex] 


    this.setState({
        background: newBg
    })
}

我每隔5秒启动一次间隔重复调用此函数

componentDidMount() { 
setInterval( () => { 
        this.changeBackground()
     }, 5000);
}

最后，我有一个图像组件

<Image source={this.state.background} /> 

---

如何使用交叉淡入淡出动画更改源？

最佳解决方案是使用生命周期方法componentWillUpdate。如文件（）所述：

新建时，在呈现之前立即调用componentWillUpdate（） 正在接收道具或状态。利用这个机会 在更新发生之前执行准备。不调用此方法 对于初始渲染

因此，如果在组件上定义此方法，如下所示：

componentWillUpdate(nextProps, nextState)

---

您仍然可以使用this.state访问当前状态，并且可以查看新源将使用的nextState。在该方法中，您应该使用您的逻辑使动画执行您想要的操作。

谢谢，但即使我正在设置状态并从当前状态获取图像，这是否会有所帮助？它正在更改背景，但动画不适用。我有点不知道应该在componentWillReceiveProps（）中放置什么对不起，那么您的生命周期方法应该是componentWillUpdate，我会更新我的答案！没问题，谢谢你的帮助。它说我不能在componentWillUpdate中使用setState，但我尝试使用LayoutImation.configureNext（CustomLayoutSpring）；不幸的是，我仍然有同样的问题。。我不确定在componentWillUpdate中要做什么..要做crossFade动画，您应该创建一个动画值来控制组件的不透明度样式道具，您需要两个动画和两个背景，一个重叠另一个。然后使用Animation.timing使一个消失，另一个出现