Reactjs 动画事件反应本机_Reactjs_React Native_Animation_Gesture_React Animated

Reactjs 动画事件反应本机

reactjs react-native animation

Reactjs 动画事件反应本机,reactjs,react-native,animation,gesture,react-animated,Reactjs,React Native,Animation,Gesture,React Animated,我正在使用panResponder，我正在创建一个简单的视图，该视图跟随用户的手指。我查了一下，发现这个例子很有效，我正在使用它，但我无法理解它 constructor(props){ this.state = { pan: new Animated.ValueXY() } this._val = { x: 0, y: 0 }; this.state.pan.addListener(value => (this._val = value)); // Initialize PanResp

我正在使用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 });
 }
}

所以，据我所知，当用户移动手指时，onPanResponderMove被调用为Animated.event，其中设置了this.state.pan.x和this.state.pan.y到手势的delta x和y，这意味着如果用户移动手指50到底部，50到右侧，this.state.pan将类似于{x:50，y:50}

现在为什么要设置onPanResponderGrant的偏移量？据我所见，偏移量将为50（之前的值+50从该值中获取的dx.\u val.x，在设置动画时已与侦听器一起设置。事件在onPanResponderMove上设置值），因此视图应移动100？然后我们清除this.state.pan值

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

谢谢

OnPanResponderGrant

在开始移动连接的元素时首先触发。使用

setOffset

可以在offset中“保存”上一个值（

this.\u val.x

），该值充当内存，或者保存从原始位置移动的量

然后使用

setValue

将当前（偏移）位置设置为新的起点

通过这种方式，您可以将移动的金额全部保存在偏移量和

值中，以便仅处理当前的刷卡金额（从最新按下到释放）
我希望这能让它澄清一点，我也遇到了一些问题。
OnPanResponderGrant