如何在与 z 索引的本机反应中为淡入淡出设置动画?

Posted

技术标签:

【中文标题】如何在与 z 索引的本机反应中为淡入淡出设置动画?【英文标题】:How to animate fadein fadeout in reactnative with zindex? 【发布时间】:2019-07-12 04:49:07 【问题描述】:

我正在尝试为一条消息设置动画,该消息始终位于具有可滚动视图的屏幕顶部。 从我的 FlatList 组件中单击 onButtonClick 效果很好。但是有一个小问题,因为 Animated.View 绝对位置始终位于屏幕顶部,因此 Flatlist 的最顶部元素不可点击。我试过zIndex,似乎没有效果。 如何修复单击以使动画立即正常工作?

//styles
 notification: 
    position: 'absolute',
    top: 50,
    alignSelf: 'center',
    zIndex: 100
  ,
  notificationWrapper: 
    height: 100,
    width: 270,
    backgroundColor: 'rgba(255,255,255,1)',
    borderRadius: 10,
    marginTop: 40,
    marginBottom: 40,
    marginLeft: 28,
    marginRight: 28,
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 28
  
//js

onButtonClick = () => 
    this.fadeIn.setValue(0);
    Animated.timing(
      this.fadeIn,           
      
        toValue: 1,
        duration: 1000,
      
    ).start(() => 
      setTimeout(() => 
        this.fadeOut();
      , 2000);
    );


fadeOut = () => 
    this.fadeIn.setValue(1);
    Animated.timing(
       this.fadeIn,
       
         toValue: 0,
         duration: 1000,
       
    ).start();

<Fragment>
  <ScrollView style=[styles.mainContainer, flex: 1]>
   <FlatList
     style= paddingTop: 10, paddingLeft: 20, paddingRight: 20 
     data=favouriteData
     keyExtractor=this.keyExtractor
     renderItem=this.rendeCampus
   />
 </ScrollView>
   <Animated.View                 
     style=[styles.notification, opacity: this.fadeIn, zIndex: 
          this.fadeIn]
    >
      <View style=styles.notificationWrapper>
        <Text style=
          fontSize: 12,
          lineHeight: 15,
          color: 'rgba(42,36,66,1)',
          width: 270
        >This restaurant has been added to your favourites list</Text>
      </View>
   </Animated.View>
</Fragment>

【问题讨论】:

【参考方案1】:

我猜其他的都是默认的zIndex: 0

尝试使用这样的插值:

this.zAnimate = this.fadeIn.interpolate(
  inputRange: [ 0, 1],
  outputRange: [-1, 9]
)

并将this.zAnimate 分配给您的zIndex。您可能需要稍微调整一下 outputRange,具体取决于您希望它何时淡入淡出,走在前面。

【讨论】:

【参考方案2】:

您可能需要使用transform 推开视图。 例如。

this.fadeIn.setValue(1);
    Animated.timing(
       this.fadeIn,
       
         toValue: 0,
         duration: 1000,
       
    ).start(() => 
      this.transform.setValue(-200);
    );

【讨论】:

以上是关于如何在与 z 索引的本机反应中为淡入淡出设置动画?的主要内容,如果未能解决你的问题,请参考以下文章

在反应组件中为淡出元素设置动画

如何从服务器下载图像并快速显示淡入淡出动画?

如何使用swift 3为按钮设置动画以淡出然后淡入

如何在 Flutter 中移除原生闪屏和主屏幕之间的默认淡入淡出过渡? (仅使用本机启动画面)

如何控制两个 UIImage 的无动画之间的淡入淡出?

jQuery 为 div 设置动画,同时淡入和淡出触发器