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不断变化，但是当文本来自空字符串时，我希望有一个淡入动画 - ＆gt;一些/任何文字。我有什么想法可以做到这一点吗？

注意：我知道我的代码并未尝试实现此功能，但我无法找到使用Animated.Text的任何工作示例。

提前致谢，

编辑：更好的是，如果temp的值为“some text”，并且添加了一个单词，例如“some text plus”，则单独添加动画的添加单词“plus”会很棒。虽然似乎很难

Answer 1

首先，您需要设置一个动画值，如下所示：

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

然后，您可以根据span更改为您的元素添加/删除类（或针对单个词添加/删除props。

您可能还需要在元素中存储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>
        );
    }
}

希望它适合你。

更改后的Animated.Text淡入动画

3 个答案: