循环react react本地动画动画

Question

我试图将以下动画放在无限循环中，直到发生特定状态：

class MyModal extends Component {
    constructor() {
        super()
        this.springValue = new Animated.Value(0.3)
    }
    spring = () => {
        this.springValue.setValue(0.3)
        Animated.spring(
            this.springValue,
            {
                toValue: 1,
                friction: 1,
                tension: 1,
                duration:5000
            }
        ).start()
    }
    componentDidMount() {
        this.spring()
    }
    render() {
        return (
            <View>
                <Modal
                    animationType="none"
                    transparent={false}
                    visible={this.state.modalVisible}
                    onRequestClose={() => null}
                >
                    <View style={styles.backgroundStyle}>                       
                        <Animated.Image 
                            source={require("./my-awesome-image.png")} 
                            style={{ width: 143, height: 125, top: 100, transform: [{scale: this.springValue}]}}
                        />
                    </View>
                </Modal>
            </View>
        );
    }
}

这里的一切都很好，动画完成了一次（因为我在任何地方都没有循环）。

如何保持Animated.Image循环直到达到特定状态？我只希望它无限循环，并且能够停止动画或在我准备好时开始其他动画。

Answer 1

将动画存储在可以访问的变量中，然后将动画与Animated.loop()包装。然后，您可以在该变量上自由使用.start()和.stop()，并随意使用动画。

所以类似这样的事情应该做：

this.springAnimation = Animated.loop(
  Animated.spring(
    this.springValue,
    {
      toValue: 1,
      friction: 1,
      tension: 1,
      duration:5000
    }
  ).start()
)

您可以在此处找到有关此信息的更多信息：

https://facebook.github.io/react-native/docs/animated.html#loop

Answer 2

将回调传递给开始功能，以检查是否重新启动动画。您可以将其分解为这样的东西：

    onSpringCompletion = () => {
      if (arbitraryCondition) {
        this.spring();
      }
    }
    spring = () => {
          this.springValue.setValue(0.3)
          Animated.spring(
              this.springValue,
              {
                  toValue: 1,
                  friction: 1,
                  tension: 1,
                  duration:5000
              }
          ).start(this.onSpringCompletion);
      }  

Answer 3

您可以使用setInterval来保持动画播放，并随时随地删除间隔。我会这样做：

componentDidMount() {
   this.interval = setInterval(() => this.spring(), 5000) // Set this time higher than your animation duration
}
... 
// Some where in your code that changes the state
clearInterval(this.interval)
...