尝试对 React 本机文本值进行动画处理

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 的缓动库！

谢谢！

Answer 1

React Native 有你可以使用的计时器。例如，要执行您尝试使用 setInterval 完成的操作：

state = {pleaseDisplayMe: 0}
componentDidMount() {
  setInterval(() => {
    this.setState({pleaseDisplayMe: this.state.pleaseDisplayMe + 1})
  }, 1000);
}
render() {
  return (
    <Text>{this.state.pleaseDisplayMe}</Text>
  )
}

但是，如果您尝试实际尝试从动画中获取值，则应将侦听器附加到 Animation 并从那里获取值，因为无法同步读取该值，因为它可能是本机驱动的。一个可能非常糟糕(我也是 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,
    }