尝试为 React 本机文本值设置动画答案

【问题标题】：Trying to Animate React Native Text Value尝试为 React 本机文本值设置动画
【发布时间】：2017-02-10 01:29:14
【问题描述】：

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

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 库！

谢谢！

【问题讨论】：

标签： reactjs react-native react-animated

【解决方案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>
  )
}

【讨论】：

请注意，每次 triggerAnimation 被调用时，您将绑定一个新的侦听器。而且您并没有删除侦听器。
感谢伙计，这完全有帮助！事实证明，只要在任何东西上都有一个监听器更新状态，就会以我需要的方式强制进行动态重新渲染，所以我实际上只能在监听器中使用 this.state.forceUpdate() 方法。非常感谢您的帮助！

【解决方案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 并将其粘贴到您的项目中并覆盖您需要的代码。

在我的例子中，我希望组件在安装时不设置动画，但只有在 value 属性发生变化时才设置动画，所以我在它的构造函数内部进行了更改：

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

到这里：

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

【讨论】：