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

希望它为您服务。