Question

我正在研究React Native Animation。但是我有一个方案，我必须在单个视图中基于两个Animated.Value（）应用动画。我有两个观点。一个视图是短视图，其上边距为20，一个细节视图为40。但是由于在详细视图中使用ScrollView，所以我必须根据ScrollView Y偏移量更改边距顶部。因此，如何在动画值之间切换，我也使用了基于滚动启用与否的三元运算符。但这对我不起作用吗？

我的构造函数是这样的：-

constructor(props) {
  super(props);
  this.state = {
   scrollOffset : new Animated.Value(0) 
  };
}

componentWillMount(){
   this.shortUserViewHeight = new Animated.Value(200);
}

我想实现以下效果：-

const imageMarginTop1 = this.shortUserViewHeight.interpolate({
        inputRange: [200, USER_FULL_VIEW_HEIGHT],
        outputRange: [20, 40],
        extrapolate: "clamp"
});

const imageMarginTop2 =this.state.scrollOffset.interpolate({
        inputRange: [0, 180, 181],
        outputRange: [40, 40 - 180, 40 - 180]
});

我想要这些效果的视图：-

<Animated.View style={{
 width:userImageDimenson, height:userImageDimenson, 
 marginTop:imageMarginTop1,<==== here I want imageMarginTop1 & imageMarginTop2  
 marginLeft:imageMarginLeft,
 borderRadius:imageBorderRadius,
 overflow:'hidden',
 borderWidth:2,
 borderColor:'#4090e4'}}>
    <Image source={this.state.selectedPerson.mainUrl} 
                 style={{flex:1, width:null,height:null, resizeMode:'cover'}}/>
</Animated.View>

如何在React Native的单个父视图中基于两个Animated.Value（）应用动画

0 个答案: