Анимированные события реагируют на родных - PullRequest
Новая
       22

Анимированные события реагируют на родных

0 голосов
/ 27 сентября 2018

Я работаю с 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 });
 }
}

Итак, насколько я понимаю, когда пользователь перемещает своиfinger, 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?

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

1 Ответ

0 голосов
/ 11 октября 2018

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

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

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

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

...