本機反應：如何使兩個圖像相互淡出？

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