[英]Animated.Text fade-in animation on change
so i am receiving text from a web socket connection, and adding it to a Text component. 所以我从Web套接字连接接收文本,并将其添加到Text组件。 It starts off as grey, and then turns into black after x amount of time ( The app processes the text ).
它以灰色开始,然后在x的时间后变成黑色(应用处理文本)。 I have the code below
我有下面的代码
<Text style={styles.confirmedText}>
{this.state.confirmedText}
<Animated.Text style={{ fontFamily: "Helvetica Neue", color: "#9b9b9b" }}>
{this.state.tempText}
</Animated.Text>
</Text>
So this tempText
is constantly changing, but i want there to be a fade-in animation when the text goes from an empty string -> some / any text at all. 所以这个
tempText
一直在变化,但是我希望当文本从一个空字符串开始->某些/任何文本时,会有一个淡入淡出的动画。 Any ideas how i could do this? 任何想法,我怎么能做到这一点?
Note: i know my code hasn't attempted to implement this but I haven't been able to find any working samples using Animated.Text to follow. 注意:我知道我的代码尚未尝试实现此功能,但是我无法使用Animated.Text来找到任何有效的示例。
Thanks in advance, 提前致谢,
EDIT: Better yet, if temp had a value of say "some text", and a word was added to it, eg "some text plus", the added word "plus" to be animated in individually would be great. 编辑:更好的是,如果temp的值是“ some text”,并且向其中添加了一个单词,例如“ some text plus”,则添加的要单独动画的单词“ plus”将是很好的。 Seems difficult though
虽然似乎很难
First, You'll want to set up an Animated value like so: 首先,您将要设置一个Animated值,如下所示:
this.opacity = new Animated.Value(0)
Then, when you receive the text you'll want to start the animation: 然后,当您收到文本时,您将要开始动画:
Animated.timing(this.opacity {
duration: 350, // some number in milliseconds
toValue: 1, // or whatever final opacity you'd like
}).start();
Finally, you'll need to interpolate that value on your Animated.Text component: 最后,您需要在Animated.Text组件上插入该值:
style={{
opacity: this.opacity.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
extrapolate: 'clamp',
}),
...
}}
Hopefully that can get you started! 希望可以帮助您入门!
You probably want to look at the componentWillReceiveProps
method. 您可能想要查看
componentWillReceiveProps
方法。
http://devdocs.io/react/react-component#componentwillreceiveprops http://devdocs.io/react/react-component#componentwillreceiveprops
You can then add/remove classes to your element (or to a span
for individual words), according to the props
changes. 然后,您可以根据
props
更改将类添加/删除到元素(或单个单词的span
)。
You may need to store a ref
to your element too so you can apply classes or animate css properties. 您可能还需要存储对元素的
ref
,以便可以应用类或为css属性设置动画。
See http://devdocs.io/react/refs-and-the-dom 参见http://devdocs.io/react/refs-and-the-dom
Try this Code for Change Text Animation. 尝试使用此代码来更改文本动画。
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>
);
}
}
Hopefully its work for you. 希望它为您服务。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.