Animated.Text animation de fondu sur le changement

Question

donc je reçois du texte à partir d'une connexion socket Web, et en l'ajoutant à un composant texte. Il commence en gris, puis devient noir après x quantité de temps (L'application traite le texte). J'ai le code ci-dessous

<Text style={styles.confirmedText}> 
     {this.state.confirmedText} 

     <Animated.Text style={{ fontFamily: "Helvetica Neue", color: "#9b9b9b" }}> 
       {this.state.tempText} 
     </Animated.Text> 
    </Text> 

Donc, ce tempText est en constante évolution, mais je veux qu'il y ait un fondu dans l'animation lorsque le texte passe d'une chaîne vide -> some/any texte du tout. Des idées comment je pourrais faire ça?

Remarque: je sais que mon code n'a pas tenté de l'implémenter, mais je n'ai trouvé aucun exemple de travail utilisant Animated.Text à suivre.

Merci à l'avance,

EDIT: Mieux encore, si la température avait une valeur de dire « texte », et un mot a été ajouté, par exemple, « un texte plus », le mot ajouté « plus » être animé individuellement serait génial. Semble difficile si

Answer 1

D'abord, vous aurez envie de mettre en place une valeur d'animation comme ceci:

this.opacity = new Animated.Value(0) 

Ensuite, lorsque vous recevez le texte que vous aurez envie de commencer l'animation:

Animated.timing(this.opacity { 
    duration: 350, // some number in milliseconds 
    toValue: 1, // or whatever final opacity you'd like 
    }).start(); 

Enfin, vous aurez besoin d'interpoler cette valeur sur votre composant Animated.Text:

style={{ 
    opacity: this.opacity.interpolate({ 
    inputRange: [0, 1], 
    outputRange: [0, 1], 
    extrapolate: 'clamp', 
    }), 
    ... 
}} 

J'espère que cela vous aidera à démarrer!

Answer 2

Vous voulez probablement regarder la méthode componentWillReceiveProps.

http://devdocs.io/react/react-component#componentwillreceiveprops

Vous pouvez ensuite ajouter/supprimer des classes à votre élément (ou à un span pour les mots individuels), selon les props changements.

Vous devrez peut-être également enregistrer un ref dans votre élément pour pouvoir appliquer des classes ou animer des propriétés css.

Voir http://devdocs.io/react/refs-and-the-dom

Answer 3

Essayez ce code pour modifier l'animation du texte.

import React, { Component, PropTypes } from 'react'; 
import { 
    StyleSheet, 
    View, 
    Text, 
    Dimensions,Animated 
} from 'react-native'; 


export default class YourView extends Component { 
    constructor(props) { 
     super(props); 
     // 1) You'll want to set up an Animated value like: 
     this.state = { 
      tempText : "Hello" 
     }; 

    } 

    componentWillMount() { 
     // 2) when you receive the text you'll want to start 

     setInterval(() => { 
      this.setState({tempText: "Hello World"}) 
     }, 1000); 
    }; 

    render() { 
     return (
      <View> 
       <Animated.Text style={{ fontFamily: "Helvetica Neue", color: "#9b9b9b" }}> 
        {this.state.tempText} 
       </Animated.Text> 
      </View> 
     ); 
    } 
} 

Espérons que cela fonctionne pour vous.