动画事件反应本机

Question

我正在使用 panResponder，我正在创建一个跟随用户手指的简单视图。我查了一下，发现这个例子很有效，我正在使用它，但我无法理解它。

constructor(props){
this.state = {
  pan: new Animated.ValueXY()
}
this._val = { x: 0, y: 0 };
this.state.pan.addListener(value => (this._val = value));
// Initialize PanResponder with move handling
this.panResponder = PanResponder.create({
  onStartShouldSetPanResponder: (e, gesture) => true,
  onPanResponderMove: Animated.event([
    null,
    { dx: this.state.pan.x, dy: this.state.pan.y },
  ]),
  onPanResponderGrant: (e, gesture) => {
    // can't understand this part
    this.state.pan.setOffset({
      x: this._val.x,
      y: this._val.y,
    });
    this.state.pan.setValue({ x: 0, y: 0 });
 }
}

因此，据我所知，当用户移动他们的手指时，会使用 Animated.event 调用 onPanResponderMove，其中将 this.state.pan.x 和 this.state.pan.y 设置为增量 x 和 y手势，这意味着如果用户将手指向底部移动 50 度，向右移动 50 度，this.state.pan 将类似于 {x:50,y:50}。

现在为什么要为 onPanResponderGrant 设置偏移量？据我所知，偏移量将为 50（先前的值 + 50 取自 this._val.x 的 dx，当 ANimated.event 设置 onPanResponderMove 上的值时已与侦听器一起设置）所以视图应该移动 100？然后我们清除 this.state.pan 值？

有人可以更好地向我解释发生了什么事吗？也许用一些简单的数字或一步一步的例子？希望你能帮助我，我花了一整天的时间才弄明白。谢谢！

Answer 1

OnPanResponderGrant 当您开始移动连接的元素时首先触发。使用 setOffset 您 'save' 偏移量中的先前值 (this._val.x)，它充当内存，或者您从原始位置移动了多少。

然后您使用 setValue 将当前（偏移）位置设置为新起点。

通过这种方式，您可以将已移动的数量全部保存在偏移量中，并且 value 干净地处理当前滑动量（从最近按下到释放）。

我希望这能解决一些问题，我也遇到了很多问题。

动画事件反应本机

Animated event react native

animation

gesture

reactjs

react-native

react-animated