如何在与 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 索引的本机反应中为淡入淡出设置动画?的主要内容,如果未能解决你的问题,请参考以下文章