Question

我希望有两张图片经过一段时间淡入另一张图像。

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

有更好的方法吗？我如何让它们重叠？

Answer 1

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

使用＆＃39;绝对＆＃39;设置第一张图片的位置可以使它们重叠。

以下是演示：

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

反应原生：如何使两个图像相互淡化？

1 个答案: