reactjs – 尝试动画反应本机文本值

发布时间：2020-12-15 05:04:08 所属栏目：百科来源：网络整理

导读：所以基本上我试图让这个渲染函数实时更新值(截至目前它只是在完成动画后跳转到最终值) this.state = { pleaseDisplayMe: Animated.value(0);}triggerAnimation(){ Animated.timing( this.state.pleaseDisplayMe,{toValue: 100,duration: 5000} ).start();}re

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

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

谢谢！

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,duration: 5000}
  ).start();
}

render() {
  return (
    <Text>{this.state.value}</Text>
  )
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!