代码之家 › 专栏 › 技术社区 › Miriam

动画事件反应本机

react-animated gesture animation react-native reactjs

Miriam · 技术社区 · 6 年前

我正在使用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取自此值。当设置动画时,侦听器已设置值x。event在onPanResponderMove上设置值),因此视图应移动100? 然后清除this.state.pan值?

有人能更好地解释一下发生了什么事吗?也许有一些简单的数字或一步一步的例子? 谢谢!