尝试为 React Native 文本值设置动画
Trying to Animate React Native Text Value
所以基本上我试图让这个渲染函数实时更新值(截至目前它只是在动画完成后跳转到最终值)
this.state = {
pleaseDisplayMe: Animated.value(0);
}
triggerAnimation(){
Animated.timing(
this.state.pleaseDisplayMe,
{toValue: 100,
duration: 5000}
).start();
}
render(){
return <Animated.Text>{this.state.pleaseDisplayMe}</Animated.Text>
}
我觉得因为这个库可以在引擎盖下对值进行动画处理,所以必须有一种方法来显示正在发生的事情。或者是否有某种 content/value 属性 我可以通过样式输入?
我试过自定义编写我自己的 setInterval 函数,但我需要它与其他动画的时间安排更好地对齐,我很想访问 RN 的缓动库!
谢谢!
React Native 有 timers 你可以使用。例如,使用 setInterval:
来完成您想要完成的事情
state = {pleaseDisplayMe: 0}
componentDidMount() {
setInterval(() => {
this.setState({pleaseDisplayMe: this.state.pleaseDisplayMe + 1})
}, 1000);
}
render() {
return (
<Text>{this.state.pleaseDisplayMe}</Text>
)
}
但是,如果您尝试从动画中实际获取值,则应将侦听器附加到 Animated 并从那里获取值 there is no way to synchronously read the value because it might be driven natively。一个可能非常糟糕(我也是 React Native 的新手)的例子是这样的:
state = {
pleaseDisplayMe: new Animated.Value(0),
value: 0,
}
triggerAnimation(){
this.state.pleaseDisplayMe.addListener(({value}) => this.setState({value: value}));
Animated.timing(
this.state.pleaseDisplayMe,
{toValue: 100,
duration: 5000}
).start();
}
render() {
return (
<Text>{this.state.value}</Text>
)
}
我使用这个库 (https://github.com/wkh237/react-native-animate-number) 来实现那个效果。
import AnimateNumber from '../AnimateNumber';
const targetNumber = 1000;
<AnimateNumber
value={targetNumber}
interval={26} // in miliseconds
formatter={(number) => parseInt(number)}
easing={'easeOut'}
/>
格式化程序对我来说很重要,否则它会使用非常长的小数点(从 0 到 1000,例如,您会看到 33.3280329804,但使用格式化程序您只能看到整数)。
此外,查看 lib 源代码,我意识到起始编号是硬编码的(它始终从 0 开始)。由于它是一个非常简单的库(只有一个文件),您可以轻松复制 dist/index.js 并将其粘贴到您的项目中并覆盖您需要的代码。
在我的例子中,我希望组件在安装时不动画,但只有当 value 属性改变时,所以在它的构造函数中我改变了:
this.state = {
value : 0,
displayValue : 0
}
对此:
this.state = {
value : props.value,
displayValue : props.value,
}
所以基本上我试图让这个渲染函数实时更新值(截至目前它只是在动画完成后跳转到最终值)
this.state = {
pleaseDisplayMe: Animated.value(0);
}
triggerAnimation(){
Animated.timing(
this.state.pleaseDisplayMe,
{toValue: 100,
duration: 5000}
).start();
}
render(){
return <Animated.Text>{this.state.pleaseDisplayMe}</Animated.Text>
}
我觉得因为这个库可以在引擎盖下对值进行动画处理,所以必须有一种方法来显示正在发生的事情。或者是否有某种 content/value 属性 我可以通过样式输入?
我试过自定义编写我自己的 setInterval 函数,但我需要它与其他动画的时间安排更好地对齐,我很想访问 RN 的缓动库!
谢谢!
React Native 有 timers 你可以使用。例如,使用 setInterval:
来完成您想要完成的事情state = {pleaseDisplayMe: 0}
componentDidMount() {
setInterval(() => {
this.setState({pleaseDisplayMe: this.state.pleaseDisplayMe + 1})
}, 1000);
}
render() {
return (
<Text>{this.state.pleaseDisplayMe}</Text>
)
}
但是,如果您尝试从动画中实际获取值,则应将侦听器附加到 Animated 并从那里获取值 there is no way to synchronously read the value because it might be driven natively。一个可能非常糟糕(我也是 React Native 的新手)的例子是这样的:
state = {
pleaseDisplayMe: new Animated.Value(0),
value: 0,
}
triggerAnimation(){
this.state.pleaseDisplayMe.addListener(({value}) => this.setState({value: value}));
Animated.timing(
this.state.pleaseDisplayMe,
{toValue: 100,
duration: 5000}
).start();
}
render() {
return (
<Text>{this.state.value}</Text>
)
}
我使用这个库 (https://github.com/wkh237/react-native-animate-number) 来实现那个效果。
import AnimateNumber from '../AnimateNumber';
const targetNumber = 1000;
<AnimateNumber
value={targetNumber}
interval={26} // in miliseconds
formatter={(number) => parseInt(number)}
easing={'easeOut'}
/>
格式化程序对我来说很重要,否则它会使用非常长的小数点(从 0 到 1000,例如,您会看到 33.3280329804,但使用格式化程序您只能看到整数)。
此外,查看 lib 源代码,我意识到起始编号是硬编码的(它始终从 0 开始)。由于它是一个非常简单的库(只有一个文件),您可以轻松复制 dist/index.js 并将其粘贴到您的项目中并覆盖您需要的代码。
在我的例子中,我希望组件在安装时不动画,但只有当 value 属性改变时,所以在它的构造函数中我改变了:
this.state = {
value : 0,
displayValue : 0
}
对此:
this.state = {
value : props.value,
displayValue : props.value,
}