Как применить анимацию на основе двух Animated.Value () в одном родительском представлении в React Native

Question

Я работаю над React Native Animation.Но у меня есть сценарий, в котором я должен применить анимацию на основе двух Animated.Value () в одном представлении.У меня есть два взгляда.Один вид - это короткий вид с верхним полем 20 и подробный вид с 40. Но из-за ScrollView в детальном представлении мне нужно изменить верхний край на основе смещения Y ScrollView.Итак, как я могу переключаться между анимированными значениями? Я также использовал троичный оператор, основанный на включении прокрутки или нет.Но это не работает для меня?

Мой конструктор выглядит так: -

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>