javascript - 如何停止 React Native 中的循环动画？

Question

我的组件中有一个简单的循环动画，如下所示:

runAnimation() {
    console.log('run animation');
    this.state.angle.setValue(0);
    Animated.timing(this.state.angle, {
        toValue: 360,
        duration: 8000,
        easing: Easing.linear
    }).start(() => this.runAnimation());
}

...

<Animated.Image
    style={[
        styles.rotate,
        { transform: [
            { rotate: this.state.angle.interpolate({
                inputRange: [0, 360],
                outputRange: ['0deg', '360deg']
            })},
        ]}
    ]}
    source={require('./spinning_ball.png')}
/>

我该如何停止这个动画？例如，当导航离开到另一个屏幕时或在用户点击按钮后。

我尝试使用 this.state.angle.stopAnimation() 但注意到控制台中仍在打印运行动画。我应该调用其他停止方法来防止执行开始回调吗？

Answer 1

基于我在 Nguyên Hoàng 的回答中的评论。这是另一种停止循环动画的方法，如果您调用 this.state.angle.stopAnimation():

runAnimation() {
  this.state.angle.setValue(0);
  Animated.timing(this.state.angle, {
    toValue: 360,
    duration: 8000,
    easing: Easing.linear
  }).start((o) => {
    if(o.finished) {
      this.runAnimation();
    }
  });
}