本机反应：如何使两个图像相互淡出？

Question

我想要两个图像，经过一段时间后会变成另一个图像。

到目前为止，我的想法是让一个覆盖另一个并通过时间或动画功能改变其透明度。 我没有成功地将图像格式化为重叠。

有没有更好的办法？ 以及如何让它们重叠？

Answer 1

<Image style={{position:'absolute'}} />
<Image />

将第一个图像的位置设置为 'absolute' 可以使它们重叠。

这是演示：

getInitialState: function (){
  return {
    fadeAnim: new Animated.Value(0),
  };
},
componentDidMount: function() {
  Animated.timing(          
    this.state.fadeAnim,    
    {
      toValue: 1,
      duration:1000
    },
  ).start();                
},
render: function() {
  <View style={{flex:1}}>
    <Animated.Image source={require('image!image1')} style={{width:320,height:320,resizeMode:'cover',position:'absolute'}}  />
    <Animated.Image source={require('image!image2')} style={{width:320,height:320,resizeMode:'cover',opacity:this.state.fadeAnim}}  />
  </View>
}