如何在反应本机上运行一次动画

Question

我希望当您按下按钮时，动画运行的setState的btnLoaded转到true，这很好，但我希望一旦动画完成后，点击按钮，动画不再执行，因为它已经启动并完成。

我不明白该怎么做。

这里是动画的功能：

startButtonAnimation =() => { 

    this.animatedValue.setValue(0); 
    if (this.state.btnLoaded) { 

     Animated.timing(
      this.animatedValue, 
      { 
       toValue: 1, 
       duration: 500, 
       useNativeDriver: true, 
       easing: Easing.bezier(0.15, 0.73, 0.37, 1.2) 
      } 
     ).start(); 

    }} 

而且按钮的代码：

<TouchableOpacity 
    activeOpacity={0.9} 
    onPress={() => { 
     this.setState({ 
      btnLoaded: true 
    }); 
    setTimeout(() => this.startButtonAnimation(), 50); 

}}> 

代码在行动：

谢谢您的帮助！

Answer 1

From the docs：

动画是通过调用start（）在你的动画开始。 start（）需要一个完成回调，当动画完成时将会调用它。

此：

startButtonAnimation =() => { 

    this.animatedValue.setValue(0); 
    if (!this.state.btnLoaded) { 
     this.setState({ 
      btnLoaded: true, 
     }); 
     Animated.timing(
      this.animatedValue, 
      { 
       toValue: 1, 
       duration: 500, 
       useNativeDriver: true, 
       easing: Easing.bezier(0.15, 0.73, 0.37, 1.2) 
      } 
     ).start(() => { 

    }}; 
... 

    <TouchableOpacity 
    activeOpacity={0.9} 
    onPress={() => { 
     setTimeout(() => this.startButtonAnimation(), 50); 
    }} 
    > 

可能做到这一点。你应该添加更多的代码来更好地理解发生了什么。