Question

我的应用程序有一个圆圈，其大小由循环动画确定。它还包含3个文本，其中每个文本一次应可见-不透明度由循环动画确定。用户可以在设置中更改动画的时间。

更改时间时，圆圈大小会按预期发挥作用，但是会同时显示两位文本，这意味着动画尚未完全重置。

我对本机反应不是很有经验，我知道这只是一个小错误，但是我想修复它，所以我问一个心理健康慈善机构，他们是否会为我发布我的应用程序！

动画序列代码是

breathAnimation =
      Animated.loop(
        Animated.sequence([
        Animated.timing(this.state.inhaleAnimation, {toValue: 1, duration:10}),
        Animated.timing(this.state.circleAnimation, {toValue: 1, duration:this.props.in*1000}),
        Animated.timing(this.state.inhaleAnimation, {toValue: 0, duration:10}),
        Animated.timing(this.state.holdAnimation, {toValue: 1, duration:10}),
        Animated.timing(this.state.holdAnimation, {toValue: 0, duration:10, delay: this.props.hold*1000}),
        Animated.timing(this.state.exhaleAnimation, {toValue: 1, duration:10}),
        Animated.timing(this.state.circleAnimation, {toValue: 0.6, duration:this.props.out*1000}),
        Animated.timing(this.state.exhaleAnimation, {toValue: 0, duration:10}),
  ]))

设置更新时：

  componentWillReceiveProps(nextProps){
    console.log(nextProps)
    // this.breathAnimation.stop()
    // this.breathAnimation.reset()
    console.log('restarting animation with in: ', nextProps.in, ' hold: ', nextProps.hold, ' out: ', nextProps.out)
    this.breathAnimation.stop()
    newAnimation =
      Animated.loop(
        Animated.sequence([
        Animated.timing(this.state.inhaleAnimation, {toValue: 1, duration:10}),
        Animated.timing(this.state.circleAnimation, {toValue: 1, duration:nextProps.in*1000}),
        Animated.timing(this.state.inhaleAnimation, {toValue: 0, duration:10}),
        Animated.timing(this.state.holdAnimation, {toValue: 1, duration:10}),
        Animated.timing(this.state.holdAnimation, {toValue: 0, duration:10, delay: nextProps.hold*1000}),
        Animated.timing(this.state.exhaleAnimation, {toValue: 1, duration:10}),
        Animated.timing(this.state.circleAnimation, {toValue: 0.6, duration:nextProps.out*1000}),
        Animated.timing(this.state.exhaleAnimation, {toValue: 0, duration:10}),
  ]))
    this.breathAnimation.reset()
    newAnimation.start()
  }

完整的源代码位于https://github.com/billyb1234/Breathe

代码在screens / circle.js下

任何帮助将不胜感激！

在开始新动画之前反应本机停止动画

0 个答案: