Animated.Text 变化时淡入动画

Question

所以我从网络套接字连接接收文本，并将其添加到文本组件。它以灰色开始，然后在 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

您可能想查看 componentWillReceiveProps 方法。

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

然后您可以根据 props 更改 add/remove 类到您的元素（或 span 单个单词）。

您可能还需要将 ref 存储到您的元素，以便您可以应用类或动画 css 属性。

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

Answer 2

首先，您需要像这样设置一个动画值：

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 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 变化时淡入动画

Animated.Text fade-in animation on change

reactjs

react-native

react-native-ios