Question

所以基本上我试图让这个渲染函数实时更新值（截至目前它只是在完成动画时跳转到最终值）

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

我觉得因为这个库可以在引擎盖下设置动画值，然后必须有一种方法来显示发生了什么。或者是否可以通过样式提供某种内容/价值属性？

我已经尝试自定义编写我自己的setInterval函数，但是我需要它与其他动画的时间排序更好，我喜欢访问RN的Easing库！

谢谢！

Answer 1

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

Answer 2

我使用这个库（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并将其粘贴到项目中并覆盖您需要的代码。

就我而言，我希望组件在安装时没有动画，但只有当值prop改变时，所以在它的构造函数中我改变了：

    this.state = {
      value : 0,
      displayValue : 0
    }

到此：

this.state = {
      value : props.value,
      displayValue : props.value,
    }

尝试动画反应本机文本值

2 个答案: