Question

我在我的本机应用程序中创建了一个类似里程表的数字代码。但是，当我单击该按钮以开始动画时，它就继续进行。我想在5秒钟后停止播放动画。我认为应该在此处进行一些修改：

componentDidUpdate(prevProps, prevState) {
    if (this.props.value !== prevProps.value) {
      Animated.timing(this.animation, {
        toValue: getPosition(this.props.value, this.props.height),
        duration: 500,
        useNativeDriver: true,
      }).start(function onComplete() {
        Animated.timing(this.animation).stop();
      });
    }
  }

运行此命令会引发类似Cannot read property 'stopAnimation' of undefined的错误。如果我删除onComplete函数，它将继续。那么，如何在5秒后停止呢？

Answer 1

您正在使用动画完成回调。这意味着您正在尝试停止已经结束的事情。

尝试

componentDidUpdate(prevProps, prevState) {
    if (this.props.value !== prevProps.value) {
      Animated.timing(this.animation, {
        toValue: getPosition(this.props.value, this.props.height),
        duration: 500,
        useNativeDriver: true,
      }).start();
      Animated.timing(this.animation).stop()
    }
  }

启动动画后，您将立即停止动画。

Answer 2

通过调用setValue()方法并分配值来停止任何类型的动画的最简单方法。就您而言：

this.animation.setValue(0);

有关更多详细信息，https://reactnative.dev/docs/animatedvaluexy#setvalue

在React Native中停止动画计时

2 个答案: