Animated.Text淡入動畫變化

Question

所以我從Web套接字連接接收文本，並將其添加到Text組件。 它以灰色開始，然后在x的時間后變成黑色（應用處理文本）。 我有下面的代碼

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

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

所以這個tempText一直在變化，但是我希望當文本從一個空字符串開始->某些/任何文本時，會有一個淡入淡出的動畫。 任何想法，我怎么能做到這一點？

注意：我知道我的代碼尚未嘗試實現此功能，但是我無法使用Animated.Text來找到任何有效的示例。

提前致謝，

編輯：更好的是，如果temp的值是“ some text”，並且向其中添加了一個單詞，例如“ some text plus”，則添加的要單獨動畫的單詞“ plus”將是很好的。 雖然似乎很難

Answer 1

首先，您將要設置一個Animated值，如下所示：

this.opacity = new Animated.Value(0)

然后，當您收到文本時，您將要開始動畫：

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

最后，您需要在Animated.Text組件上插入該值：

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

希望可以幫助您入門！

Answer 2

您可能想要查看componentWillReceiveProps方法。

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

然后，您可以根據props更改將類添加/刪除到元素（或單個單詞的span ）。

您可能還需要存儲對元素的ref ，以便可以應用類或為css屬性設置動畫。

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

Answer 3

嘗試使用此代碼來更改文本動畫。

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

希望它為您服務。