Question

我有一个文本字段，当长度大于1时，从底部出现一个按钮。如果为零，则按钮消失。它使用componentWillReceiveProps检查来自父节点传递的props中的按钮“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语句中启动一个新动画。

调用动画功能动画按钮会导致意外行为

1 个答案: