Анимированное событие реагирует нативным образом

Я работаю с 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 на дельту x и y жеста , что означает, что если пользователь переместил палец на 50 вниз и на 50 вправо, this.state.pan будет выглядеть примерно так: {x:50,y:50}.

Теперь, почему я должен установить смещение для onPanResponderGrant? Из того, что я вижу, смещение будет 50 (предыдущее значение + 50 dx, взятое из this._val.x, которое было установлено с помощью слушателя, когда ANimated.event установил значение onPanResponderMove), поэтому представление должно двигаться на 100? А затем мы очищаем значения this.state.pan?

Может кто-нибудь объяснить мне лучше, что происходит? Может быть, с некоторыми простыми цифрами или пошаговым примером? Надеюсь, вы можете мне помочь, я целый день пытался понять это. Спасибо!


react-native reactjs animation gesture react-animated
person Miriam    schedule 26.09.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

OnPanResponderGrant срабатывает первым, когда вы начинаете перемещать связанный элемент. Используя setOffset, вы «сохраняете» предыдущее значение (this._val.x) со смещением, которое действует как память или сколько вы переместили из исходного местоположения.

Затем вы используете setValue, чтобы установить текущее (смещенное) местоположение в качестве новой начальной точки.

Таким образом, у вас есть сумма, которую вы переместили в целом, сохраненная в смещении и value чистая для обработки только текущей суммы прокрутки (от последнего нажатия до отпускания).

Я надеюсь, что это немного прояснит ситуацию, у меня тоже были некоторые проблемы с этим.

person Sebastijan Dumančić    schedule 11.10.2018