Javascript 如何基于父对象的当前拖动位置平移视图偏移

我这里有一个非常具体的案例，它让我有点困惑，数学需要如何计算才能让它工作

我在这一页上有这张卡片

这是用这些样式渲染的

-------- main card --------
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
height,
shadowColor: "#455B63",
shadowOffset: {
  width: 0,
  height: 0,
},
shadowOpacity: 0.33,
shadowRadius: 16,
borderBottomLeftRadius: 12,
borderBottomRightRadius: 12

-------- content view --------
backgroundColor: '#fff',
paddingVertical: 14,
paddingHorizontal: 20,
height: height * 2

将此动画附加到它

Animated.spring(this.state.placeCard,{
    toValue: {x: 0, y: deviceHeight - placeCardClosedHeight},
    duration: 350,
}).start();

“内容”视图在状态中设置了此动画状态

new Animated.ValueXY({x: 0, y: -(Math.round(deviceHeight / 2) - 160)})

我正试图让它以动画的形式呈现这个布局

我为处理整个卡片样式而设置的panhandler如下

this._placeCardPanResponder = PanResponder.create({
  onMoveShouldSetPanResponderCapture: (evt, gestureState) => gestureState.dx != 0 && gestureState.dy != 0,
  onPanResponderGrant: (evt, gestureState) => {
    this.setState({
      placeCardTopOffset: this.state.placeCard.__getValue().y
    })
  },
  onPanResponderMove: (evt, gestureState) => {
    let y = gestureState.dy;
    const { placeCardTopOffset } = this.state;
    if (y + placeCardTopOffset <= 0) {
      y = 0
    } else if (y + placeCardTopOffset >= deviceHeight - placeCardClosedHeight) {
      y = deviceHeight - placeCardClosedHeight
    } else {
      y = y + placeCardTopOffset;
    }
    this.state.placeCard.setValue({x: 0, y});
  },
  onPanResponderRelease: (evt, gestureState) => {
    if (gestureState.dy < 0) {
      if (this.state.placeCard.__getValue().y > 0) {
        Animated.timing(
          this.state.placeCard,
          {
            toValue: {x: 0, y: 0},
            duration: 175,
          }
        ).start();
      }
    }
    if (gestureState.dy > 0) {
      if (this.state.placeCard.__getValue().y < deviceHeight - placeCardClosedHeight) {
        Animated.timing(
          this.state.placeCard,
          {
            toValue: {x: 0, y: deviceHeight - placeCardClosedHeight},
            duration: 175,
          }
        ).start();
      }
    }
  }
});

我有一个快餐店来展示这个

如果单击图像，您将看到预期的动画，但如果拖动，您将看到如何处理拖动。我遇到的问题是，在拖动主视图时，试图找出与设置内容视图动画相关的数学问题

---

我忘记了一个事实，即

react native

的

动画
API有一个
.interpolate（）
函数，它是为这个任务设计的

下面是使这项工作的代码

<Animated.View style={{...style.placeCardContent, transform: [{
    translateX: 0
},{
    translateY: this.state.placeCard.y.interpolate({
        inputRange: [0, deviceHeight - placeCardClosedHeight],
        outputRange: [0, -(Math.round(deviceHeight / 2) - 160)]
    })
}]}}>

我忘记了一个事实，即
react native
的
动画
API有一个
.interpolate（）
函数，它是为这个任务设计的

下面是使这项工作的代码

<Animated.View style={{...style.placeCardContent, transform: [{
    translateX: 0
},{
    translateY: this.state.placeCard.y.interpolate({
        inputRange: [0, deviceHeight - placeCardClosedHeight],
        outputRange: [0, -(Math.round(deviceHeight / 2) - 160)]
    })
}]}}>