如何根据父级的当前拖动位置平移视图偏移答案

【问题标题】：How to translate view offset based on the current drag position of parent如何根据父级的当前拖动位置平移视图偏移
【发布时间】：2019-01-05 21:11:01
【问题描述】：

我在这里有一个非常具体的案例，这让我对数学需要如何计算才能使其工作感到困惑

我在页面上呈现了这张卡片

使用这些样式呈现的内容...

-------- 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)})

我正在尝试让它动画到这个布局

我设置的用于处理整体卡片样式的乞丐是这样的

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();
      }
    }
  }
});

当卡片在页面上全高时，内容视图会像这样动画化

Animated.timing(
  this.state.placeCardContent,
  {
    toValue: {x: 0, y: 0},
    duration: 175,
  }
).start();

我有一个零食设置来炫耀这个

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

https://snack.expo.io/B1lhq5Rb4

【问题讨论】：

标签： javascript react-native pan

【解决方案1】：

我忘记了 react-native 的 Animated 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)]
    })
}]}}>

您可以在这个零食示例中看到它的工作原理

https://snack.expo.io/@jordanr/carddrag

【讨论】：