Вызов функции анимации для кнопки анимации вызывает неожиданное поведение

Question

У меня есть текстовое поле, и когда длина больше 1, кнопка появляется снизу.если он равен нулю, кнопка исчезает.Он использует componentWillReceiveProps, чтобы проверить, является ли кнопка «isVisible» из реквизита, переданного от родителя.

Это функция анимации:

  animateButton(toValue, speed) {
    if (this.state.isMidAnimation) {
      return;
    }

    this.setState({ isMidAnimation: true }, () => {
      Animated.timing(this.state.animatedBottomOffset, {
        toValue,
        duration: speed,
        delay: 0,
      }).start(() => {
        this.setState({ isMidAnimation: false });
      });
    });
  }

Она запускается в componentWillReceiveProps и ее анимации, в зависимости отвидимый или нет, поднимается на высоту кнопки или вниз на высоту:

  componentWillReceiveProps(nextProps) {
    if (nextProps.isVisible !== this.props.isVisible) {
      const currentOffset = this.state.animatedBottomOffset._value;
      const offset = nextProps.isVisible ? this.props.height : - this.props.height;
      this.animateButton(offset + currentOffset, BUTTON_TOGGLING_SPEED);
    }
  }

Это работает, как и ожидалось, если я позволю анимации завершиться, и выглядит великолепно.Проблема возникает, когда я быстро перемещаюсь между полями textInput длиной 0 и 1, назад и вперед, и кнопка вместо того, чтобы оставаться в положении «включено» или «выключено», начинает иметь свою конечную позицию выше и выше или нижеи ниже, пока он не исчезнет с экрана.

Я подозреваю, что это как-то связано с this.state.animatedBottomOffset._value, но это то, что мне нужно установить, так как это высота клавиатуры, когда компонент монтируется, и состояниепроверка того, действительно ли это isMidAnimation, кажется, не помогает.

Answer 1

Не должно возвращаться сюда:

if (this.state.isMidAnimation) {
  return;
}

Вы должны сохранить ссылку на текущую анимацию.Остановите текущую анимацию и начните новую в этом операторе if.