Animated.Text Fade-in Animation bei Änderung

Question

so ich Text von einer Web-Socket-Verbindung empfangen und es zu einer Textkomponente hinzufügen. Es beginnt als grau und wird dann nach x Zeit in schwarz (Die App verarbeitet den Text). Ich habe den Code unten

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

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

Also die tempText ständig ändert, aber ich mag eine Fade-in Animation sein, wenn der Text von einem leeren String geht -> some/beliebiger Text überhaupt. Irgendwelche Ideen, wie ich das machen könnte?

Hinweis: Ich weiß, dass mein Code nicht versucht hat, dies zu implementieren, aber ich konnte keine Arbeitsbeispiele mit Animated.Text finden, um zu folgen.

Vielen Dank im Voraus,

EDIT: Noch besser wäre es, wenn Temp einen Wert von sagen „etwas Text“ hatte, und ein Wort wurde hinzugefügt, zB „etwas Text plus“, das hinzugefügte Wort „plus“ individuell zu animieren wäre großartig. Scheint schwierig, aber

Answer 1

Zuerst Sie erhalten eine animierte Wert wie so einrichten möchten:

this.opacity = new Animated.Value(0) 

Dann, wenn Sie den Text erhalten möchten Sie die Animation starten:

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

Schließlich müssen Sie diesen Wert auf Ihre Animated.Text Komponente zu interpolieren:

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

Hoffentlich kann das Ihnen den Anfang machen!

Answer 2

Sie wollen wahrscheinlich die componentWillReceiveProps Methode betrachten.

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

Sie können dann hinzufügen/entfernen Klassen zu Ihrem Elemente (oder ein span für einzelne Worte), nach den props Änderungen.

Sie können eine ref zu Ihrem Element speichern, müssen auch, so dass Sie Klassen anwenden können oder CSS-Eigenschaften animieren.

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

Answer 3

Versuchen Sie diesen Code für Textanimation ändern.

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> 
     ); 
    } 
} 

Hoffentlich seine Arbeit für Sie.