web-dev-qa-db-fra.com

Comment estomper le texte automatiquement après un certain temps en utilisant une animation native native

En utilisant le code suivant, je peux estomper dans du texte,

class AnimatedClass extends Component {
   constructor(props) {
      super(props);

      this.state = {fadeIn: new Animated.Value(0),
                    fadeOut: new Animated.Value(1),
                   };
   }

   fadeIn() {
     this.state.fadeIn.setValue(0)                  
     Animated.timing(
       this.state.fadeIn,           
       {
         toValue: 1,                   
         duration: 3000,              
       }
     ).start(() => this.fadeOut());                        
  }

  fadeOut() {
    this.state.fadeOut.setValue(1)
    Animated.timing(                  
       this.state.fadeOut,            
       {
         toValue: 0,                   
         duration: 3000,              
       }
    ).start();                        
  }

  render() {
    return(
       <View style={{flex: 1, backgroundColor: '#efefef'}}>
           <TouchableOpacity 
               onPress={() => this.fadeIn()} 
               style={Styles.submitButtonStyle}
               activeOpacity={0.5}
           >
               <Text style={Styles.submitTextStyle}>Submit</Text>
           </TouchableOpacity>

           <Animated.View                 
              style={{opacity: this.state.fadeIn}}
           >
              <View style={Styles.textContainer}>
                <Text style={{fontSize: 20, textAlign: 'center'}}>Your order has been submitted</Text>
             </View>
           </Animated.View>
       </View>
   );

 }
}

Mais, le texte ne disparaît pas automatiquement après un certain temps. En fait, je règle le temps après combien de secondes le texte doit être effacé. Mais ça ne marche pas.

Toute aide est appréciée. Merci d'avance.

animationreact-native
9
Mighty

Vous basez l'opacité sur this.state.fadeIn Mais vous modifiez this.state.fadeOut Dans votre fadeOut().

Essayer:

fadeOut() {
    Animated.timing(                  
       this.state.fadeIn,            
       {
         toValue: 0,                   
         duration: 3000,              
       }
    ).start();                        
  }

et peut-être changer le nom de la variable en juste fadeValue ou quelque chose de plus clair pour vous.

4
MattyK14