Javascript 调用动画函数为按钮设置动画会导致意外行为

我有一个文本字段，当长度大于1时，底部会出现一个按钮。如果为零，按钮将消失。它使用componentWillReceiveProps来检查从父级传递的props中的按钮“是否可见”

这是动画功能：

  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);
    }
  }

如果我让动画完成，它的功能与预期一样，并且看起来很棒。出现的问题是，当我快速地在文本输入字段长度0和1之间来回移动时，按钮不是停留在“开”或“关”位置，而是开始使其最终位置越来越高，或越来越低，直到它离开屏幕

---

我怀疑这与

这个.state.animatedBottomOffset.\u值

有关，但这是我需要设置的，因为它是组件安装时键盘的高度，并且状态检查是否为

isMidAnimation

似乎没有帮助。

不应该返回这里：

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

---

您应该保留正在进行的动画的引用。停止正在进行的动画，并在此if语句中启动一个新的动画。

啊，如何获取引用，或停止动画？还有，为什么返回不能解决问题？它不应该让动画完成吗？例如：const buttonAnimation=Animated。正时（……）.start（）；ButtonImaction.stop（）不确定为什么这是正确的方法，这不应该让动画完成，然后设置备份动画（或关闭）？我不确定是否需要将状态设置为isMidAnimation。我还尝试将动画设置为实例变量，但该函数没有成功。如果返回该函数，则该.state.animatedBottomOffset.\u值将不再与textInput的值同步。是否让动画完成更多的是关于UI/UX。您还可以将动画排队。只要你觉得它是光滑的。